How can I decrease image padding on my mobile website?

Technical Q&A
1

Hi,

My website is: https://aysiya.com/. I am looking to reduce the padding on my mobile site between the two images below. I would like to reduce it to around 10px.

How would I go about this?

Aysiya_0-1655061085552.png
Aysiya_0-1655061085552.png471×842 149 KB

Advanced thanks,

Lauren

2

@Aysiya , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.css and paste this at the bottom of the file:
@media (max-width: 749px){
    .template-index .main-content > *:nth-child(4){
    margin-bottom: -40px;
}
}

You can change the -40px value to any value, either positive or negative.

If it helps you please click on the “like” button and mark this answer as a solution!

Thank you.

Kind regards,
Diego

3

Thanks so much for your quick response! Unfortunately, this doesn’t seem to have solved the problem. I have followed your instructions but the space is still heavy around each image.

Aysiya_0-1655063471895.png
Aysiya_0-1655063471895.png523×110 4.58 KB

4

@Aysiya

In this case, using a positive margin will increase the spacing. You should use a negative margin, something like -40px would give the illusion for 10px that you need.

Kind regards,
Diego

5

I tried -40 to begin with, but it still didn’t budge

6

My mistake! It has worked at -60 px

Thanks a million

7

I’m trying to break down your solution so I can shift some of the other images up. If you don’t mind me asking, what is:

*:nth-child(4)

If I was to try and reduce the padding between the other containers, what would I replace *:nth-child(4) with?

8

Hi @diego_ezfy

I’m trying to break down your solution so I can shift some of the other images up. If you don’t mind me asking, what is:

*:nth-child(4)

If I was to try and reduce the padding between the other containers, what would I replace *:nth-child(4) with?