Slight issue around responsive website on mobile phone view

[robmarsh3]

Hello Support

I have created a site https://capitolsquash.co.uk with WWB 19 using Layout Grids

The site displays as it should on PC / Laptop and shrinks down OK on a mobile device
I have used Content cards in some areas of the index page and whilst these display
fine on the mobile device when it is held in the normal portrait position, they
tend to squash up out of proportion if the device is rotated into landscape.

Can you please advise

Thankyou

[Pablo]

First note that support for version 19 has ended. If you want continued support then please consider upgrading to the latest version.

I cannot see your settings based on the published HTML only. To be able to help you I need a DEMO project (not the full project).
Also, it not clear for me what you mean by 'they tend to squash up out of proportion '
What exactly do you see? Where do I need to look?

For further details about how to share a DEMO project file, please see this FAQ:
https://forum.wysiwygwebbuilder.com/vie ... 10&t=82134

[alan_sh]

I can see what you mean - it's the "step1", "step2" etc. cards, isn't it.

But as Pablo says, without knowing how you've set it all up, it's impossible to say what is wrong.

So, create a dummy site with just those 4 cards in, test it yourself to check it doesn't work and then post a link to the WBS file so we can reproduce it. You won't need to publish it as a web site - if your 'preview' fails, then that's enough to know the issue is inside the WBS file somewhere.

Alan

[robmarsh3]

Thanks for the responses guys I will do

[crispy68]

Are you using breakpoints on your page? I don't really see any.

It appears to me that you have the grid set to 480px and that is all you are using. So the row stays horizontal until 480px is reached and then flips to a column. When you flip your phone to landscape, the width is bigger than 480px (typically on most phones) so it will show the horizontal layout which is squishing your cards to fit.

You will need to either set the breakpoint of the grid higher or you will need to add page breakpoints to better control the layout.