Help positioning text with flexbox

Hello! I'm hoping someone might have some insight as to how I can position the price in these summary blocks at the bottom of the block (like this mock-up). I believe it can be achieved with flexbox, but I'm newer to flexbox and can't seem to figure out the exact combination of css styles to make it happen.

https://www.andasanas.com/book-buy

site password: 140ann

Oh my gosh @Vicks, you are the best! Thank you, thank you, thank you!

Hi again @Vicks, can. you help with the mobile alignment? I'm trying to achieve the attached. 

I've figured out how to use p:first-of-type and p:last-of-type to reorder the description and price, but am struggling to show the title and price next to each other.

I see you tried to move it using flex order attribute, but the issue here is that the price is not the part of the summary-content flex. its part of its child flexbx summary-excerpt. So it can move anywhere inside summary-excerpt using flex positioning and ordering, but it cannot be moved next to title because thats not inside summary-excerpt. I can suggest a simple css which will make it without worrying about flexbox.

1. make the summary-content position:relative, that means inside this DOM container anything we place using position: absolute will be placed relative to the position of summary-content. just add this line, in your css, you can include it in any previous css that you have already written.

@media screen and (max-width: 640px)
#collection-64165b0cfb51c6694bd1e502 .summary-content {
    position: relative;   // just this line
}

2. now we make the price container absolute positioned.

@media screen and (max-width: 640px)
#collection-64165b0cfb51c6694bd1e502 .summary-excerpt p:last-of-type {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px;
}

giving position:absolute will place it right next to the top left corner of the summary-content box. we add right:0 and top:0 to move it to the top-right corner of the box, and then we just add some padding so it aligns with the title.

after this you will need to solve the positioning of link in Want Free Yoga card. 🙂

Gosh you are such a gem!!! I've got it! Thank you so so much!

Hi again @Vicks! I'm running into a tiny snag. The price is now forced to the bottom of each item using justify-content: space-between which is great! However, the spacing between the titles and categories is not consistent across each. I've experimented with adding an extra hard return to the description, but the spacing was still off. 

If you have any insight, I would be so grateful!

https://www.andasanas.com/book-buy

site password: 140ann

On 5/24/2023 at 12:08 AM, mbockmaster said:

Hi again @Vicks! I'm running into a tiny snag. The price is now forced to the bottom of each item using justify-content: space-between which is great! However, the spacing between the titles and categories is not consistent across each. I've experimented with adding an extra hard return to the description, but the spacing was still off. 

If you have any insight, I would be so grateful!

https://www.andasanas.com/book-buy

site password: 140ann

 

You can add this to Design > Custom CSS to equal this space

@media screen and (min-width:992px) {
#collection-64165b0cfb51c6694bd1e502 .summary-title {
    min-height: 50px;
}
}

On 5/28/2023 at 12:55 AM, tuanphan said:

You can add this to Design > Custom CSS to equal this space

@media screen and (min-width:992px) {
#collection-64165b0cfb51c6694bd1e502 .summary-title {
    min-height: 50px;
}
}

 

Thanks for taking a look @tuanphan! I wasn't able to fix it with that code, but it did inspire me to take another look and I was able to correct it with 

.summary-title {
  flex: 0;
}