White space on the right side of page on mobile

We have a custom built theme that works fine on desktop view.
Currently trying to make it into a mobile responsive view. All the elements are sitting correctly, and fill the mobile view correctly when first loaded, however if the screen is zoomed there is a whole bunch of white space to the right of the content. Appears as if the desktop pixel space is still being allocated.
Have tried a number of things to get rid of it without success.
Can you help?
Site that the trial work is being shown on is http://wollongongsrealestateagent.com.au/london/

  • PC

    Hello there,

    Thanks for posting on the forums.

    I checked your website on responsinator, it works fine for me : http://www.responsinator.com/?url=http%3A%2F%2Fwollongongsrealestateagent.com.au%2Flondon%2F

    However, as you said, zooming causes white space, I am a bit confused as responsive themes, do not allow zooming from what I have seen.

    Can you have a look here : http://stackoverflow.com/questions/8004707/responsive-website-on-iphone-unwanted-white-space-on-rotate-from-landscape-to and see if that helps ?

    I have also asked some help from our CSS expert @Patrick Cohen on this one.

    Cheers, PC

  • Patrick

    Hi there @DebbieSum

    Welcome to the forums, glad to have you aboard!

    The first thing I noticed when inspecting your site with browser developer tools is that you have 5 different stylesheets in your theme, and 3 of them have media queries for your responsive layout.

    That's 3 style-sheets too many; quite difficult to keep things organized that way.

    Also, I find many media queries in those style-sheets that likely contain conflicting rules. In this one for example - /css/wilsonLuna.css - I find this:

    @media only screen and (max-width: 320px)

    ...and in this one - /css/style_city_mobile.css - there is this:

    @media only screen and (max-width: 480px)

    Those are fine, and will apply their styles to screens 319px and less, and 479px and less, respectively. But they should be in the same style-sheet to keep things organized and easier to control (for you).

    But then we have this one - /css/320.css - where there are several malformed queries as follows:

    @media (max-width: 320px) and (min-width:320px)...
    @media (max-width: 384px) and (min-width:384px)...
    @media (max-width: 480px) and (min-width:480px)...
    @media (max-width: 568px) and (min-width:568px)...
    @media (max-width: 360px) and (min-width:360px)...
    @media (max-width: 980px) and (min-width:980px)...

    The problem with each of the above queries is that they are locked to specific screen sizes, and will apply only if those sizes are being used to display the layout. Anything in between will roll back to your default layout.

    I would recommend first combining all your media queries into a single style-sheet for mobile layouts. Then go over them with a fine-tooth comb, and re-define them to something like the following example:

    /* Large display 1200px and wider*/
    @media screen and (min-width: 1200px) {
    div#main { margin:50px; }
    }
    
    /* Portrait tablets from 768px to 979px*/
    @media screen and (min-width: 768px) and (max-width: 979px) {
    div#main { margin:30px; }
    }
    
    /* Phones to tablets 767px and less*/
    @media screen and (max-width: 767px) {
    div#main { margin:20px; }
    }
    
    /* Phones 480px and less*/
    @media screen and (max-width: 480px) {
    div#main { margin:10px; }
    }
    
    /* Phones 320px and less*/
    @media screen and (max-width: 320px) {
    div#main { margin:0; }
    }

    Style rules in each of the media queries as defined above will apply to a whole range of screen sizes as opposed to specific sizes as you have them defined now.

    For the complete specs on media queries and their operators, see:
    http://www.w3.org/TR/css3-mediaqueries/

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.