How to add padding/space between these two images for image banner:
Topic summary
Goal: Add space between two images in a Shopify image banner without affecting the right edge and without showing a grey background.
What was tried:
- CSS added in base.css: img.banner__media-image-half { padding-right: 10–15px; } This created a gap but also added space on the right side and revealed a grey container background.
- Another CSS tweak: img.banner__media-image-half { background: white; } This did not fix the grey container and affected the corner of the second image.
- A suggestion to paste code in theme.liquid before was given, but no concrete code snippet was provided.
Current issues:
- Need spacing only between the two images (center gap), not on the outer right side.
- Grey container background appears behind the banner; user wants it transparent or matching the page’s white background.
Status:
- No working final solution posted yet. Likely requires targeting only the inner edge (e.g., margin on the left image or using a gap between columns) and adjusting the banner/container background color.
Notes:
- Screenshots are important to visualize the grey background and spacing effect.
Hey @Likha
Kindly share your Store URL and password if enabled
hi @Moeed here: https://thelikhastudio.com/
Hallo [email removed]
You can add code by following these steps to change
- Go to Online Store → Theme → Edit code > assets > base.css
paste below code at bottom(base.css)
**img.banner__media-image-half {**
**padding-right: 10px;**
**}**
If you require any further information, feel free to contact me.
Best regards,
Hey @Likha
You can add code by following these steps to change
- Go to Online Store → Theme → Edit code > assets > base.css
paste below code at bottom(base.css)
img.banner__media-image-half {
padding-right: 15px;
}
You can adjust the padding according to the space you want between the images
I would like to give you a solution to support you.
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid theme file.
-
Paste the below code before :
Hope my solution can work and support you!
Kind & Best regards!
GemPages Support Team.
1 Like
Hi @Moeed
It works but it leaves a grey container background instead of white background and the right side of the image has padding as well. Is it possible to put the padding only in the middle and doesn’t affect the right side?
Thanks for the help!
Still shows the grey container background. It also affect the corner of the second image. Please see photo attached:
It should lo
It also shows a grey container background. How to make it transparent or adapt to the white background of the page?
Thanks.