using @media queries

[yoyo]

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

[Kitty Giraudel]

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

[CodeGraphics]

Remove the media query.

[yoyo]

@Hugogiraudel

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

[yoyo]

@CodeGraphics

no i want to add other media queries sizes also

[iknowdavehouse]

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) { }

[yoyo]

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

[iknowdavehouse]

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.

[yoyo]

@iknowdavehouse

yeah got it,thanks :)

[Author]

Posts