Image Size

Store Design
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