0

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; } .... }
Improve this question
4
  • What do you mean "is looking bad"? is there a particular problem? Commented Aug 7, 2012 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. Commented Aug 7, 2012 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). Commented Aug 7, 2012 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) Commented Aug 7, 2012 at 15:22

4 Answers 4

Reset to default
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>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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.

Improve this answer

1 Comment

Sorry, posted my answer while you commented. Have to agree with @easwee that using different html files is not a great idea...
1

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

Improve this answer

Comments

0

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.