How can I adjust image width for mobile view in a multicolumn section?

Store Design
1

Hi everyone,

I’d like to set the width of the first row image so it fill the screen width in Mobile view.

Please check my url: https://189ee3-2.myshopify.com/

Thank you,

Untitled.png
Untitled.png1241×2107 319 KB

2

Hello @collins276

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 749px){ .multicolumn-list:not(.slider) { padding-left: unset !important; padding-right: unset !important; } }

techlyser_web_0-1708970627248.png
techlyser_web_0-1708970627248.png222×246 65.1 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

3

Thank you, but can I only set the first row?

4

@collins276

The image will be full width only if we remove the padding completely, otherwise it will not happen. I also used the first child property but the padding was not remove.

5

Thank you! I unset the section then set the padding for child 2 & 3 and it works.