Page width

[celorane]

Hello,
Please, can you help me ? Maybe you will have a solution to my problem…
I work on this website : http://myriade-formation.fr/
I have a little bug on navigator Google Chrome : when I scroll from left to right, the content of the page is moving, there is something wrong maybe with the content which is lightly larger than the page, of something like that
The problem doesn’t appear on Firefox and I don’t think so on Safari, but it appears also on mobile
I tried to fix it with css but I couldn’t find the line to change…
Can you help me please ?
Thank you for your support.
Have a nice day

[Veena]

I don’t find any issue. Is this issue resolved ?

[celorane]

Hello,
No, it’s not…
You can easily see it on mobile, when you scroll from left to right (and the inverse) the elements of the page is moving…
There are maybe 20px who are too much on the page on something like that 🙁

[Veena]

Actually this is happening in our demo site too, we will take a look and get back to you on this.

[celorane]

Thank you for your reply
Ok, I didn’t notice that before I bought the theme…
No problem, thank you very much, I will waiting for your answer so 🙂
Have a nice day

[Veena]

Pls try the below custom CSS in themeoptions –

@media only screen and (max-width: 768px){
.vc_row {
    margin: 0 auto !important;
}}

[celorane]

Hello,
Thank you for your reply !
It’s perfect, it works on mobile !

But, the problem is always not resolved on Google Chrome
I am on a MacBook, and when I scroll with the Trackpad from left to right, and it appears when you scroll from the top to the bottom, because you naturally don’t scroll strictly right, there is always this content moving from left to right and the inverse, and maybe, for a lot of people who have a tablet or a laptop with Safari, they have this problem too

If it can help you, I notice It happens on my website on the pages with the model “Full Width” but not on the page with the model “Blog” or “Model by default” for exemple
I also notice it not appears when I choose the “Full width” model, but only after I add a first row

I hope you will can fix this because I have looking for and I couldn’t…

Thank you, have a nice evening

[celorane]

Sorry, I would say “Google Chrome” and not Safari, the problem doesn’t appear on Firefox and Safari..

[Raghavendra]

This is an old issue with Bootstrap framework being used by VC. You won’t see this issue with a page not using VC in my experience. To fix this, can you pls try this Custom CSS and tell me if that meets all your needs? If everything looks perfect, we will integrate this into the theme itself for next update so that everyone is benefited. Pls do update us on this –

.page-template-template-full-width .vc_row { margin-left: 0; margin-right: 0;}

.page-template-template-full-width .vc_row .inner { padding-left: 0; padding-right: 0;}
body { overflow-x: auto; }

.page-template-template-full-width .vc_row .inner { max-width: 1140px; }

body { overflow-x: auto; }

[celorane]

It’s perfeeeeeeeeeeect ! ! !

You are an amazing support ! Thank you very much for fixing this little but annoying bug 🙂

I am sure some other people will have the benefit of it

Have a very nice day and thank you for your amazing work !

[Raghavendra]

Great to hear that works well. Will have this integrated into the build for the next theme update. Thanks for helping us with resolving this.

[Author]

Posts