Hide a specific image on mobile

  • How do I hide a specific image when a user visits on mobile?

    The site in question uses a column on the homepage with an image to the left and copy to the right. On mobile, I don’t want the image to appear and I can’t figure it out.

    I tried in adding in the “additional css:”

    @media (max-width: 480px) {
	.hide {
		display:none;
	}
}

    and adding “hide” as an additional CSS class for the image in question. But it’s not working.

    Any insight is really helpful, thanks.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Moderator Kathryn Presner

    (@zoonini)

    Hey there – in theory this should have worked, but I’m not seeing the hide class on that homepage image at the moment. Did you remove it?

    If I use similar CSS to target the image’s current unique class, it works to hide it on smaller screens: 

    
@media screen and ( max-width: 480px ) {
  .wp-image-49 {
    display: none;
  }
}

    Would you like to try it again with the hide class and let me know how it goes?

Viewing 1 replies (of 1 total)
  • The topic ‘Hide a specific image on mobile’ is closed to new replies.