Align Product Display - Impulse Theme

Solved
itsolidude12
Explorer
67 1 26

Hello,

I have some problems with the alignment of things. As you can see (Red) the whole part is misaligned to the rest (black) because of the title not being long enough for two lines. I am hoping to get them all to the same height (maybe align them to the black square). As for the "more variants available", it would be amazing so they all get closer up to the review stars (blue arrows). I can get it to sorta work but .css is not really my strong suit :).

Any help would be greatly appreciated! 

Shop: here

Password: emori

1.jpg

Pallavi
Shopify Expert
2235 370 484

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

.template-collection .grid .collection-grid__wrapper .grid .grid-product .grid-product__meta .grid-product__title {
min-height: 27px;
}
.template-collection .grid .collection-grid__wrapper .grid .grid-product .grid-product__meta br{
display: none;
}

.template-collection .grid .collection-grid__wrapper .grid .grid-product .grid-product__meta .grid-product__price > span {
margin-top: 10px;
display: block;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
KetanKumar
Shopify Partner
20510 2121 7736

@itsolidude12 

sorry for that issue can you please try this 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

.grid-product__title {min-height: 32px;}
.grid-product__price br {
    display: none;
}

 

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
1380 388 938

hello @itsolidude12 


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 .grid .grid-product__title.grid-product__title--heading{
        min-height: 30px;
}
.template-collection .grid .grid-product__price  br {
    display:none;
}

 

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
itsolidude12
Explorer
67 1 26

@KetanKumar  Works perfectly on desktop. On phone Size it is still misaligned though.

1.jpg

 

 

0 Likes
Natztech
Shopify Partner
1380 388 938

This is an accepted solution.

hello @itsolidude12

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

@media screen and (max-width: 800px){
#CollectionSection .grid-product__content .grid-product__meta .grid-product__title {
     min-height: 40px !important ;
}
}

 

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
itsolidude12
Explorer
67 1 26

@Natztech Works great. A bit wonky on the Galaxy Fold but no one really uses them anyways. Thanks!

KetanKumar
Shopify Partner
20510 2121 7736

@itsolidude12 

great thanks for update if you need any help let me know 

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