How to arrange my side-by-side custom liquid images to be centered?

Hi, I have a custom liq code in the section (as below). What is missing to make the whole side by side images to be placed in the center?

* { box-sizing: border-box; } body { margin: 0; } .image-container { display: flex; width: 100%; } .image { width: 40%; padding: 15px 15px; position: relative; } .image img { width: 100%; height: auto; } @media(max-width: 767px) { .image-container { flex-direction: column; align-items: center; } .image { width: 100%; } }

Hey @Crystalwclee ,

To center the side-by-side images within the container, you need to add a justify-content property to the .image-container class in your CSS. Here’s how you can adjust your CSS:


    

        
![EDM_-_Product_info.png?v=1732945072|944x1188](upload://v8oGgRyg7aILMpAPNsfnIHDk5PT.jpeg)

    

    
        
![EDM_-_Product_info-2.png?v=1732945163|943x1191](upload://c3UDUHq2AbfNzyHSETBbp7pWpoq.jpeg)

    

If I was able to help you, please don’t forget to Like and mark it as the Solution!

If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

HI @Crystalwclee

i hope you doing well, here is the solution:

.image-container {
    justify-content: center;
}

Add this css and you will see result like this :

I hope it will work.

Thanks and regards

@Crystalwclee ,

Thank you! I’m glad to hear that the solution worked well for you. If you ever need any help in the future, feel free to reach out to me anytime.

If you find this information useful, a Like would be greatly appreciated.