Resize Featured Collection Image on homepage for desktop only in Dawn Theme.

[RC94]

Hi! I have been searching and searching for code and can’t find code that will resize the featured collection product images for desktop. My desktop page looks terrible with the images taking up the entire homepage. I found an CSS code to add to each featured collection however, this changes both the mobile & desktop size making the mobile size tiny & desktop perfect. Desperate for help please !

Website: Charlie Helena Collection- Mum & Babe Outfits |Accessories | Boho Rugs – Charliehelenacollection

Desktop Images below for reference:

CSS code added that changes both Desktop & Mobile

[BSSCommerce-B2B]

Hi @RC94

Can you modify it as follows to make the CSS affect only desktop devices?

@media screen and (min-width: 750px) {
    h2 {
        font-size: 20px;
    }
}

Or make it affect only mobile devices

@media screen and (max-width: 750px) {
    h2 {
        font-size: 20px;
    }
}

If it helps you, please like and mark it as the solution.

Best Regards

[RC94]

Unfortunately, this code didn’t work as per below image of the featured collection on desktop ( literally takes up the entire computer screen and looks terrible)

This is where I am adding the CSS coding

[RC94]

The code below has been the only code I have found that has adjusted the featured collection image on DAWN theme however, this changes both mobile & desktop and looks way too small on mobile & perfect on desktop- any idea how to alter this code so it doesn’t effect the mobile visual?

[BSSCommerce-B2B]

Hi @RC94

Please change to it

@media screen and (min-width: 750px) {
     h2 {
        font-size: 20px;
    }
    .collection .card__inner {
       width: 60%;
       margin: auto
   }
}

Or you can add CSS here

Step 1. Go to Admin → Online store → Theme > Edit code

Step 2. Find the file theme.liquid. Add the following CSS snippet before

@media screen and (min-width: 750px) {
     h2 {
        font-size: 20px;
    }
    .collection .card__inner {
       width: 60%;
       margin: auto
   }
}

[RC94]

HOWEVER, please see what it is doing below on desktop- creating huge spaces inbetween the photo and the description is not aligning now. Please see below:

[RC94]

Apologies- the start of my message has disappeared.

AMAZING- the code worked here but not on the liquid.theme

HOWEVER, please see what it is doing below on desktop- creating huge spaces inbetween the photo and the description is not aligning now. Please see below: ( photo in the first response).

[BSSCommerce-B2B]

Yes, what I mean is you can add one of the two; if customizing is okay, then there’s no need to add it in the theme.liquid
Your issue is that the image is resized and centered, however, the price section is still left-aligned.

Please change to it

@media screen and (min-width: 750px) {
     h2 {
        font-size: 20px;
    }
    .collection .card__inner, .card__information {
       width: 60% !important;
       margin: auto !important;
   }
}

Result

If it helps you, please like and mark it as the solution.

Best Regards

[RC94]

YOU ARE AMAZING! Thank you this worked a treat!