Mobile landscape view creates big white gaps.

Hi,

I made a website (ypat.be) and it looks fine on desktop and mobile. But when I rotate my phone for landscape mode, I get a huge white gap, I'm guessing padding (which I can't find using inspect element). In the website editor you can't access landscape mode, and with custom css I also can't get it to work. I included a screenshot from portrait mode, and a screen recording from landscape mode below.

Anyone had the same problem or knows how to fix this?

Hi,

Which page are you referring to? We can use CSS to target Mobile Landscape mode to reduce this gap

On 1/26/2023 at 1:48 AM, tuanphan said:

Hi,

Which page are you referring to? We can use CSS to target Mobile Landscape mode to reduce this gap

It's a one-pager.

16 hours ago, YannickPhilippaerts said:

It's a one-pager.

Hi,

It looks fine to me

7 hours ago, tuanphan said:

Hi,

It looks fine to me

Yes it works when using inspect element, but on an actual phone it creates gaps. So I think it would be very hard to solve because you can't even see the problem on a computer.

@tuanphan I have the same issue! Was just testing portrait and landscape orientations and saw it too. Here are my website screenshots from my phone for reference.

@tuanphan any chance we could get code minimizing the spacing in landscape. I know that will be tough with the fluid grid layout they have but that might be the only option? You sent me this for a previous problem and it worked for my header text acting weird.

@media screen and (max-width:767px) and (orientation:landscape)... Lmk your thoughts and thank you! 🙏

On 3/17/2023 at 3:42 AM, acjr_noob said:

@tuanphan any chance we could get code minimizing the spacing in landscape. I know that will be tough with the fluid grid layout they have but that might be the only option? You sent me this for a previous problem and it worked for my header text acting weird.

@media screen and (max-width:767px) and (orientation:landscape)... Lmk your thoughts and thank you! 🙏

You try this guide first, if it doesn't work, we will give another code

@tuanphan hey i tried following but I still end up spacing issues on mobile afterwards. I had to go back in and fix everything to be lined up properly. Its like he said in his tutorial, when you go in to "edit", it snaps everything back in place the way Squarespace has it. Also something i realized is you gave me code to help with my headline to not split the text won't scale to the correct sizing in tablet. Thank you in advance for helping correct Squarespace's oversights 🙏

Here is the website: https://www.acjr.network/

@tuanphan is there anything we can do regarding this? Like can we target that 749px breakpoint to force it to show correct spacing and adjust those headlines?

On 3/29/2023 at 11:26 PM, acjr_noob said:

@tuanphan is there anything we can do regarding this? Like can we target that 749px breakpoint to force it to show correct spacing and adjust those headlines?

Just had some days off. Do you still need help?

@tuanphan yes please (and good for you!)

@tuanphan I have this problem too and would love a workaround.