0

I have an with a Magento site at www.lovetobenatural.co.uk running Magento 1.7.0.2.

Looking at the site in any browser, when I shrink the screen width (to test display for mobile), and then scroll right (with the browser still at the reduced width) the right-hand side of the site is 'cut-off', and just shows white.

I had thought it was something to do with .main-container {overflow: hidden};, however changing this to scroll; or auto; has had no effect.

I wondered if anyone could point me in the right direction as to the cause?

0

At least part of your problem is that some elements are exceeding the width of your browser.

/* peer-grid-default.css:12 */
.container_12 {
    width: 1200px !important;
}

The above is the container for your banner/hero image. Since it's forced to be 1200px wide, when you shrink the browser below 1200px, your container remains at 1200px. If other elements and their parent elements are set to something like 100% width, they will properly match the browser width creating the white space. Your solution is to use Responsive Web Design practices (eg, media queries and fluid widths such as percentages) on your elements so that you stay within the bounds of the browser's width. For the banner specifically changing the above would help.

.container_12 {
    max-width: 1200px;
    width: 100%;
}

Or use media queries

@media screen and (min-width: 1200px){
    .container_12 {
        width: 1200px;
    }
}

This does not solve your problem completely, but hopefully you get the idea from there. You're going to need much more, so look for any other elements that have set widths like this that might be overflowing. Setting overflow:hidden; on your body would be a band-aid on your white-space problem, but you still need many edits to your css for mobile to look nice.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.