Image Size

Store Design
2

Hey @caitlynneal ,

To make the image rectangular on desktop only, you can use CSS media queries to apply different styles based on the screen size. Here’s how you can achieve that:

  1. Add a CSS class to target the image specifically in desktop view.
  2. Use media queries to change the image’s shape on larger screens.

Here’s an example CSS code snippet:

/* Default styling for mobile */
.image-class {
  width: 100%;
  aspect-ratio: 1/1; /* Keeps it square */
}

/* Styling for desktop */
@media (min-width: 768px) {
  .image-class {
    width: 100%;
    aspect-ratio: 4/3; /* Adjust this to make it rectangular */
  }
}

Replace .image-class with the actual class name of your image. This approach ensures that the image remains square on mobile and becomes rectangular on desktop. Adjust the aspect-ratio value as needed for your preferred rectangular shape on desktop.

Let me know if you need further assistance applying this!

If I was able to help you, please don’t forget to Like and mark it as the Solution!

Best Regard,

Rajat Sharma