Change dimensions of Collections List Images

[fernandojordio]

Hi

I am currently trying to move from the old Brooklyn template onto the Dawn 2.0 template and have 6 collections highlighted on my homepage. 

The different coloured SQUARE collection graphics currently take up quite lot of screen space so I would like to reduce the height of each one, and make the dimensions of each image more 'letterbox' with the dimensions of the new graphics being uploaded as 1080x400pix     (currently the images being used are 1080x1080).

Obviously I need to ensure that this will work across desktop, mobile and tablet.

Would you be able to share the code to change this and also clarify how I get to wherever the code needs to be copied to please?

Thanks very much!

Steve

[Zeel-prajapatii]

Hey @fernandojordio 

If you can share your website URL then it will be great.

Thanks

[fernandojordio]

Hi

It's Jordanguitars.co.uk -  however the current 'live' website is on the old Brooklyn template  (you can see we've managed to achieve the desired effect on the current live site.  

We are currently migrating to Dawn template however so just trying to get the change made before sending it live.

Thanks

Steve

[fernandojordio]

Any thoughts?   awaiting a response.

Thanks

[fernandojordio]

Hi



Still awaiting a response on this.


The website is now live on the new DAWN platform: www.jordanguitars.co.uk<>



The 6x different coloured collection graphics currently take up quite lot of screen space so I would like to reduce the height of each one, and make the dimensions of each image more 'letterbox' - so making the height of each box 400pix rather than 1080pix



Obviously I need to ensure that this will work across desktop, mobile and tablet.



Would you be able to share the code/destination so that I can update this please?



Thanks very much!

Steve

[Zeel-prajapatii]

Hey @fernandojordio Sorry for the inconvenience , please add the below css code to your component-card.css file. 

.collection-list .card__inner {
    width: 100%;
    height: 400px;
}

[fernandojordio]

Hi

I added it to the bottom of the component-card.css file, but it doesn't seem to have done anything. Any idea what is wrong?

Thanks again

[Zeel-prajapatii]

Hey @fernandojordio I can see the height of the collection cards is now smaller than before.

Thanks.

[fernandojordio]

I have adapted the pixel height to 200px and that now looks perfect on Desktop. However on Mobile it's cropping the words 'Electric' and 'Acoustic' on those collection images. Is there a way of amending so that doesn't happen, and so the boxes on mobile look the same as they do on desktop?


Thanks again!

[fernandojordio]

Any thoughts please?

Thanks

Steve

[Zeel-prajapatii · Accepted solution]

Hey @fernandojordio please add below code to css file.

@media screen and (max-width:480px){
 .collection-list .card__inner {
    width: 100%;
    height: 140px;
}
}

[DeeQuadis]

Hi Zeel, i tried a variation, but now i have this space between the collection images in the list
.collection-list .card__inner {
width: 80%;
height: 80%;
}
www.quadis.mu