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:
<div id="header" class="mobile-only">
This block will only be seen if the browser was resized to 480px or less
</div>
<div id="header" class="mobile-only">
This block will only be seen if the browser was resized higher then 480px.
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.
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.
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.
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.
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.
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.
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:
@embryods He was asking if it is possible to skip the loading of images (the slider) to increase page speed, if there are images in the HTML, they will still be loaded regardless if you set it to display none in the CSS.
@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/
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
I'm just wondering about showing some content or not depending om the device. I mean that some content of the the webpage should not be shown if movile device. This is in order to make it lighter for movile devices.
HTML:
CSS:
By the way, will IE 9 support media queries. Haven't downloaded the Release Candidate yet.
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.
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.
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.
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 He was asking if it is possible to skip the loading of images (the slider) to increase page speed, if there are images in the HTML, they will still be loaded regardless if you set it to display none in the CSS.
I thought it was max 320 for iPhone?
@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/
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
I'm just wondering about showing some content or not depending om the device. I mean that some content of the the webpage should not be shown if movile device. This is in order to make it lighter for movile devices.
What server side scripting language are you using? PHP? or is this in plain HTML?
If you're using PHP there is: http://mobiledetect.net/