mbockmaster Posted April 21, 2023 Share Posted April 21, 2023 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 Link to comment
Solution Vicks Posted April 21, 2023 Solution Share Posted April 21, 2023 (edited) Here you go: .summary-excerpt { display: flex; flex-direction: column; justify-content: space-between; flex-grow: 1; } You have a div inside each card, which has a class summary-excerpt. This div contains two paragraphs, one for the description and other for price. When I make it flex, both paragraph align at top and bottom, however, in the first card, you only have one paragraph and no description. Perhaps you can add some blank space just like other cards to fix that. Edited April 21, 2023 by Vicks tuanphan 1 Link to comment
mbockmaster Posted April 22, 2023 Author Share Posted April 22, 2023 Oh my gosh @Vicks, you are the best! Thank you, thank you, thank you! Link to comment
mbockmaster Posted April 24, 2023 Author Share Posted April 24, 2023 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. Link to comment
Vicks Posted April 24, 2023 Share Posted April 24, 2023 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. Link to comment
Vicks Posted April 24, 2023 Share Posted April 24, 2023 after this you will need to solve the positioning of link in Want Free Yoga card. 🙂 Link to comment
mbockmaster Posted April 24, 2023 Author Share Posted April 24, 2023 Gosh you are such a gem!!! I've got it! Thank you so so much! Vicks 1 Link to comment
mbockmaster Posted May 23, 2023 Author Share Posted May 23, 2023 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 Link to comment
tuanphan Posted May 28, 2023 Share Posted May 28, 2023 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; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
mbockmaster Posted May 29, 2023 Author Share Posted May 29, 2023 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; } tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment