Misaligned product description

Solved
blisskare
Tourist
26 0 3

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?

Screen Shot 2021-09-23 at 6.50.14 PM.png

0 Likes
PaulNewton
Shopify Partner
3092 190 569

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

 

 

PaulNewton_0-1632442399462.png

Inconsistent title lengths on 1349x display

 

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
blisskare
Tourist
26 0 3

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?

0 Likes

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.

 

diego_ezfy_0-1632451924962.png

 



Kind regards,
Diego

◦ Slideshow section not looking good or cutting off? Try the Slideshow (PRO) section. No apps required.
◦ Replace apps with copy/paste code snippets. Examples here.
◦ In need of coding help? I'm available for hire! ezfycode@gmail.com
PaulNewton
Shopify Partner
3092 190 569

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.

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
blisskare
Tourist
26 0 3

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?

0 Likes
blisskare
Tourist
26 0 3

Thanks @PaulNewton for taking the time to look at it. The issue is fixed now!

0 Likes