How can I center the featured product picture on my webpage?

[Danish_Azhar]

This is the original, where the picture is really big

This is after I change the width to 60% under section-featured-produc.css:

.featured-product .product__media-list {
width: 60%;
margin: 0;
padding-bottom: 0;
}

But now the picture and details on the right is not centered, there’s a gap. How do I make it centered?

[GemPages]

Hello @Danish_Azhar ,

It’s the GemPages Support Team and we are glad to assist you today!

Could you please share your store URL ( with the password if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

[Danish_Azhar]

sure www.casedropp.com

[GemPages]

Hi @Danish_Azhar ,

You could please try using the below code

.featured-product .product__media-list {
width: 60%;
margin: 0 auto;
padding-bottom: 0;
}

Let us know how it works for you.

Best regards,
GemPages Support Team

[Danish_Azhar]

it worked, but is there any way for me to make it closer?

[PageFly-Victor]

Hi @Danish_Azhar

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

Hope this answer helps.

Best regards,

Victor | PageFly