Product Info Alignment to Image

Highlighted
New Member
2 0 0

Hi all, I'm having problems regarding alignment of product information displayed on my website. Here is a link to the referenced website: https://mountaincoffee.ca/collections/all-offerings

 

On the page, the text appears to be aligned to the bottom of the box, rather than fixed to auto align to the bottom of the image. This is especially the case when I edit the product card height, as well as the site width. 

Is there a fix for this? I've tried codes such as margin-topposition, and changing text-align so far, as well as other workarounds. Nothing seems to allow the first line of text to be aligned to the bottom of the product image instead. 

Not sure if some of the relevant code will help, but here it is:

/*================ Product Grid ================*/
{% if settings.product_vendor_enable %}
$product-card-height: 250px;
{% else %}
$product-card-height: 220px;
{% endif %}
{% if settings.product_images_padding %}
$product-image-padding: 25px;

/*================ Product image and wrapper ================*/
.product-card__image-container {
height: ($product-card-height -30px);
margin-bottom: $product-image-margin-bottom;
display: table;
width: 100%;
}

.product-card__image-wrapper {
display: table-cell;
vertical-align: bottom;
}

.product-card__image {
position: relative;
margin: 0 auto;

img {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
}

/*================ Product meta info ================*/
.product-card__info {
position: absolute;
margin-top: auto;
left: 0;
bottom: 0;
width: 100%;
background-color: $color-content;
padding: ($gutter-site / 2) ($product-image-padding / 2);

@include media-query($medium-up) {
padding: ($gutter-site / 2) ($product-image-padding / 2) ($gutter-site + 30px);
}
}


.product-card__name,
.product-card__availability {
position: relative;
z-index: $z-index-product-card + 2;
}

.product-card__name {
font-weight: $font-weight-body-bold;
color: $color-heading;
white-space: normal;
margin-top: auto;
}

.product-card__availability {
@include nav-text-style();
font-size: em(9);
color: $color-accent;
}

.product-card__brand,
.product-card__price {
font-size: em(0);
}

.product-card__regular-price {
opacity: 1;
color: lighten($color-body-text, 5%);
}

.template-product .page-container {
background-color: $color-content;
}

.product-single {
margin-bottom: $gutter-site * 2;

@include media-query($medium-up) {
margin-bottom: $gutter-site * 1;
}
}

@include media-query($small) {
.product-single__info-wrapper {
padding: 0 ($gutter-site / 2);
}
}


$product-image-margin-bottom: 70px;
{% else %}
$product-image-padding: 14px;
$product-image-margin-bottom: 80px;
{% endif %}

 

0 Likes
Shopify Partner
111 9 22

Hey there, i checked your site and noticed that since your product name is so long, it's causing the wrappers to act up. The easiest way around this is to keep your product names short. If you name them short, this error disappears. For example. Brazil Dark, Brazil Light, Columbia Blend, etc. 

Screen Shot 2019-05-25 at 10.31.59 PM.pngKeep them short and sweet.

Also, the margin-top on mobile needs a media query. If you resize your browser window on this page, you'll see what i'm talking about. Here is a pic for reference anyhow. 

Screen Shot 2019-05-25 at 10.32.20 PM.pngmargin-top needs to be set on mobile breakpoint. It's far too low.

Desktop could use some margin adjustment as well, as when you have a single line product name there is a slight gap above. Let me know if this helps! Happy to help out any way i can. 

I am a multi-disciplined web developer with years of experience working with several languages and frameworks.
0 Likes
New Member
2 0 0

Thank you for the reply. The product name must remain that long, and what I'm finding trouble with is the wrapping. I understand that shorter product names are more beneficial, but for this market, the words in the product name are necessary. We sell green coffee, and not roasted coffee, so it would not make sense to just have the country as the name, therefore we must have some differentiating ID/name for the coffees within the country. Would you be able to provide a fix that would align the upper line of the product name to the bottom of the image in the container? 

 

Regarding the media query margin, I am aware of this, and am currently looking for a fix. This margin is also related to how the product name is aligned within the container. Let me know if you have any solutions other than shortening the product name. 

0 Likes
Shopify Partner
111 9 22

Got it, let me see what else i can come up with! What theme are you using? I will reply back later. 

I am a multi-disciplined web developer with years of experience working with several languages and frameworks.
0 Likes
New Member
9 0 0

Hi there. I'm having the same issue. Some product images differ in size and so the image container alters and the product description becomes misaligned from the neighbouring products. What is the fix for that? I tried to play around with image height but it didn't work for all. Thank you. Mike

0 Likes