Why my store product first image is showing very small

Shopify Discussion

Topic summary

Issue: The first product image on a Shopify store appears very small, while subsequent images display correctly. The problem started suddenly, possibly after installing SEO-related apps.

Actions taken:

  • A CSS-based fix was proposed: edit base.css and add a desktop media query (min-width: 600px) to force the main product image to 500x500px. Screenshots and a sample “after” result were provided.
  • Result: The desktop view was corrected using this CSS.

Mobile status:

  • A second CSS snippet was suggested with a mobile media query (max-width: 600px) to set the image to 350x350px.
  • Outcome: The user reports it still does not work on mobile.

Current state:

  • Desktop issue resolved via CSS; mobile sizing issue persists.
  • No confirmed final fix for mobile yet. The thread includes code snippets and screenshots that are central to understanding the attempted solutions. The discussion remains open.
Summarized with AI on December 24. AI used: gpt-5.
1

As you can see my shopify store (ckdmotors.pk) product first image is showing incorrectly remaining images are ok,

Everything was fine then suddenly this happens, maybe due to installing some seo booster apps or idk.

Can someone help me to resolve this issue?

2
  • Here is the solution for you @Sufyank
  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • Then find the base.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
@media only screen and (min-width: 600px) {
.productView-image.fit-unset .productView-img-container img:not(.zoomImg) {
width: 500px !important;
    height: 500px !important;
}
}
  • Here is the result you will achieve:

BSSTekLabs_0-1720970126272.png
BSSTekLabs_0-1720970126272.png1652×890 197 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
3

i have tried, it is working on desktop view but not on the mobile view

4 
@media only screen and (max-width: 600px) {
.productView-image.fit-unset .productView-img-container img:not(.zoomImg) {
   width: 350px !important;
    height: 350px !important;
}
}

you can try add more code

5

Still not working on mobile view