I have some product names that are long and end up on a second line. When this happens it throws my prices off. On my old theme I was able to have everything align per row no matter how long or short a name was. The price was always spaced out evenly across the row. On Dawn 2.0 what code do I use to get the price to line up on each row no matter the title length?
An easier fix is setting the price above the title so titles can flow without changing the relative position of any following elements.
The HTML structures nesting and base CSS for product cards isn’t setup for fixing the price positioning in a good way. Besides the below untested CSS another option is to set a height on the .card-information__wrapper and put position:relative on that, or use display:grid, or display:flex techniques.
Always backup themes and files before making changes
For dawn add a custom-liquid block and add the following CSS to test it, does not include media queries for different screen sizes.
This was built against Dawn Demo homepage collection products: https://dawn-theme-default.myshopify.com/
hmm that untested code might have worked its just throwing my prices to the left when they were originally centered. what could I add to get them back to the center? Thank you.
use the following for price centering when absolute positioning
.product-grid .card-information__wrapper .price {
bottom: 5rem;
position: absolute;
left: 0;
right: 0;
}
that worked, thank you!
Where should I install this code?