[Support request] Page looks weird on mobile

[Renske]

Hi there,

I’ve created a page this morning and it looks weird on mobile (especially the list and the content below). How do I left align the content? See private info for url.

[David]

Hi there,

for the list:

1. Select the list block.
2. in Advanced > Additional CSS Class(es) add; sm-left-margin
3. publish that change

4. in your CSS add:

.sm-left-margin {
    margin-left: 1em;
}

The content below this – do you mean the Form?
If so you will need to overwrite the forms CSS. Try adding this:

.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody {
    padding: 10px 0 !important;
}

[Renske]

Hi David, thanks! This didn’t really work.

I decided to rebuild the page, but it’s been a while and now I can’t get it right.

The images are too small on mobile and I want both images to show on top of the text on mobile.

[Ying]

Hi there,

The Grid Container block which contains the image is set to (or inherits the desktop setting) 50% width on mobile, can you change it to 100%?
https://www.screencast.com/t/CMY0BYb56CzN

And also there’s a lot of padding around the actual Kindle, you can crop the image in media library.

In order to make the image on top of the text, select the container block which contains the image, set its orderto -1 on mobile.

[Author]

Posts