Center image

Store Design
,

Topic summary

A user needs help centering an image on their Shopify store’s desktop view to match how it appears on mobile. The image currently aligns left on desktop.

Initial Challenge:

Solutions Provided:
Three community members offered CSS fixes, all involving editing the base.css file in the theme’s assets folder:

  • Manoj_j’s solution (provided twice): Uses flexbox to center the image-with-text grid and media elements
  • DaisyVo’s solution: Hides text items and centers the grid with a 50% max-width constraint
  • ZestardTech’s solution: Hides text items and sets image width to 70% on desktop, 100% on mobile

User Follow-up:
The original poster asked if the CSS changes could be applied only to this specific page without affecting other parts of the website. Manoj_j confirmed the changes would only affect this particular component and not impact other sections.

Status: Multiple solutions provided; awaiting user confirmation on which approach was implemented.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
14

Hello @GadVenin ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
.image-with-text__text-item.grid__item {
    display: none !important;
}
.image-with-text__media.image-with-text__media--adapt.gradient.color-background-1.global-media-settings.media img {
    height: unset !important;
    width: 70% !important;
    text-align: center !important;
    display: flex;
    justify-self: anchor-center !important;
}
@media screen and (max-width:768px){
.image-with-text__media.image-with-text__media--adapt.gradient.color-background-1.global-media-settings.media img {
        width: 100% !important;
}
}

ZestardTech_0-1743587392189.png
ZestardTech_0-1743587392189.png1837×903 52.7 KB

Let me know if you need further assistance!

1 Like