Solved

Align Product Display - Impulse Theme

itsolidude12
Pathfinder
128 4 40

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

Accepted Solution (1)
Kinjaldavra
Shopify Partner
2302 570 1422

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 ;
}
}

 

View solution in original post

Replies 7 (7)

ZestardTech
Shopify Expert
5393 970 1291

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
36839 3635 11972

@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
Kinjaldavra
Shopify Partner
2302 570 1422

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;
}

 

itsolidude12
Pathfinder
128 4 40

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

1.jpg

 

 

Kinjaldavra
Shopify Partner
2302 570 1422

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 ;
}
}

 

itsolidude12
Pathfinder
128 4 40

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

KetanKumar
Shopify Partner
36839 3635 11972

@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