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_6479.jpg
IMG_6479.jpg531×999 41.4 KB

IMG_64791.jpg
IMG_64791.jpg530×999 31.7 KB

2

Hi @Aaron-Mihell

To change the aspect ratio of the product cards to be portrait on mobile devices while using the Dawn theme, you can use custom CSS to target only the mobile version of your website. Add the following code to your theme:

1- Go to your Shopify admin and navigate to Online Store > Themes.

2- Under the Action area, select Edit code: https://prnt.sc/e2RRNKGplQEn

3- Look for theme.css or base.css (usually under Assets :disappointed_face: https://prnt.sc/qTEdKh52EU5r

4- Add the following CSS at the bottom of the file:

@media only screen and (max-width: 768px) {

.featured-collection .card {

aspect-ratio: 3/4; /* Set this to your desired portrait ratio */

}

}

This code will change the aspect ratio of the product cards to portrait (3:4) for screens with a maximum width of 768 pixels (typically mobile devices).

Remember to adjust the .card selector based on the actual class used for the product cards in your theme if necessary. Save and preview your changes to see if it matches your expectations.

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

Best regards,

Daisy

3

Hi @DaisyVo ,

I have added the code to base.css but can’t seem to get it to work unfortunately.

I am a bit unsure what you mean by “Remember to adjust the .card selector based on the actual class used for the product cards in your theme if necessary.”?

Thanks,

Aaron