[Support request] Page too wide on mobile with extra space to the right.

[Brenan]

https://wordpress.com/block-editor/page/rockymountaingranite372762171.wpcomstaging.com/5?authWpAdmin=true

http://www.RockyMountainGranite.ca

There is too much white space on the right of the page. I wouldn’t like for there to be a scroll bar at the bottom and I can’t seem to figure it out.

[Elvin]

Hi Brenan,

The “What Kind of Stone is Right For You?” text block on your site is causing the issue on mobile.

Here’s a video of what causes it. https://share.getcloudapp.com/E0ur68Ov

This width:95% property being cascaded to mobile viewport is causing the issue. Setting it to “auto” on mobile can fix this.

[Brenan]

Hey, sorry for the late reply, thanks for the video! I’m a bit new to wordpress and I just seem to have trouble finding the “auto” option haha. Thanks!

[Tom]

Hi there,

Not too sure why that section has a fixed width like that, but adding this CSS to your site should help:

.wp-block-media-text.is-style-card .wp-block-media-text__content {
    box-sizing: border-box;
}

[Brenan]

Hey, so I’ve implemented that additional CSS, but it still shows the width slider on mobile

[David]

Hi there,

are you using the CoBlocks plugin ? Can you try temporarily disabling that

[Brenan]

Hey, I disabled the plug in, and the width slider was still there and it also messed with the hero block on the website so I don’t think I can take that route :/.

[Brenan]

Nevermind, I used my god tier abilities to effectively eliminate that issue. Couldn’t have done the mobile part without you though haha! Thanks!

[David]

🙂 – what was the issue ?

[Brenan]

I just played around with padding and margins and found some containers that were messing it up

[David]

Glad to hear that

[Author]

Posts