I have been getting a lot of emails from Google re Mobile Usability - Content wider than screen error. Are you aware of this? Is there a fix I can add to the custom css to fix these? If you decrease the width of the browser you can see that it needs to horizontally scroll. Not a lot but enough to upset Google unfortunately.
Thanks heaps for that. Will this work will all other sites that I'm having the same issue? Eg. I have been going through all the sites that use Kalium and on this one https://profunding.com.au/ the scroll is still there when I apply the css.
Yes that would happen across all pages you have used the column gap of 35, so this CSS will simply force to return back to its container width when browsing on smaller viewports. On the site you have mentioned in the last ticket, this CSS would work:
Hi guys,
I have been getting a lot of emails from Google re Mobile Usability - Content wider than screen error. Are you aware of this? Is there a fix I can add to the custom css to fix these? If you decrease the width of the browser you can see that it needs to horizontally scroll. Not a lot but enough to upset Google unfortunately.
Cheers,
Jake
Hi Jake,
I have inspected your site and saw that a class from WPBakery page builder is causing this issue, so this quickfix would fix the issue:
@media screen and (max-width: 768px) {.vc_row.vc_column-gap-35 {
margin-left: -15px;
margin-right: -15px;
}
}
Please add this custom css and you won't see the horizontal scroll in mobile viewport again.
Hi Arlind,
Thanks heaps for that. Will this work will all other sites that I'm having the same issue? Eg. I have been going through all the sites that use Kalium and on this one https://profunding.com.au/ the scroll is still there when I apply the css.
Thanks again for your help!
Jake
Hi Jake,
Yes that would happen across all pages you have used the column gap of 35, so this CSS will simply force to return back to its container width when browsing on smaller viewports. On the site you have mentioned in the last ticket, this CSS would work:
@media screen and (max-width: 768px) {.vc_row.vc_column-gap-30 {
margin-left: -15px;
margin-right: -15px;
}
}
Because of the nature of this issue is related to column gap. I hope WPBakery team can fix this soon.