Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Media Queries

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #40231
    opeyokun22
    Member

    Hi,

    Im pretty new to web design. I wonder if anyone can help. I am trying to use media queries to deal with large screen sizes, but when I test the page in cross brower testing the changes have not taken affect. I’m not doing anything complicated, I’ve tried it on an external stylesheet, but reverted to internal, my code is

    (the main css)

    body{
    width:1200px;
    height:2300px;
    margin:auto;}

    (the changes to the body that I’d like to occur)

    @media screen and (max-width:1600px) and( min-width:1400px){

    body{
    min-width:1400px;
    max-width:1600px;}
    }
    This is what I want to happen if the browser is larger than what I worked on 1366×768. The other queries are structured in the same way, and I have included the media queries with the main CSS. Is this the right way to do this?

    Thanking you in advance.

    #111586
    Kitty Giraudel
    Participant

    A few things here:

    First, in most case you shouldn’t specify such styles directly to the body tag. You should create a wrapper which holds all columns depending on your layout, etc. Maybe something like this:

    <html>
    <head/>
    <body>
    <div class='wrapper'>
    <div class='main-content'/>
    <div class='aside-content'/>
    </div>
    </body>
    </html>

    Secondly, you shouldn’t specify a height, neither to your body nor to your wrapper. Let the container expands itself according to the content it wraps.

    Then, you shouldn’t build a website this large. The average screen resolution is 1024*768, so your wrapper width should be about 980px max to default. Then, on larger screens, you expand it with media queries.

    Last, your media query declaration seems good (except I would put the min-width before the max-width, looks cleaner to me) but not the properties/values you set to your wrapper (body in your case).

    You’d like to try something like this:

    @media screen and (min-width: 1400px) and (max-width: 1600px) {
    body {
    width: 1400px;
    }
    }

    Plus, unless you’re planning to add another media query starting from min-width: 1600px, you should set a max width to this one. ;)

    #111589
    opeyokun22
    Member

    Thanks, I’ll give some of it a try, and see whether there are any changes.

    Lola

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.