Forums

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

Home Forums CSS another simple @media query problem

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #35899
    chanman
    Member

    I have a @media query problem when my page resizes to 1100px the navigation disappears but I need the main-content to push up against the left side of the screen with a 15px margin. this is what I have but it doesn’t work.

    @media (max-width: 1100px){
    article.nav-enclose{display: none;}
    article.main-content{margin-left: 15px;}
    }
    #93732
    mikes02
    Participant

    That’s because it is being overwritten, you have your media query placed above article.main-content in the stylesheet, so it’s being replaced by the margin-left:250px. Move the media query to the bottom of your stylesheet and that should fix the problem. On a side note, you should really clean up your stylesheet, it’s a mess.

    #93742
    chanman
    Member

    Dose that mean all my [email protected] queries need to go to the bottom?

    #93746

    Short answer: yes.

    #93758
    mikes02
    Participant

    Media Queries should be at the bottom of the stylesheet so that the declarations are not overwritten. Also, why are you hiding your navigation? The site basically becomes unusable once it’s gone, or do you plan to style it differently?

    #93783
    chanman
    Member

    I plan to style it different here is what I’ve got so far it changes at 500px. let me know if you like it or not.

    #93795
    davidlab.be
    Participant

    Your full size main text area is way to large. Makes it hard to read on large monitors. Then on the reverse side just before the 500px mark it is way to narrow.

    #93798
    chanman
    Member

    The full size text area is my next task and I will fix the narrow thing.

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