Remove right margin

[ChrisL89]

Hello,

I got a problem with the mobile version of my site. In the editor on my desktop I see that there is a space for the browser scrolling bar on the right so that the site doesn't go underneath the bar when loaded. Unfortunatley, in the mobile version of the site, this space is still there despite there being no scrolling bar. I'm using the sectionizer addon to create page breaks across the whole screen so it's very noticable that they don't go all the way to the right. Is there any way of cancelling this scrolling bar padding for mobile devices?

[Adam7]

Is the scrollbar present on pages where you aren't using the Sectionizer app, @ChrisL89? Which site are you seeing this with?

[ChrisL89]

Hi Adam, 

Thanks for your fast response. I've checked and it's only the front page it's present on (the only one with the sectionizer). All the others are fine. It's strange as it's not just the sectionizer parts that have the margin, the whole page has it.

I'll pm you the address.

Thanks again.

[Adam7]

Hmm.. I would guess it's because it's the only page using the Splash page type. Since you're using a custom theme I'm not sure if it's related to that or something present on the original version of the theme.

[ChrisL89]

Thanks for your reply. It's a standard theme but I just changed the button colours and added the sectionizer. It never used to be like that though. I'll have a look through the code and see it anything has changed compared to before. The thing is it's fine on the desktop, as soon as it goes to mobile it adds the margin...

[ChrisL89 · Accepted solution]

I actually just found the problem. The splash screen had padding to the left and right, while the sectionizer was placing itself of the right had margin but covering right to the left of the page. Before it was:

.splash-page .main-wrap > .container { padding-left: 1.5em; padding-right: 1.5e; }

so I changed it to:

.splash-page .main-wrap > .container { padding-left: 0; padding-right: 0; }

and all is well now!