Image Size

Store Design

Topic summary

Goal: Change product images in the “Loved By Over 5,000 Aussies” section to be rectangular. Initially, the request was desktop-only; later clarified to apply to both mobile and desktop.

Key guidance:

  • Desktop-only approach: Use a CSS media query to keep images square on mobile and switch to a rectangular aspect ratio (e.g., 4:3) on screens ≥768px.
  • Updated requirement (both mobile and desktop): Apply a fixed aspect-ratio (e.g., 4/3) to the image’s CSS class across all breakpoints, with width: 100% and object-fit: cover to prevent distortion while filling the container.

Notes:

  • “aspect-ratio” defines the width-to-height proportions; “object-fit: cover” crops edges to maintain the ratio without stretching.
  • A screenshot was referenced to illustrate the desired rectangular look on desktop.

Outcome: A concrete CSS solution was provided; adjust the aspect ratio value as needed. Discussion appears resolved.

Summarized with AI on December 15. AI used: gpt-5.
1

Hi, my images on the section stated: Loved By Over 5,000 Aussies :star: :star: :star: :star: :star:

https://silksoothehair.com/products/silksoothe%E2%84%A2-premium-red-light-massage-brush

looks good on mobile, but on web I would like it to be rectangular. Like this:

Screen Shot 2024-10-29 at 8.29.58 PM.png
Screen Shot 2024-10-29 at 8.29.58 PM.png3188×994 302 KB

How can I make desktop different and only desktop? Thanks!

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

3

Apologies for the confusion, i want to make the image rectangular on both phone and web! @rajweb

4

@caitlynneal ,

No problem! To make the image rectangular on both desktop and mobile, you can set a fixed aspect ratio for the image. Here’s how you can do it:

.image-class {
  width: 100%;
  aspect-ratio: 4 / 3; /* Adjust the aspect ratio to make it rectangular */
  object-fit: cover; /* Ensures the image covers the area without stretching */
}

With this, your image will appear rectangular across all devices. Let me know if this helps or if you have further adjustments in mind!

If you’re still facing issues, please message me via email, and we can discuss it further.

thanks