Hello,
I’m looking to put a small margin between 2 pictures as well as the sides in the image banner section. Is there any way I would be able to do this?
This is what it looks like right now:
This is what I am trying to achieve:
URL: https://www.yivan.us
PASS: YV2024
Hi Yivan, i tried to check your website here using the link and password, that you added, but the image i didn’t found.
Answer:- Add display: flex; padding: 0 10px; gap: 20px; on the parents elements, or if you are still not able to do it, You can connect with me on mail.
Sorry, I’ve just uploaded the pictures onto the website. I am also not well versed in coding so I don’t quite understand the solution you just gave me. Would you possibly be able to take another look at it? Thank you very much.
Hi @YIVAN
check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
#Banner-template--22644563673372__image_banner_zHVXa7 > div:nth-child(1) img {
padding-right: 20px;
background: white;
}
And Save.
Result:
Thank you, that worked for me. But is there also a way to add the same margin to both sides of the pictures?
Thank you for the help. Is there a code I could paste somewhere? I couldn’t find where to insert those values. -
it seems like you add some code that i give. Please, replace the code on this one.
#Banner-template--22644563673372__image_banner_zHVXa7 > div:nth-child(1) img {
padding-right: 20px;
background: white;
}
div#Banner-template--22644563673372__image_banner_zHVXa7 {
margin: 0 16px;
}
And Save.
I only call the 1st picture on that code. cause they have same selector with the right picture. As you see the space you add get double on the middle.
Result:
