Align add to cart and price on collection page

Solved
Stubbitinis
Tourist
7 0 4

Hello,

I have managed to put an add to cart button in my collection pages however they are not all aligned and I feel it looks a little messy. Can anyone help me please with how to align everything including the price, description and add to cart button?

I am fairly new to coding! 

my website is www.stubbitinis.co.uk

Thank you

Mick

KetanKumar
Shopify Partner
20524 2121 7738

@Stubbitinis 

sorry for that issue can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.product-grid-image + p {
    min-height: 130px;
}

 

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
0 Likes
Stubbitinis
Tourist
7 0 4

Thanks that has worked for the most part...its now only not aligned when there is a review on the product, please see picture. 

If you can solve this it would be amazing. Thank you.

Align.PNG

 

KetanKumar
Shopify Partner
20524 2121 7738

This is an accepted solution.

@Stubbitinis 

oh sorry for that please add this code also

.jdgm-widget.jdgm-widget {
    display: block !important;
    height: 20px;
}
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
Natztech
Shopify Partner
1381 388 942

hello @Stubbitinis 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 

.template-collection .product-grid-image > p {
    min-height: 90px !important;
}
.template-collection .jdgm-widget.jdgm-widget {
    display: block !important;
    height: 20px;
}

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
Stubbitinis
Tourist
7 0 4

Thank you, this has worked perfectly. 

KetanKumar
Shopify Partner
20524 2121 7738

@Stubbitinis 

it's my pleasure to help us

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
0 Likes