Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question resopnsive site loses style when browser is resized

    On my website here, why does it lose the styles when I resize the browser?

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,662
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Works for me in Firefox. But note that valid HTML is a good prerequisite for cross-browser compliant websites.

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    if you go small enough stephan the font size increases drastically and the input boxes shrink. I couldnt figure it out so I didnt comment but it's weird. I think its got something to do with the table rows but ic ant figure it out

  • #4
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,259
    Thanks
    10
    Thanked 277 Times in 276 Posts
    I don't see a particular media query that will trigger when your browser is small, presuming its not an iphone. So the style label { font-size: 22px; } is not present at small window sizes.

    Dave

  • #5
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    that's not a problem, works fine on iPhone and iPad, just need it working on Nexus 7

    there's about 20px play in the width?!

  • #6
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,259
    Thanks
    10
    Thanked 277 Times in 276 Posts
    I don't have a nexus 7 to check, have you verified that your expected media queries are working right on it? I'm assuming they're not working, the same way they're not working for me in Firefox.

    Dave

  • #7
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    I have just added

    Code:
    /* Nexus 7 (portrait and landscape) ----------- */
    @media only screen and (min-device-width : 603px) and (max-device-width : 966px) {
        ul.top-menu { background: yellow; }
    }
    
    /* Nexus 7 (landscape) ----------- */
    @media only screen and (min-width : 604px) and (orientation: landscape) {
        ul.top-menu { background: green; }
    }
    
    /* Nexus 7 (portrait) ----------- */
    @media only screen and (max-width : 603px) and (orientation: portrait) {
        ul.top-menu { background: orange; }
    }
    still no joy....

  • #8
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,259
    Thanks
    10
    Thanked 277 Times in 276 Posts
    So it's not seeing the queries. Why not just add a default of "regular" css in front of all your queries, to cover the case of a browser smaller than 640 or 480px? You've got no styling in there now for the case where a media query isn't available.

    Dave

  • #9
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    theres about 20px width play on Nexus 7


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •