Hey folks,
can someone tell me how can i make in the Catalogue section, the h3 kimono names above their corresponding p descriptions, left and right of the images at the center too. I used flexbox for the gallery. Should i avoid mixing Grid with Flexbox in a page?
code and host link in Readme below: https://github.com/f0rsakenc0der/Product-Landing-Page
Hmmm…you could put the h3 title and the description paragraph in one div (with the h3 coming before the p) then have the image come next, and then have flex on the main container around all of that. THEN what you could do is change the flow of the two elements within the flex container for every other product in the catalog.
Check out this pen to see what I mean. Is that what you’re looking to do?
The layout at smaller displays needs some work haha, but hopefully that will get you going on the right track.
As for mixing grid and flex, I’ve never done it personally so I can’t advise you there. However, I can give this handy cheatsheet link for flexbox at the very least: https://yoksel.github.io/flex-cheatsheet/
Thnx for the reply.
I did just that. added one more div named column and changed it’s flex direction to column. Worked like charm ^^