Center Blog Image

Store Design
, ,
1

Hi, I am trying to decrease the size of the featured blog image but it only works if its not centered anymore.

How can I center it? On mobile version it should also work.

2

Hi there :waving_hand:,

I can definitely help you fix that! It sounds like the featured blog image size and alignment just need a quick adjustment in your theme code or settings so it stays centered properly both on desktop and mobile.

If you’d like, I can help you fix it up directly. Just DM me, and I’ll guide you through or handle it for you. :blush:

3

@Sunkar Good question, this is a common Shopify theme issue, especially with blog sections that auto-stretch or break centering when you resize the image manually.

Here’s how you can reduce the image size and keep it perfectly centered on both desktop and mobile.

CSS Fix

Add this code to your base.css or theme.css file:

/* Featured blog image resize + center */
.featured-blog img {
  display: block;
  max-width: 80%; /* adjust this number to control size (e.g., 70%, 90%) */
  height: auto;
  margin: 0 auto; /* centers horizontally */
}

/* Mobile adjustment */
@media (max-width: 768px) {
  .featured-blog img {
    max-width: 100%; /* full width on mobile */
  }
}

Explanation

  • display: block; ensures the image behaves like a block element so margin: 0 auto; works to center it.

  • max-width: 80%; controls how small or large the image appears on desktop.

  • height: auto; keeps proportions intact.

  • The media query resets it to full width on smaller screens.

If your theme uses a different class for that section (for example .article__image, .blog__image-wrapper, or .card__media), you can inspect it in your browser (right-click → Inspect) and replace .featured-blog img with the exact selector.

4

Hello @Sunkar

You can add css in base.css as like img{ object-fit: cover; } if you are add this and see the result.

5

Hi @Sunkar

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

7

Hello @Sunkar ,

I hope you are well!

Can you please share the store URL? It will be helpful for us to provide you the CSS with media query so that the blog image will be center on mobile version only.

8

Hello @Sunkar

Regarding your requirement—if you’re using the Dawn theme (a common Shopify theme), you can add the following code:

Path:
Online Store → Themes → Edit code → assets/base.css (or theme.css) → paste the code at the end → Save.

/* Blog card images */
.blog .card__media img {
display: block;
width: 80%;
margin: 0 auto;
}

/* Article header hero image */
.article-template__hero img {
display: block;
width: 80%;
margin: 0 auto;
}

@media (max-width: 768px) {
.blog .card__media img,
.article-template__hero img {
width: 100%;
}
}

This should help center and resize the featured blog image properly across all devices.

Thank you.