Hidden Containers - Post ID 281921

User 2601283 Photo


Registered User
219 posts

How do you set a container to be hidden at various break points within SD 3? I need the item visible when posted, but would like to hide it when working in the program.
User 244626 Photo


Registered User
811 posts

For Foundation 6 you could use Visibility Classes. "hide" class works for sm and up. There are quite a few others if you start typing you will see the drop down for the Foundation classes available.
Bootstrap 5 CSS Grid.
User 2601283 Photo


Registered User
219 posts

thank you
User 2699991 Photo


Registered User
4,782 posts
Online Now

Angie Mulligan wrote:
thank you

Don't forget to put them back to how they were once you have finished working, otherwise, they will still be still be hidden when you publish the project
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 244626 Photo


Registered User
811 posts

Wayan Jaya wrote:
Angie Mulligan wrote:
thank you

Don't forget to put them back to how they were once you have finished working, otherwise, they will still be still be hidden when you publish the project


While it in my opinion it would be considered a bad approach one could add a bit of jquery to remove the "hide" class when the page loads. As long as the element is below the fold, it would never be seen. Again, the design should not dictate how the final code is loaded but someone may have good reason to do so. It may also be better to target the id's of elements as "hide" and "show" classes may be used on other component actions.


<script>
$(document).ready(function() {
$('.hide').removeClass('hide');
});
</script>
Bootstrap 5 CSS Grid.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.