When I access my website via cell phone/mobile, the homepage allows users to scroll from side to side, as well as up and down. I have tested it on multiple iPhone screen sizes and the side to side scrolling persists, is there any way to stop this from happening?
My domain is https://brooksysociety.com
Side note: I deactivated and uninstalled the tagDiv Mobile Theme and Official AMP for WP Plugins. The tagDiv Mobile Theme plugin renders my mobile homepage little more than a column of blog posts. It looks cheap, tacky, and utterly uninteresting.
It seems like there is no middle ground for the homepage display, either users will be inconvenienced by side-to-side scrolling or encounter an uninteresting design.
Is there a way to get the best of both worlds: for my homepage to look the same on mobile as it does on desktop, without bugs like the side to side scrolling?
Thank you for the help in advance!
Hi,
It looks that the there is an element on the homepage that is wither than 714px and that t is way is this problem on the homepage.
What I recommend is this custom css:
.home .tdi_11 .td_block_inner {
margin-left: 0px;
margin-right: 0px;
}
Please set the code in the theme panel > custom code> custom css.
Thank you!
Hi Calin,
Thank you so much for your help, I input the code you sent and the problem was fixed. I’m wondering if you might know which element on the homepage is over 714px? Is there a way for me to see or fix this sizing issue on my end?
I noticed that when I added more elements (spaces and Block 2) to the homepage, the side to side scrolling on mobile returned. I removed the spaces and extra block and the problem was once again fixed.
I love your theme and would like to be able to use it for the foreseeable future, but also need to know if it can display optimally on mobile.
Hi,
Usually these problems appear when is set a margin on elements, what it can be done is to set a padding, the margin is set around the elements and it’s width is added to the element width – https://i.imgur.com/7ZmiBV4.jpg, but the padding is added inside the element keeping the element width (oar an alternative is to reduce the width set in margins and borders in the width section – https://i.imgur.com/m4ECXrT.jpg).
Thank you!
