Hide <div> on Mobile site

[design4web]

With custom CSS I added “Click here to learn more” on the right of each of my accordion items on my site: http://stryveforme.com/recommendations/

div.click {
float: right;
padding: 0px;
}

I would like this text to be hidden at smaller screen sizes so I tried this:

@media screen and (max-width: 600px) {
div.click {
float: right;
padding: 0px;
visibility: hidden;
display: flex;
clear: both;
}

That worked, but made “Click here to learn more” drop to a new line and align left. I’m not sure how to fix this.

[ruenel]

Hey Megan,

Thanks for writing in! If you want to hide the text in smaller screens, you should be using this instead:

@media screen and (max-width: 600px) {
div.click {
  display: none;
  }
}

This code will hide the entire entire element. By the way, we could not thoroughly check the code in your site because the page in question is asking for password. Please send us the password so we can check the page.

Thanks.