Solved

How To Insert Space Between Two Images? (Dawn)

milkandcookies
Excursionist
390 0 46

Hi,

How can I add space between these two images in custom liquid:

milkandcookies_1-1707205178287.png

This is my liquid code for this section

<div style="width: 100%; display: flex; justify-content: center;">
 
<div> <img src="{{ 'birthday.jpg' | file_img_url:'250x250'}}"></div>
  
<div> <img src="{{ 'colorful.jpg' | 
    file_img_url:'250x250'}}">
</div>

 

https://d10cbe-2.myshopify.com/products/signature-25-pack-pop-box

thanks in advance!

 

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
6971 1319 1342

This is an accepted solution.

HI @milkandcookies 

Please update code to this. 

<div style="width: 100%; display: flex; justify-content: center; column-gap: 20px;">
<img src="{{ 'birthday.jpg' | file_img_url:'250x250'}}">
<img src="{{ 'colorful.jpg' | file_img_url:'250x250'}}">
</div>

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 2 (2)

Dan-From-Ryviu
Shopify Partner
6971 1319 1342

This is an accepted solution.

HI @milkandcookies 

Please update code to this. 

<div style="width: 100%; display: flex; justify-content: center; column-gap: 20px;">
<img src="{{ 'birthday.jpg' | file_img_url:'250x250'}}">
<img src="{{ 'colorful.jpg' | file_img_url:'250x250'}}">
</div>

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

Moeed
Shopify Partner
3542 892 1107

Hey @milkandcookies 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.section-template--16350539251893__custom_liquid_8VjdiT-padding div {
    column-gap: 50px !important;
}
</style>

RESULT:

Moeed_0-1707206155536.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Canva to Shopify in clicks - Free App