Product description Text not in line? Venture Theme

Solved
Highlighted
Explorer
43 0 9

  Hi, 

  Is there a way i can make the text be inline?  As you can see, products with only 2 lines in the description hug the bottom making it appear uneven.

  If the text would hug the top line, that would be fine.

 

Russell_Farquer_0-1594762697300.png

Thanks

0 Likes
Highlighted
Shopify Expert
778 64 175

Yes you can do this with CSS.

If you're not familiar with CSS post the url here and one of us can inspect the page and let you know which rule to edit / update.

If you want to try yourself, look for the section "HOW TO KNOW WHAT CSS CODE TO CHANGE?" in this tutorial: https://speedboostr.com/how-to-safely-edit-your-shopify-theme/

Founder of Speed Boostr (Shopify optimization and dev agency).
Creator of Theme Scientist (A/B testing app).
Creator of Order Automator (app that auto tags + fulfills orders, send emails).
Creator of Tip Jar (add a tip button to your store).
Creator of Shopify Analyzer (free performance analysis tool).
My team also builds custom apps and automated solutions.
Enjoy the adventure!
1 Like
Highlighted
Explorer
43 0 9

@JoesIdeas 

Thanks for the reply, the site isnt live yet, would a preview link work?

https://kn2y7c2fvstkyis7-16497761.shopifypreview.com

 

0 Likes
Highlighted
Shopify Expert
778 64 175

This is an accepted solution.

Ya that works.

The reason you're seeing them bottom aligned is the because of the structure of those cards, they're instructed to be at the bottom of the container, rather than below the image.

If you want it to look like this:

Screen Shot 2020-07-14 at 8.41.06 PM.jpg 

 

And (mobile):

Screen Shot 2020-07-14 at 8.41.16 PM.jpg 

 

You can add this CSS block:

 

#shopify-section-featured-products {
	.product-card__image-container {
		margin-bottom: 20px;
	}

	.product-card__info {
		position: relative;
	}

	.product-card__overlay {
		display: none;
	}
}

 

 

That will affect just the featured products block.

If you'd like these mods to be site-wide, remove the 1st and last line of that code.

If you don't have one yet, I would create a custom.scss.liquid file to put CSS customizations in your code (instead of just adding to the end of your theme css). Explanation + how to do that here: https://speedboostr.com/how-to-safely-edit-your-shopify-theme.

Make sure to always duplicate your theme before editing in case anything goes wrong.

Founder of Speed Boostr (Shopify optimization and dev agency).
Creator of Theme Scientist (A/B testing app).
Creator of Order Automator (app that auto tags + fulfills orders, send emails).
Creator of Tip Jar (add a tip button to your store).
Creator of Shopify Analyzer (free performance analysis tool).
My team also builds custom apps and automated solutions.
Enjoy the adventure!
1 Like
Highlighted
Explorer
43 0 9

@JoesIdeas 

Excellent!  Thanks you.

Is it possible to have the Prices stay inline and not move up with the description?

0 Likes
Highlighted
Shopify Expert
778 64 175

You could set a fixed height on the title, that would make the price block always be at the same height (right under the title block).

But then if you have a title that shows as 4 lines on certain screens, it will get cut off.

And if you have 1 line, there will be a big gap between title and price.

When making decisions in web design, keep in mind your uses will have different screen sizes, different browsers, and different operating systems. All of these factors can affect the way the layout displays, so you want to design "responsively" so things can move fluidly, rather than thinking of it as a screenshot or static design. You won't be able to control the visual experience for every scenario.

Founder of Speed Boostr (Shopify optimization and dev agency).
Creator of Theme Scientist (A/B testing app).
Creator of Order Automator (app that auto tags + fulfills orders, send emails).
Creator of Tip Jar (add a tip button to your store).
Creator of Shopify Analyzer (free performance analysis tool).
My team also builds custom apps and automated solutions.
Enjoy the adventure!
1 Like