Image of featured product not centrally aligned on Dawn theme homepage

[SweatFree]

Hi,

My store website is: www.sweatfree.co

On my homepage I just have one featured product. The image on my phone is a little off to the right sode instead of being aligned in the center. But on product page it is perfectly aligned. So I just want the featured product to be as nicely aligned as product page alignment.

Homepage:

Product page:

[Dotsquares]

hi @SweatFree

Thanks for reaching out!

I checked your homepage on mobile, and you’re right—the featured product image is slightly off-center compared to how it’s aligned on the product page. This usually happens due to differences in layout or padding/margin between sections.

To fix this, you can try adding a bit of custom CSS to your theme to center the featured product image. Here’s a quick fix:

.featured-product .media {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

If you’re using Shopify’s theme editor, you can go to Online Store > Themes > Customize > Theme settings > Custom CSS (if available), or edit your CSS file directly (like base.css or theme.css).

[Moeed]

Hey @SweatFree

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 tag

RESULT

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Dan-From-Ryviu]

Hi @SweatFree

You can solve it by adding this code to Custom CSS of your Featured product section in Online store > Themes > Customize

@media (max-width: 749px) {
    .grid--peek.slider .grid__item:first-of-type {
        margin-left: 0;
    }
}

[tapan_sain]

Hello @SweatFree

This issue is caused by the following CSS. If you remove this code from your base.css file, your image will automatically align to the center:
@media (max-width: 749px) {
.grid–peek.slider .grid__item:first-of-type {
margin-left: 1.5rem;
}
}