Mobile Device Trick

[hero]

Use media queries to hide content on screens with smaller resolutions, or show content on screens with a higher resolution. Easy way to hide pictures or unnecessary blocks of content for mobile devices. Good addition to put in your media queries to lay content out differently.

HTML:

This block will only be seen if the browser was resized to 480px or less











This block will only be seen if the browser was resized higher then 480px.

CSS:

.screen-only

{

display: block;

}

.mobile-only

{

display: none;

}



@media screen and (max-width: 480px)

{

.screen-only

{

display: none;

}



.mobile-only

{

display: block;

}

}

[TheDoc]

There are much easier ways to do that without using classes like ‘screen-only’ and ‘mobile-only’.

[hero]

Could you please explain. I am not aware of another way with css to hide certain elements from a page based on resolution? I would hate to use Jquery for something simple like this.

[hero]

I’m not suggesting you do this for every element. Only elements that are not as important that take up alot of screen real-estate.

[TheDoc]

You don’t need to add the classes like that. Can just do:

@media screen and (max-width: 480px)

{

#header { display: ; }

}

[hero]

I understand what you mean now. For me I am going to use those two class names. I have too many pages and too many elements in the content area I would like to hide (but not the entire content area) and I don’t feel like giving them IDs and listing them in the media query.

By the way, will IE 9 support media queries. Haven’t downloaded the Release Candidate yet.

[TheDoc]

You should be able to target everything with CSS – no need to give every element on a page a different class name.

[hero]

No. There are some larger images that I would like hidden. They either need a class name or an ID. I understand your way of defining what sections should be hidden using a media query. However, I am not going to write IDs for “certain” images or blocks of comments. It is easier to use a class name.

[hero]

I also do not want to write the following because I do not intent to hide all images

@media screen and (max-width: 480px)

{

img { display: none; }

}

Using a class name to hide certain elements is much better then having to define all of them in a media query (like you did with a #header section). The point of the code is to hide certain elements, not a section, and definately not all elements of a type.

[TheDoc]

It looks like you don’t particularly have a grasp of CSS yet.

You can be as specific as you want to. Maybe you want to remove images in the sidebar, but only on pages in a section called ‘poop’:

.poop #content #sidebar img { display: none; }

Maybe you only want the first image:

.poop #content #sidebar img:first-child {display: none; }

That way if you ever want to change it, you don’t need to edit multiple templates or HTML files, it’s all in the CSS.

Having said that – you can do whatever you want.

[mickeyschlick]

So in that case how would I disable images for one page but not all pages? I have a slider that is slow to load on mobile and I would prefer to just skip it all together, but I want the rest of my content to be left alone. Or would it be better to do this in the PHP of the slider itself? Basically to just skip loading the images at all if the screen is not big enough.

[StretchPun]

> So in that case how would I disable images for one page but not all pages? I have a slider that is slow to load on mobile and I would prefer to just skip it all together, but I want the rest of my content to be left alone. Or would it be better to do this in the PHP of the slider itself? Basically to just skip loading the images at all if the screen is not big enough.

The page will be loaded in its entirety, so a server-side solution is required. You can read a thread about it here [here](http://doctype.com/mobile-browsers-download-all-content-stylesheets-just-content-specified-media-query-applies-them “here”).

[embryods]

> So in that case how would I disable images for one page but not all pages? I have a slider that is slow to load on mobile and I would prefer to just skip it all together, but I want the rest of my content to be left alone. Or would it be better to do this in the PHP of the slider itself? Basically to just skip loading the images at all if the screen is not big enough.

There is a CSS solution: Give each page in your site a unique identifier and use that in the selector area for your rule in the media query. Using TopDoc’s example above, let’s pretend we want to do this in the “about us” page of our site, this is what the css would look like:

@media screen and (max-width: 480px)
{
body#about .poop #content #sidebar img { display: none; }
}

[embryods]

@scottnix Thank you for clarifying. There really is no pure CSS solution (that I know of) to prevent images from loading. He would either have to send the user a different html page or use a combination of PHP, CSS and Javascript to either prevent the image from loading or to load a lower res version of the original image. Here is an interesting site I stumbled upon while trying to find a solution: http://adaptive-images.com/

[orangecommune]

I just wanted to say thanks for all your answers – this totally helped me avoid all the issues of creating two websites for our company. Thanks for sharing your expertise!
Stephen

[Author]

Posts