Grow your CSS skills. Land your dream job.

using @media queries

  • # March 22, 2013 at 2:46 am

    my page looks good before adding

    @media only screen
    and(min-width:1224px)
    {
    }

    to my whole css styles

    min-width:1224px is laptops and desktops

    but why its not work out ?

    here is a link

    # March 22, 2013 at 4:06 am

    Working as intented here. Starting from 1224px viewport width, there is your layout. Before that it’s broken.

    # March 22, 2013 at 4:10 am

    Remove the media query.

    # March 22, 2013 at 4:48 am

    @Hugogiraudel

    my viewport width was 1366, the design is ok in chrome but firefox omits all the styles, what could be the reason ?

    # March 22, 2013 at 5:02 am

    @CodeGraphics

    no i want to add other media queries sizes also

    # March 22, 2013 at 6:06 am

    When you say to your whole CSS styles?

    You just want to keep the styles as they are and add these media queries afterwards and only address the parts that need to change. If you have a fixed desktop size I would put that into the main code as if you weren’t building a responsive site. Then address only the changes in the media queries.

    I also tend to use max-width on main breakpoints and min for in-betweeners e.g. @media only screen and (max-width: 960px) { }

    # March 22, 2013 at 6:40 am

    @iknowdavehouse

    first i design the layout completely for the desktop, now i want to convert it into responsive , so can i use the styles which i wrote completely for **desktops** as **main code** and change the required parts with other media queries ?

    # March 22, 2013 at 7:01 am

    Yeah – if you think the style sheet just reads from top to bottom… so the media queries inherit what’s above it. So all you need to do is address the parts that need to change.

    For example if you have 3 content boxes in a row on the desktop site

    and .content has a float: left; width: 33%; in the main body of the CSS

    For the media query you just need to address what needs to be addressed – so to stack these on top of each other at 500px you would say

    @media only screen and (max-width: 500px) {

    .content {clear: left; width: 100%;}

    }

    Then you will realise that stacking them will cause the need to add extra code too… like a margin-top to separate them vertically for example. You do not need to address what isn’t changing – font color etc (unless you want to)

    So this theory works from the widest media query to the smallest, they will inherit the one above so you don’t need to repeat this action on .content for a media query of 350px because it would have inherited from the 500px break point.

    # March 22, 2013 at 8:13 am

    @iknowdavehouse

    yeah got it,thanks :)

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

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