Shopify themes, liquid, logos, and UX
Hello Team,
My website is www.blisskare.com and I am using narrative theme. I have arranged my products in grid style in collection and when the product description is 1 liner, there is a gap of one line between the image and first line of product details. Could you please help me remove this gap?
Solved! Go to the solution
This is an accepted solution.
This is because you have wildly inconsistent title lengths so this issue will crop up in different display sizes in different ways, see screenshot below.
There is a existing style rule that sets the info to bottom:0 pushing the product info down, the below code resets it with bottom:initial;
Always backup your theme before making changes
This is a marginal fix so TEST thoroughly across different browsers after adding the following to the bottom of your theme.css.
Also note this reverses the issue so now there will be excess whitespace below the cards prices.
@media only screen and (min-width: 750px)
.card__info--aligned {
position: absolute;
bottom: initial;
left: 0;
right: 0;
}
Inconsistent title lengths on 1349x display
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
This is an accepted solution.
@blisskare, do this to fix it in 20 seconds:
1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
@media (min-width: 750px){
.card__info--aligned {
bottom: unset !important;
}
}
This will remove the white space from the top but will inevitably add white space to the bottom. This is just how the theme was built though, there aren't many easy ways to work around that without an overhaul/more complex coding.
Kind regards,
Diego
This is an accepted solution.
@blisskare wrote:Thanks @PaulNewton . However, adding this code made my website almost blank - maybe because I have done little modifications in my theme and combining with this code is not giving me good results?
Your code should be fine, it seems the CSS I added is missing some brackets {} , and we can't fix posts older than 3 hours hold /sigh.
Diegos use of unset should also solve it , or if causes the same issue we definitely need the browser info: browser and version of that browser;
But you'll keep finding little edge problems like this because they chose to do absolute position tricks instead of a proper grid I think because that them also uses height tricks on the images to line everything across the toplines.
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
This is an accepted solution.
This is because you have wildly inconsistent title lengths so this issue will crop up in different display sizes in different ways, see screenshot below.
There is a existing style rule that sets the info to bottom:0 pushing the product info down, the below code resets it with bottom:initial;
Always backup your theme before making changes
This is a marginal fix so TEST thoroughly across different browsers after adding the following to the bottom of your theme.css.
Also note this reverses the issue so now there will be excess whitespace below the cards prices.
@media only screen and (min-width: 750px)
.card__info--aligned {
position: absolute;
bottom: initial;
left: 0;
right: 0;
}
Inconsistent title lengths on 1349x display
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
Thanks @PaulNewton . However, adding this code made my website almost blank - maybe because I have done little modifications in my theme and combining with this code is not giving me good results?
This is an accepted solution.
@blisskare, do this to fix it in 20 seconds:
1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
@media (min-width: 750px){
.card__info--aligned {
bottom: unset !important;
}
}
This will remove the white space from the top but will inevitably add white space to the bottom. This is just how the theme was built though, there aren't many easy ways to work around that without an overhaul/more complex coding.
Kind regards,
Diego
Wow! thank you so much @diego_ezfy for the code. That fixed the issue. My speed score is very low. Could you suggest some ways to make my website more responsive and fast?
This is an accepted solution.
@blisskare wrote:Thanks @PaulNewton . However, adding this code made my website almost blank - maybe because I have done little modifications in my theme and combining with this code is not giving me good results?
Your code should be fine, it seems the CSS I added is missing some brackets {} , and we can't fix posts older than 3 hours hold /sigh.
Diegos use of unset should also solve it , or if causes the same issue we definitely need the browser info: browser and version of that browser;
But you'll keep finding little edge problems like this because they chose to do absolute position tricks instead of a proper grid I think because that them also uses height tricks on the images to line everything across the toplines.
Contact paull.newton+shopifyforum@gmail.com for the solutions you need
Save time & money ,Ask Questions The Smart Way
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024