Dawn Theme : Featured Collection alignment help

Solved
rgv1
Excursionist
15 0 4

Hello Everyone!

I'm new to Shopify and designing my very first store. I have a big issue if somebody could help me solve it.

 

I've achieved my ideal featured collection section height and width but i want placement of my products to be different 

 

I've attache two picture below of what i have right now and what i want to achieve.

 

Current : https://ibb.co/HKTRHq2

What i want to achieve : https://ibb.co/vJsxNy7 

 

Any help would be appreciated.

 

Thank You.

Accepted Solution (1)

Accepted Solutions
Hermit_the_Log
Explorer
49 4 10

This is an accepted solution.

Looks great!  You can make the photos bigger and more spread out by adding this code here to your CSS file

 

@media screen and (min-width: 990px)
.grid--5-col-desktop .grid__item {
    max-width: 30% !important;
    margin: 0px 25px !important;
}

 

Adjusting that 30% will make them bigger or smaller, and adjusting the 25px in the margin code will either spread them out or make them closer together.  The bigger the number, the farther apart they'll go.

 

Let me know what you think

View solution in original post

Replies 19 (19)
Hermit_the_Log
Explorer
49 4 10

Hi Rgv1, welcome to Shopify!  Could you post or send me the password for your site?  I'd like to take a look at the code and see what specifically we could add to your product grid items to get them aligned for you.

 

Thanks!

rgv1
Excursionist
15 0 4
KetanKumar
Shopify Partner
35898 3587 11605

@rgv1 

can you please send store url

If helpful then please Like and Accept Solution.
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
rgv1
Excursionist
15 0 4

pragatint.com

KetanKumar
Shopify Partner
35898 3587 11605

@rgv1 

thanks bt its password protect 

If helpful then please Like and Accept Solution.
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
Hermit_the_Log
Explorer
49 4 10

Hi Rgv1,

 

Try adding the following code to the top of your product.liquid, product-template.liquid, or CSS style sheet.  If you're adding to your existing style sheet, you won't need the <style></style> tags

 

<style>
.card__inner{
  height: 100%;
}
</style>
rgv1
Excursionist
15 0 4

should i add to all of these or just any one of these

Hermit_the_Log
Explorer
49 4 10

Just adding it to any one of those should do the trick

rgv1
Excursionist
15 0 4

Hi @Hermit_the_Log , I'm having issues. it didn't work for me 

Hermit_the_Log
Explorer
49 4 10

Hi @rgv1 I'll take another look.  Did you change the password for the site? I'm having trouble accessing your site now for some reason

rgv1
Excursionist
15 0 4

it should work now

Hermit_the_Log
Explorer
49 4 10

Thank you that worked. This is what I'm achieving by manually entering the style code into your site. Is this what you're looking to do?

 

Screenshot 2022-08-15 014449.png

Hermit_the_Log
Explorer
49 4 10

Something like that would most likely require you to upload .png versions with the same resolution and a transparent background on each photo.  I would recommend using Canva to create some new product photos and uploading those first, then we can work on the spacing for you

rgv1
Excursionist
15 0 4

thank you. i'll be back 

rgv1
Excursionist
15 0 4

hi @Hermit_the_Log , I've uploaded the revised photos can you please check them out?

 

Thank You 

Hermit_the_Log
Explorer
49 4 10

This is an accepted solution.

Looks great!  You can make the photos bigger and more spread out by adding this code here to your CSS file

 

@media screen and (min-width: 990px)
.grid--5-col-desktop .grid__item {
    max-width: 30% !important;
    margin: 0px 25px !important;
}

 

Adjusting that 30% will make them bigger or smaller, and adjusting the 25px in the margin code will either spread them out or make them closer together.  The bigger the number, the farther apart they'll go.

 

Let me know what you think

rgv1
Excursionist
15 0 4

one last this thing. can you guide me where should i post this. i have zero coding background 🤕 

Hermit_the_Log
Explorer
49 4 10

Sure thing.  Navigate to Online Store > Live Theme > Actions > Edit Code.  From here, you'll want to open your theme.liquid file under the Layout section.

 

In the theme.liquid file, place this code below within your <head></head> tags.  You'll want to put towards the end, just before the </head> tag, and then click Save.

 

<style>
@media screen and (min-width: 990px)
.grid--5-col-desktop .grid__item {
    max-width: 30% !important;
    margin: 0px 25px !important;
}
</style>

 

Let me know if you have any trouble and what you think of the result