horizonimaging

Ah the horizontal scrolling is now gone again after adding this bit of code to add some additional padding on the left and right of the main body of my site for tablet browsers only:

@media (min-width: 740px) and (max-width: 1240px) {
.ast-page-builder-template .site-content > .ast-container {
padding: 0px 20px 0px 20px;
}}

This is an aesthetic tweak that I’ve been meaning to make for a while, and conveniently (and unexpectedly) it also solved the horizontal scrolling issue too!

That was a relief! ??

David

• This reply was modified 1 year, 6 months ago by horizonimaging.

Thanks for your feedback, I’ll ask via those platforms ??????

Will do, thanks Lisa!

Ok it seems the only reason the text is indented on the second line at all is that the toggle icon on the left has some invisible space under it that blocks the text from wrapping back to the start of the line.

Adding more padding under the toggle icon fixes the 3rd line indent problem, but then makes all the other toggle elements indent further and further into the page! See here:

https://www.horizonimagingportal.co.uk/misc/wordpress_toggle_indent_problem_2.jpeg

So we just need some code that affects only the current toggle title and not anything else underneath it …

Thanks!

David

Oh no … it appears the horizontal scrolling problem is back again, but strangely only on browsers large than a mobile in portrait mode – on a mobile in portrait mode there is no horizontal scrolling or double vertical scrollbars.

This would imply that just increasing the max-width value to a higher value such as 1200px (the maximum width of the bulk of the site) would fix the problem, but then the vertical scrollbars come back ??

Do you have any other ideas I can try? I don’t know what changes I’ve made to the site that would have broken it sadly ??

You can see the problem on the live site if you view it on a phone in landscape mode or on a tablet:

https://www.horizonimaging.co.uk

Many thanks,

David

I do believe it’s fixed! Thanks so much again for your help! ????

David

Sure, will do! I’ll take a closer look to make sure it’s definitely fixed when I’m back in the office next week.

I’m not a coder, but if I’ve learned anything from modifying and tweaking this website (which a company built for me), it’s that sometimes one fix breaks something else, which you may not immediately notice! ??

Thanks again!

David ??

Oh wow!! ?? I do believe that’s solved the problem! ??

I will continue to have a poke around to make sure neither problem occur on either my laptop or iOS devices but it’s looking hopeful.

Thank you so much!!

David

Hi jidwictut9,

Thanks again for your quick reply ??

So are you saying I need to implement the ‘overflow-x: hidden’ code differently? Are you able to write out how the code should look for me?

Many thanks again! ??

David

Hi jidwictut9,

Many thanks for your reply.

Ah that’s interesting …

So if I remove the ‘overflow-y: visible’ code then you’re right, nothing actually changes – the double scrollbar still doesn’t appear, although the horizontal scrolling is still there.

But if I then add:

overflow-x: hidden;

Then the double vertical scrollbar appears … but then the horizontal scrolling problem disappears! …

I’ve now just left the ‘overflow-x: hidden’ code active on this staging site so you can see the problem:

https://horizonimaging.flywheelstaging.com/

At my end I now have double vertical scrollbars, but no horizontal scrolling on iOS.

Thanks for your help!

David

• This reply was modified 1 year, 8 months ago by horizonimaging.