Align image in feature product section

Store Design

Topic summary

A user reduced an image size in their Shopify featured product section but encountered alignment issues—the image appears too high and too far left.

Solutions Proposed:

Two community members provided CSS code snippets to fix the alignment:

  • First solution: Add margin adjustments (margin-top: 69px, margin-left: 90px) to the responsive-image class within the specific Shopify section, targeting screens 768px and wider

  • Second solution: Apply width and height constraints (80%) directly to the product-media-object div, with justify-self and align-self properties set to center and baseline

Implementation steps:
Both solutions require accessing the theme’s CSS file (theme.css, base.css, or style.css) through Shopify admin → Online Store → Themes → Edit code, then pasting the provided code at the bottom of the file.

The discussion remains open with no confirmation from the original poster about which solution worked.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hi there

I’ve just reduced the size of my image in below featured product section, however it’s now too high and too much to the left. Can I add anything to below code to align it properly?

.responsive-image {
    max-width: 80%;
    max-height: 80%;
  }
}

website

password: chaos

Screenshot 2024-12-19 at 18.22.32.png
Screenshot 2024-12-19 at 18.22.32.png2840×1226 181 KB

1 Like
2

Hi @INFRA

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media (min-width: 768px) {
    #shopify-section-template--24072017936666__featured-product .responsive-image {
        margin-top: 69px;
        margin-left: 90px;
        max-width: 66%;
        max-height: 66%;
    }
}

Result:

websensepro_0-1734595954699.png
websensepro_0-1734595954699.png1366×545 91.8 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

1 Like
3

Hi @INFRA

Replace your code on this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
div#shopify-section-template--24072017936666__featured-product .product-media-object.max-w-full.relative.product-media-height {
    align-self: baseline;
    justify-self: center;
}

div#shopify-section-template--24072017936666__featured-product .product-media-object.max-w-full.relative.product-media-height {
    width: 80%;
    height: 80%;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!