Streaming live at 10am (PST)

Hiding div elements based on media screen min-width

Hi all,

I’m currently working on my website:
https://preview.webflow.com/preview/richards-wondrous-project-c4278b7f13231?utm_source=richards-wondrous-project-c4278b7f13231&preview=5641cb028f0e1aa4c00f17f70ce8d848

and I’m trying to hide/show things based on the screen size of the user. I have the following custom CSS I am trying to implement:

<style>
	@media screen and (min-width: 800px) {
  	.mobileAlert {
      display: none;
    }
  }
  
  @media screen and (max-width: 799px) {
    .parent {
      display: none;
    }
    .homeButton2 {
      display: none;
    }
    .aboutMe {
      display: block;
    }
  }
</style>

However, the only line that appears to be working is the

    .parent {
      display: none;
    }

None of the other div elements disappear when I manipulate the screen to their respective sizes. Any help is greatly appreciated!

Are you trying to hide elements at very specific widths?

Because you know you hide elements to general screen sizes natively with webflow just with the display controls?

Ahh haha that’s embarrassing. Thank you once again :slight_smile:

Haha no probs man! Probably took me a while to work out when I started :laughing: