Docs

[Arthur W]

Hi

I’ve just noticed an odd problem with my site. I have a top header section and a bottom footer section. These stay full-width. However if I scroll down quickly I get a blank area to the left of the middle section. I corrected this on one page – where I first noticed it – by adding width: 100vw into the css of the page.

I then saw it was a general problem. I’ve tried doing a site-wide CSS as follows:

/* ensure site stays full width */
.site .x-container.width {
width: 100vw;
}

However this does not work. What should I be doing.

I’ve taken a screen print to show what happens (test1.png) – the page tested is http://newsite.marketing-intelligence.co.uk/services/research/ – but it happens elsewhere too.

[Darshana]

Hi there,

Thanks for writing in! I could not reproduce this issue on my end. Here’s what I see (https://snag.gy/YOnvsM.jpg). Could you please try clearing your site before testing your site again and see.

Let us know.
Thanks!

[Arthur W]

Hi

I just add a re-look – using Private Browsing and also clearing the cache and it still occurs. So I checked it on both Safari and Chrome and all is OK. It seems to be Browser Specific – I’m using Opera Developer.

In the front page at http://newsite.marketing-intelligence.co.uk I’d put the following in the section style box.

max_height: 100vh; height: 83.5vh; width: 100vw; overflow: auto;

I wondered if the issue was the lack of the width: 100vw CSS code. So I’ve just tested it with http://newsite.marketing-intelligence.co.uk/services/research/ and added in the width: 100vw statement. This works fine whereas the sister page at http://newsite.marketing-intelligence.co.uk/services/training/ still has the problem.

That means I could go through every page on the site and add in width: 100vw into the section style. What I don’t know is how to do a global change for all pages. I tried and failed with:

.site {width: 100vw;
}

What CSS should I add to the customiser so that all sections are 100% of the screen width. Hopefully that would fix it.

With thanks
Arthur

[Friech]

Hi Arthur,

You can apply your css rule generally to all section by adding this on your custom css

body .x-section {
    height: 78vh;
    width: 100vw;
}

I could not replicate the issue on my end though, would you mind to clarify to us what you’re trying to achieve?

Thanks.

[Arthur W]

Thanks – that’s solved it.

On Opera Developer (with the VPN option switched on – not sure if it’s on regular Opera) I found the odd right scroll with the empty space for the section. It didn’t happen elsewhere and so I wanted to make sure that it didn’t happen as I can’t control what browsers people use.

All seems OK now.

[Friech]

Glad we could help, Cheers!

[Author]

Posts