- This topic is empty.
-
AuthorPosts
-
March 10, 2011 at 4:55 pm #31968
hero
MemberUse 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;
}
}
March 10, 2011 at 4:59 pm #55868TheDoc
MemberThere are much easier ways to do that without using classes like ‘screen-only’ and ‘mobile-only’.
March 10, 2011 at 5:01 pm #55869MemberCould 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.
March 10, 2011 at 5:02 pm #55870MemberI’m not suggesting you do this for every element. Only elements that are not as important that take up alot of screen real-estate.
March 10, 2011 at 6:15 pm #55876MemberYou don’t need to add the classes like that. Can just do:
@media screen and (max-width: 480px)
{
#header { display: ; }
}March 10, 2011 at 10:27 pm #55820MemberI 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.
March 10, 2011 at 11:22 pm #55821MemberYou should be able to target everything with CSS – no need to give every element on a page a different class name.
March 11, 2011 at 11:21 am #55800MemberNo. 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.
March 11, 2011 at 11:23 am #55793MemberI 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.
March 11, 2011 at 12:53 pm #55725MemberIt 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.
September 23, 2012 at 12:28 pm #110623mickeyschlick
MemberSo 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.
October 25, 2012 at 10:28 pm #112655StretchPun
Member> 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”).
January 11, 2013 at 4:39 pm #120707embryods
Member> 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; }
}January 24, 2013 at 5:36 pm #122201Member@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/
March 6, 2013 at 3:54 pm #127234orangecommune
MemberI 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 -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.
