Streaming live at 10am (PST)

HIde/Show A Section

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

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: