Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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 ;
}
}
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;
}
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;
}
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;
}
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 ;
}
}
@Kinjaldavra Works great. A bit wonky on the Galaxy Fold but no one really uses them anyways. Thanks!
great thanks for update if you need any help let me know
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024