Grow your CSS skills. Land your dream job.

Mobile Device Trick

  • # March 10, 2011 at 4:55 pm

    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:







    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

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

    # March 10, 2011 at 5:01 pm

    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.

    # March 10, 2011 at 5:02 pm

    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.

    # March 10, 2011 at 6:15 pm

    You 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

    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.

    # March 10, 2011 at 11:22 pm

    You 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

    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.

    # March 11, 2011 at 11:23 am

    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.

    # March 11, 2011 at 12:53 pm

    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.

    # September 23, 2012 at 12:28 pm

    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.

    # October 25, 2012 at 10:28 pm

    > 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

    > 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 11, 2013 at 5:44 pm

    @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.

    # January 11, 2013 at 8:27 pm

    I thought it was max 320 for iPhone?

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".