Make Custom HTML section responsive for mobile

Store Design
1

Hi guys!

I have inserted an image on my homepage via a custom HTML section (Brooklyn Theme).

=> www.fugubrewing.be

It looks pretty nice on Desktop but I do not know how to make it responsive for mobile. At the moment, it is really tiny on my smartphone. I would also like to remove the blank space located between my rich text section and the custom html section.

I’m talking about this section:

Capture d’écran 2022-01-05 à 09.11.01.png
Capture d’écran 2022-01-05 à 09.11.01.png1698×1164 199 KB

Thanks for your help!

2

Are you referring to the image with the two cans? That’s a single image, there’s no way to make it responsive in the way you mean. It’s simply being scaled down to fit the viewport.

If it were two separate images, one per can, you could make it so the images are next to each other on desktop and on mobile it would be two rows with one image each and each image would be larger.

3

Hi Thomas, thanks for your answer. I’ve now created 2 images. It already looks better but they are not on the same level on Desktop. How can I put two different images on the same line with the custom html section ?

4

Try this code for your custom HTML section:

You can adjust the 400px min-width value to see what works best. This determines when the images will wrap onto a second line when there’s not enough room to put them on a single line.

5

@nicolacrx

Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

#shopify-section-164131100895e776b4.shopify-section {
margin-top: 0px !important;
}

Thanks!