Decrease image size

Store Design
, ,

Topic summary

Issue: An image displays at the correct size on mobile but appears too large on desktop.

Solutions Proposed:

Multiple CSS-based approaches were offered using media queries to target desktop screens:

  • rajweb suggests adding CSS to the .media img class with a @media (min-width: 1024px) query to set max-width: 50% (or desired percentage) for desktop only

  • steve_michael2 provides code targeting mobile with @media(max-width:769px) to adjust .collage-card .media height and object-fit properties

  • Bundler-Manuel offers a tablet-specific solution using @media (max-width: 991px) and (min-width: 768px) for collection list items

  • LizHoang recommends adding inline styles to the theme.liquid file with page-specific targeting and a @media (min-width: 1024px) query setting max-width: 800px

Implementation: All solutions require accessing Online Store → Themes → Edit code and adding CSS to theme files (typically theme.css or base.css).

Status: Discussion remains open; no confirmation yet on which solution was implemented or successful.

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

How to make my image smaller on desktop. The size is perfect on mobile, but it’s too large on desktop.

https://pixietrixieplayhouse.com/pages/whats-new

2

Hey @pixietrixie ,

To adjust the size of the image on desktop without affecting the mobile view, you can use CSS media queries. This approach ensures that the image size is tailored to specific screen sizes. Here’s how you can do it:

Steps:

  1. Locate the image container class or ID. In your case, the container class appears to be media.

  2. Add a CSS rule for desktop. Use a media query to target larger screens and adjust the image size accordingly.

/* Default styling for all screen sizes */
.media img {
  max-width: 100%;
  height: auto;
}

/* Adjust image size for desktop */
@media (min-width: 1024px) {
  .media img {
    max-width: 50%; /* Adjust to your desired percentage or pixel value */
    margin: 0 auto; /* Center the image if needed */
    display: block;
  }
}

Applying the CSS:

  1. Online Store > Themes > Edit Code

  2. Open the appropriate CSS/SCSS file (usually theme.css or styles.css).

  3. Add the CSS code to the bottom of the file.

  4. Save your changes and refresh your site.

Let me know if you need further assistance!

If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

3

Hi @pixietrixie

  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(max-width:769px){
.collage-card .media {
    height: 100vh;
}
.media>*:not(.zoom):not(.deferred-media__poster-button), .media model-viewer {
   width: 100% !important;
    height: 100vh !important;
    object-fit: inherit !important;
    
}
}

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!

4

Hello there @pixietrixie head to the edit code section in Themes, then go to Asset then base.css then copy and paste the code below

@media (max-width: 991px) and (min-width: 768px){
.collection-list .collection-list__item,
.multicolumn-list .multicolumn-list__item {
width: calc(50% - 8px);
max-width: calc(50% - 8px);
}
.multicolumn-list .multicolumn-list__item {
width: calc(50% - 1px);
max-width: calc(50% - 1px);
}
}

Let me know if this works for you!

5

Hi @pixietrixie

  1. Go to Shopify > Theme > Edit code

  2. Go to Theme.liquid file > add this code before tag

{% if page.id == 139329962266 %}
{% style %}
@media screen and (min-width: 1024px){
.media img {
    max-width: 800px !important;
    left: 50% !important;
    transform: translateX(-50%);
}
}
{% endstyle %}
{% endif %}