Portrait Aspect Ratio On Featured Collection (Mobile Only) - Dawn Theme

Store Design
,
1

Hi,

I want to change the aspect ratio of the product cards within a featured collection to be portrait on mobile only.

Currently, the product cards are square which works perfectly with the desktop version of my website, but is there a way to change them to portrait for the mobile-only version?

I am using the Dawn theme and my website URL is: https://5a3aa2-da.myshopify.com/

The featured collection I want to change is just below the main slideshow at the top of the home page.

I have added some images below of what it currently looks like and how I want it to look.

If anyone could help it would be much appreciated.

Thanks,

Aaron

IMG_64791.jpg
IMG_64791.jpg1179×2222 134 KB

IMG_6479.jpg
IMG_6479.jpg1179×2220 161 KB

2

Hi @Aaron-Mihell

To make the product cards in a featured collection portrait on mobile only while keeping them square on desktop in the Dawn theme:

Go to the theme editor:

  • Navigate to Online Store > Themes > Actions > Edit Code.

Locate the relevant CSS file:

  • Open Assets > base.css.

Add mobile-specific CSS:

@media (max-width: 767px) {

.card__media {

aspect-ratio: 2/3; /* Change this to desired portrait ratio */

}

}

Save and test:

  • Save your changes and check the mobile view to confirm the portrait aspect ratio is applied.

If you have other questions, I am willing to answer them more.

Best regards,

Daisy

3

Hi @DaisyVo ,

I have just added and tested the code but unfortunately it didn’t seem to work/do anything.

I added it to the bottom of base.css.

Thanks,

Aaron