Hi @kibitzz,
Thank you for contacting us.
I checked out your site using my mobile phone and was unable to see that the popup was causing the site to move side to side. So I used Chrome Developer Tools Mobile mode and I could see there is an element that is stretching the regular width causing this “side to side” effect. The element in question is the top navigation bar. It shows the width is going over the device width. You can check the top bar as shown here:
https://snipboard.io/N6Xm85.jpg
Best,
Jonathan S
Thank you for figuring that out for me! Do you know of any CSS i could use to make it only take up 100% width?
Hi @kibitzz
It seems that this header element itself is actually set to be exactly 100% wide but another element inside it is “pushing” it.
I’d try adding something like this to the site then:
@media (max-width:768px) {
.navbar-custom .header-container {
max-width:90%;
}
}
Best regards,
Adam
Hey Adam!
That seems to have improved the side to side drifting a lot! There is still a little bit on mobile Chrome browser but not on safari unless I pull directly to the left or right. It only has seems to have extra padding on the right side of the viewport now. The theme support said that this bit of code specifically was the issue: https://ibb.co/7RnP5zR
Not sure if that assists in finding the issue exactly, but thank you very much for the help so far!
Hi @kibitzz
Hm… I admit I’m confused a bit now. I just checked the site again, using Chrome with same “Moto G4” set as on your screenshot and I can’t see anything like that. Site seems to look really fine on my end. I also tried “responsive” setting instead of specific device – to be able to dynamically resize viewport – and it also scaled nicely.
I suppose I might be missing something though. Could you check on your end again but make sure to use either incognito mode or clear all caches in browser before testing?
If you can still see the issue, could you perhaps share a short video/screen recording showing how it behaves for you?
Best regards,
Adam
Hey! I recorded a quick video so you can see what I mean. Very strange how it only happens in Chrome though. The extra padding still exists in Safari but the viewport always bounces back so you can never see it unless you really try to.
https://photos.app.goo.gl/amnj9AW4S1VrR8nW8
Thanks!
Hi @kibitzz
I took a closer look and it seems the issue is from a Product section.
https://monosnap.com/file/DT2wF7Cgbvf5Itbmo395sHn2Vo8529
As soon I remove this part using the browser console the problem is gone.
Can you please try to add the CSS on WordPress > Appearance > Additional CSS?
@media (max-width:768px) {
.home ul.products.columns-4{
margin: 0 !important;
}
}
And check if the issue is gone?
In case it persists, I suggest re-check any custom CSS or builder setting that was added on that section.
Best Regards
Patrick Freitas
That worked perfectly, thank you for the help!
Thank you, @kibitzz for your confirmation.
We’re going to mark this one as resolved but should you need further help, feel free to start a new support topic.
Regards,
Jorge