How to reduce size of an image but only desktop view

Topic summary

Issue: Reduce a specific collection image’s size on desktop only (mobile is fine) by about 40–50% on a Shopify store.

Proposed approach:

  • In Shopify admin, go to Online Store → Theme → Edit code → Assets → theme.css and paste a CSS snippet at the bottom.
  • Use a CSS media query for desktop screens (min-width: 768px) to change only the desktop view.

Key CSS details:

  • @media (min-width:768px) targets desktop.
  • Select the specific section ID and apply to .image-wrap img: width: 60% !important; display: block; margin: auto !important; to reduce size and center it.
  • Optionally set the section’s margin-bottom to 0 to adjust spacing.

Artifacts central to the solution:

  • A code snippet is provided and is the core of the fix.
  • Screenshots were included for context (identifying the image and showing where to add code).

Status: A concrete solution was provided; no confirmation yet from the original poster, so outcome remains unconfirmed.

Summarized with AI on February 6. AI used: gpt-5.

Hi,

Please, Can someone help me! I’d need to reduce the size of a picture just on the desktop view (mobile view is fine).

URL https://shokn.com/en-nl/collections/all

I attach a file with a screenshot with the image I’d like to reduce 40-50%

Many thanks

Marc

Hi @LanceAllison

I’m Richard Nguyen from PageFly- Free Landing Page Builder

-Go to Online Store->Theme->Edit code

-Asset-> theme.css paste the below code at the bottom of the file.

@media (min-width:768px){

#shopify-section-template–15967078121661__80e857ab-0137-4e2a-9fb7-55f5d4be5749 >.index-section{

margin-bottom:0 !important

}

#shopify-section-template–15967078121661__80e857ab-0137-4e2a-9fb7-55f5d4be5749 .image-wrap img{

width: 60% !important;

display: block;

margin: auto !important

}

}

Hope my solution works perfectly for you!

Best Regards;

Richard | PageFly