Desktop and mobile design

[bakrona]

Hi there

I want to create a page where the 2nd column is reduced in width on desktop but not on mobile. For some reason i dont manage to create the result. see attached image

Furthermore, the H1 headline does not scale down on mobile to fit the screen

[ruenel]

Hello @bakrona,

Thanks for writing in! Please edit your page and use the new Image element. You will have more element control compared to the classic image.

Please see the image in the secure note.

Kindly let us know how it goes.

[bakrona]

Hey, thank you for this. making slow progress but still not the result i want

1. How can i have margin 1 and 2 same?
2. how can i center the picture in the column so its center aligned with the grey area?

[marc_a]

Hi Bak,

In order to have the same margin for numbers 1 and 2 in your screenshot, you need to adjust your container site width to 100%. To do that, go to X > Theme Options > Layout and Design then set the site width to 100%.

2.) Since you set a max-width of 350px in your to image you need to have margin-top and bottom set to 0 and margin-left and right to auto to make the image center.

Hope that helps.

Thank you.