What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Re sizing images for collage Dawn Theme

Solved

How can I resize images for a collage on the Dawn theme?

DaliaHawley
Excursionist
28 0 11

Hi, I am trying to resize the images in the collage for the home page. I would ideally like them all a bit smaller and the same size. Please can you advise? Thanks.

https://daliabotanique.co.uk/ 

Accepted Solutions (2)

KetanKumar
Shopify Partner
37445 3664 12119

This is an accepted solution.

@DaliaHawley 

now image resize as per ration make sure image size 1024x1024

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

AvadaCommerce
Shopify Partner
3879 839 991

This is an accepted solution.

Hi @DaliaHawley ,

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/collage.css->paste below code at the bottom of the file:

@media (min-width: 310px) {
    .collage__item--left:nth-child(3n - 2) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    .collage__item--left:nth-child(3n - 1), 
    .collage__item--left:nth-child(3n) {
        grid-column-start: unset !important;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

banned

View solution in original post

Replies 13 (13)

KetanKumar
Shopify Partner
37445 3664 12119

This is an accepted solution.

@DaliaHawley 

now image resize as per ration make sure image size 1024x1024

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

AvadaCommerce
Shopify Partner
3879 839 991

This is an accepted solution.

Hi @DaliaHawley ,

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/collage.css->paste below code at the bottom of the file:

@media (min-width: 310px) {
    .collage__item--left:nth-child(3n - 2) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    .collage__item--left:nth-child(3n - 1), 
    .collage__item--left:nth-child(3n) {
        grid-column-start: unset !important;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

banned
DaliaHawley
Excursionist
28 0 11

That's amazing, thank you so much!

KetanKumar
Shopify Partner
37445 3664 12119

@DaliaHawley 

its my pleasure to help us 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
NickS12
Tourist
6 0 5

I have a similar question @AvadaCommerce  - how would I need to modify the code to make the main picture smaller but still larger than the others? Thank you for your help! 

KetanKumar
Shopify Partner
37445 3664 12119

@NickS12 

sorry for that issue can you please send store url 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
NickS12
Tourist
6 0 5

Hi, 

it is iweardoyou.net. Thanks!

KetanKumar
Shopify Partner
37445 3664 12119

@NickS12 

can you show me section where did you that issue?

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Nishan_19
New Member
4 0 0

Hi, i know this is an old solution however this was perfect but now the height of my image is too large, how do I just target the height?

 

NancyL
Excursionist
14 0 9

I have the same issue. Were you able to solve it?

surfer707
New Member
5 0 0

Hi Avada,

 

I tried the code but the image in the middle of Our Collections (Collage) got cut off so it needs to be adjusted. How do I do that?

 

https://colostrumprime.com/

 

Thanks

kannysocool
Shopify Partner
3 0 0

i want the images in square, can you help me? 

 

PrettyYoungMogu
Tourist
8 0 4

Thank you, worked great!