Change site completely if browser size is small

Question

I am currently using media query in my css but my site is still looking bad. Is there a way to determine first the witdh of a browser and then load different index files?

To post some code here is my media query:

@media screen and (max-width: 600px) {
  .topbar{
    opacity: 0;
  } 
....
}

What do you mean "is looking bad"? is there a particular problem? — , Aug 07 '12 at 14:44
I thought I was clear. Yes there is a particular problem: that I don't have full control only with different css. I am asking if I can load diferent index files depending on browser size, not just different css, wich doesn't do much honestly. I want to completly change my site for mobiles, diferent divs, etc. — Claudiu Creanga, Aug 07 '12 at 14:53
I haven't had a single design that I wouldn't be able to change just trough CSS using media queries - you must be doing something wrong (either badly structured html or you are missing some css knowledge). — easwee, Aug 07 '12 at 14:55
I am sure I am missing some css knowledge (I am a beginner). But, for example how do you do map tags with css? or use different meta tags? (this is what my client is asking) — Claudiu Creanga, Aug 07 '12 at 15:22

score 2 · Answer 1 · edited May 23 '17 at 12:12

2

It might be an idea to load different css files for different screen sizes; essentially moving the media selection from the css to the html:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="600px.css">

You might want to read Detect different device platforms using CSS for some related content.

edited May 23 '17 at 12:12

Community

1
1

answered Aug 07 '12 at 14:57

Bakabaka

1,505
1
13
21

Sorry, posted my answer while you commented. Have to agree with @easwee that using different html files is not a great idea... – Bakabaka Aug 07 '12 at 14:59

score 2 · Accepted Answer · answered Aug 07 '12 at 14:57

2

I would say do some more research on building your CSS but to answer your question:

<script type="text/javascript">
if (screen.width <= 699) {
document.location = "http://mobilesite.com";
}
</script>

answered Aug 07 '12 at 14:57

score 1 · Answer 3 · answered Aug 07 '12 at 14:58

Generally you want to aim to use the same .html file for your website, then use CSS to customise specifically for desktop or mobile. I know you may have very different ideas for the two sites, but it can all be done in pure CSS if your markup (html code) is good enough. Check out the CSS Zen Garden for how powerful CSS can be.

If you want to completely reset your css for the mobile site, just wrap the old css in a media query targeting screens screen and (min-width: 601px), and you will find your mobile site is completely unstyled

score 0 · Answer 4 · answered Aug 07 '12 at 15:00

css has nothing to do with loading different index files according to the browser width.

If you want to style your elements differently using @media rules, make sure they are set close to the bottom of the page, in other words - after the main styles, because otherwise - they will be simply overwritten.

Change site completely if browser size is small

4 Answers4

Linked