CODEWITHSUNDEEP
cssmedia-queries
TheWebs
TheWebs

Reputation: 12923

Responsive design between two different sizes

I have a client site that I am working on where they want it to look one way at 960px+ and then look another way at 959px and down.

Essentially, instead of the smooth scaling we are all use to, once it goes below 960px its suppose to jump to what it would look like on an iPhone, regardless if you 745px or 320px.

So what I did was:

@media only screen and (min-width: 960px) and (max-width: 1366px){}
@media only screen and (min-width: 320px) and (max-width: 959px)

When but when I use Window Resizer for chrome and go to 960, it looks fine, 768, it looks broken. I originally had:

@media only screen (max-width: 960px){}
@media only screen (max-width: 480px){}

And at 480px it looks perfect, exactly how I want it. But when I do the first set of media queries its like it doesn't here me. When I try it on my iPhone, same story. Its like it doesn't exist.

Any ideas how I can say: at 960+ you look like this, at 959px and down, you look like this - essentially "jumping" between looks.

Update.

So taking in account of what the people have posted, I updated the question to reflect the changes. But the issue still stands at 960 its a tad broken, probably me. but at 768 its completely shattered.

At 480 its really broken and when I refresh the screen jumps to where I want it to look then back to the broken state its in.

Upvotes: 0

Views: 1873

Answers (2)

GuyH
GuyH

Reputation: 796

To achieve "... they want it to look one way at 960px+ and then look another way at 959px and down" you only need one media query, because there is only one breakpoint in that.

So first write all the styling you want for screen sizes of 959px and below.

Then, below that, add the media query:

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

At smaller screen sizes this will use all the default styling declared before the media query. But for screens 960px or more, any properties declared inside the media query will overrule the same properties in the default styling (assuming they have the same CSS specificity, so be careful with that).

But, and this is a very important but, remember that not everyone runs with the same text size you do. Many people with poor sight will be using a text-only zoom, and you want your media query to behave the same for them as you wrote it, or all sorts of unwanted effects can ensue. To achieve that (it's part of Accessibility) simply specify your breakpoint in em units rather than px units:-

Assuming you are using the usual default size of 16px, then 960px = 960/16 = 60em. So your media query now becomes:

@media only screen and (min-width: 60em) {...}

Hope this helps.

Upvotes: 0

john Smith
john Smith

Reputation: 17906

maybe i´m just high but it looks like it cant work because sth. that has max-width 320px cant have min-width 959px

so just change

 @media only screen and (min-width: 959px) and (max-width: 320px){}

to

 @media only screen and (min-width: 320px) and (max-width: 959px){}

and so on ...

Upvotes: 2

Related Questions