HIde/Show A Section

Community resources
1

Hey there, does anyone know how we can hide a section when thescreen size is 1024px x768px and show a different section when the width becomes greater than 1024px

Thanks in advance

2

Since you’re wanting this to be hidden outside of the native breakpoints, you’ll need to utilize a bit of custom CSS. I’m not sure if you’re wanting the initial hidden section to hide all the way down to the lowest size, but something like the following should be what you’re looking for:

.first-hidden-element {
  display: none;
}

@media screen and (min-width: 1024px) {
  .first-hidden-element {
    display: block;
  }
  .second-hidden-element {
    display: none;
  }
}

Just update the class names to the correct element classes in your project and make sure you’re using the correct display style (block, inline-block, flex, grid, etc) based on your specific usage.

If you get stuck implementing it, just include your read-only link and I’ll modify it to work for your project specifically :+1:

3

Hi there. if you could help that would be great. We are trying to show one section above 1024px and show a different section from 1024px …until it gets to tablet width etc etc

I have added your code but im not sure where im going wrong, we added classes of section-2 and section-3.

Any help with this woukd be great , if only we could choose our own breakpoints!

Thank you! :smiley:

https://preview.webflow.com/preview/carloss-supercool-project-297582?utm_medium=preview_link&utm_source=designer&utm_content=carloss-supercool-project-297582&preview=3f5d63ce122079814546b459517df3ce&pageId=60afd9ad4b3d577efc9e5245&workflow=preview

4

The code you’ve got is working, however all the code used in the Page Settings or Project Settings area is only visible when the site is published.

If you instead include all of the same code within an HTML Embed element on the page, you should see it fires as intended :slight_smile:

image
image1412×1042 153 KB

image
image1488×1072 144 KB

5

Thanks for the help, that’s worked a treat! :smiley: