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

[Aaron-Mihell]

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

[DaisyVo]

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

[Aaron-Mihell]

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