1 reply [Last post]
Joe King
Joe King's picture
United Kingdom
Last seen: 6 years 44 weeks ago
United Kingdom
Joined: 2015-03-19
Posts: 1
Points: 2

Hope someone can help.

I am trying to serve a mobile version of a website to mobile visitors and a desktop one to desktop visitors. Basically it's the same website, but with different font sizes.

Can I do this with CSS and if so is this the way to do it - by placing this code in a style.css file and refer to it on each html based web page?

@media screen and (max-width: 320px){
code goes here for mobile
@media screen and (max-width: 960px){
code goes here for desktop

Tony's picture
Last seen: 1 week 4 days ago
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi Joe King, That's the basic

Hi Joe King,
That's the basic idea.
max and min width are a little confusing, you may want to use min-width with those values.
Max-width is like saying the width has to be at least this big.

You need to consider things like what happens when multiple media queries match and when none match.

Have a look at this test page: http://csscreator.com/media.html