Archived topic

Horizontal Scroll

3 replies · Started by Andy on August 12, 2016

Viewing posts 1–4 of 4

August 12, 2016 at 5:41 am #217649

Hi Tom,
I'm rebuilding my portfolio site and getting some unwanted horizontal scroll on the home page: http://tinyurl.com/jsxp4cj

You can see it when resizing the browser window down to tablet/mobile sizes.

Also, on the home page hero image, in mobile view it chops off most of the laptop part of the image, I realise its because mobile proportions are completely different to tablet/desktop proportions but wondered if you could recommend a solution.

Thanks.

August 12, 2016 at 10:01 am #217708

Hi Andy,

Try adding this CSS:

body {
    overflow-x: hidden;
}

As for the image, you could give that section a custom class, and apply a more mobile friendly background image on mobile:

@media (max-width: 768px) {
    .your-custom-section-class {
        background-image: url('URL TO YOUR MOBILE HEADER IMAGE');
    }
}

August 12, 2016 at 4:14 pm #217770

Thanks Tom I thought about using overflow-x: hidden; but wondered if there was an underlying cause for it such as maybe some padding that could have been removed. Your solution works fine though.

Also your suggestion for the background image confirms my thoughts too.

August 12, 2016 at 8:05 pm #217787

I'm coming up with a better solution as it looks like an issue with the columns in WP Show Posts - the solution will be in the next update :)

This archived topic is closed to new replies.

Start building better websites today.