Decrease image size

Store Design
, ,
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 %}