How can I remove the gap between image and product details in grid style?

[blisskare]

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?

[PaulNewton · 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

[diego_ezfy · 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

[PaulNewton · 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

[blisskare]

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?

[diego_ezfy · 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

[blisskare]

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?

[PaulNewton · 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.

[blisskare]

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