A client site I'm working on has the following problem:
There's a full-width hero image and a few normal sections below. Now on mobile, the page extends over the browser edge which creates an ugly scrollbar on the bottom. I can change .ls-overflow-visible so that it has the overflow: hidden property, which removes the scrollbar and makes the page behave normally. however, now the hero image will have padding on both sides and does not stretch the entire width anymore.
how do I fix this so I keep the fullwidth hero image and not get a horizontal scrollbar on the page?
It seems they have a padding on their right side which is causing the scroll to appear on mobile devices, I checked and I could see it is coming from Custom CSS you have added so you have to edit it or add this new CSS to make it 0:
So it seems I have brought this onto myself? Thank you for Sherlock-Holmesing my own mistake for me. It's corrected and now the page behaves like it should.
A client site I'm working on has the following problem:
There's a full-width hero image and a few normal sections below. Now on mobile, the page extends over the browser edge which creates an ugly scrollbar on the bottom. I can change .ls-overflow-visible so that it has the overflow: hidden property, which removes the scrollbar and makes the page behave normally. however, now the hero image will have padding on both sides and does not stretch the entire width anymore.
how do I fix this so I keep the fullwidth hero image and not get a horizontal scrollbar on the page?
Hi supermint,
Can you please send us your site URL first, so we can investigate your site and then get back to you with possible solution.
P.S. make sure you've disabled the Maintenance/Coming Soon mode
Best regards,
Laborator Team
Yes, sure, it's this website:
tarzan-cf.ch/home
Hi again,
The problem is coming from these icons:
(view large version)
It seems they have a padding on their right side which is causing the scroll to appear on mobile devices, I checked and I could see it is coming from Custom CSS you have added so you have to edit it or add this new CSS to make it 0:
.vc_icon_element.vc_icon_element-outer .vc_icon_element-inner.vc_icon_element-color-black .vc_icon_element-icon { padding-right: 0 !important; }Best regards,
Laborator Team
So it seems I have brought this onto myself? Thank you for Sherlock-Holmesing my own mistake for me. It's corrected and now the page behaves like it should.
Thank you so much, I really appreciate it!
You're welcome, happy to hear it is fixed now and many thanks for your kind words
P.S: If you like our theme, it would help us a lot if you could give us a five-star rating on ThemeForest from your Downloads tab.
A huge thank you from Laborator in advance, have a great weekend!
Best regards,
Laborator Team