What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Misaligned product description

Solved

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

blisskare
Excursionist
33 0 6

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

Accepted Solutions (3)

PaulNewton
Shopify Partner
7450 657 1565

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

 

 

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


View solution in original post

diego_ezfy
Shopify Partner
2970 571 917

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

View solution in original post

PaulNewton
Shopify Partner
7450 657 1565

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


View solution in original post

Replies 6 (6)

PaulNewton
Shopify Partner
7450 657 1565

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

 

 

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


blisskare
Excursionist
33 0 6

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
Shopify Partner
2970 571 917

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

blisskare
Excursionist
33 0 6

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
Shopify Partner
7450 657 1565

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


blisskare
Excursionist
33 0 6

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