How to add space between photos on mobile version?

Store Design
1

It looks perfect on the desktop version, unfortunately on the mobile version it looks very cramped.

What would be the code to add white space between these pictures? I only want to edit the mobile version, I want the desktop version to stay intact.

Kind regards,

IMG_784B2EE3861A-1.jpeg
IMG_784B2EE3861A-1.jpeg1284×2778 251 KB

1 Like
2

Hello There,

Please share your store URL and Password.
So that I will check and let you know the exact solution here.

3

Thank you!

1 Like
4

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
.banner__media.media.banner__media-half{
margin-bottom: 20px;
}
5

Thank you it worked greatly! I have another question. The text ‘increased bioavailability…’ is too close to the bottom. Its because the images are cut at the bottom on mobile phone. How do I change this? Its perfectly fine on desktop.

Kind regards,

[cid:65542C38-4C23-4EE1-BC33-3679010D91C6-L0-001]