Now Here - Church Website Designs!



Portal Home > Knowledgebase > Website Design > CSS > Hide a picture in a Mobile Browser With CSS

Hide a picture in a Mobile Browser With CSS

I have tried a few ways to hide pictures on a website when people view it in a mobile phone browser. The best way I have found is CSS @media 

You will want to add the picture or text inside of a divide tag with an id=hideme


Then in the CSS file add in 

@media (max-width: 360px) {

.hideme {
display: none !important;



Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". However, notice that these two methods produce different results:

visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout size. display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there. 


Was this answer helpful?

Add to Favourites Add to Favourites Print this Article Print this Article