Skip to main content

Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #31968
    hero
    Member

    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;
    }
    }
    #55868
    TheDoc
    Moderator

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

    #55869
    hero
    Member

    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.

    #55870
    hero
    Member

    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.

    #55876
    TheDoc
    Moderator

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

    @media screen and (max-width: 480px)
    {
    #header { display: ; }
    }
    #55820
    hero
    Member

    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.

    #55821
    TheDoc
    Moderator

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

    #55800
    hero
    Member

    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.

    #55793
    hero
    Member

    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.

    #55725
    TheDoc
    Moderator

    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.

    #110623

    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.

    #112655
    StretchPun
    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”).

    #120707
    embryods
    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; }
    }

    #122201
    embryods
    Member

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

    #127234

    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

Viewing 15 posts - 1 through 15 (of 18 total)
  • The forum ‘CSS’ is closed to new topics and replies.