vestal grotto
Hey everybody, currently working on this React project and my CSS isn't the best. The element in the image I am referring to is the container that has "$125 50% $250". In mobile as shown in the image, they are all flexed on the same row. However, in desktop view, the $250 is to be moved down below the other two elements. Is this possible to do with flex?
onyx cosmos
Hey everybody, currently working on this React project and my CSS isn't the best...
Well depends if all the other items are in flex too.
If yes then take a look at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
vestal grotto
Well depends if all the other items are in flex too.
If yes then take a look at ...
Doesn't order just swap the positions? I need the $250 to be moved down a row, they are all in the same container together
That's what I am trying to get compared to the first image
onyx cosmos
Oh, just the 250?
Nevermind then.
You'd have to add the quantity counter and add to cart button into the same flexbox div and then set the order of 250 to last
Wait wait wait
Ignore me completely.
I thought you wanted the 250 under everything
vestal grotto
No haha sorry, I wasn't clear
Just under the other 2 elements inside the container with it
onyx cosmos
You could do it with grid probably though.
On mobile it would be grid with 3 columns and on wider it would be with 2 columns, so it would get shifted under it
vestal grotto
Yeah thats what I was leaning towards, but was wondering if flex had any way. Was thinking maybe make the container smaller in large view and flex wrap?
Otherwise grid is probably easier
onyx cosmos
Yeah that could also work.
But it seems kinda janky 😄
onyx cosmos
Thinking about it the flex way isn't that janky as i thought. @vestal grotto
You would just set width of all the items to 50%
It's kinda clean
onyx cosmos
np, good luck with the site!
torn blaze
Can you set a media query for it and then do flex-wrap:wrap to make it wrap to the next line?
vestal grotto
Doesn't that only work if the container is too small to hold them all on the same line?
That was my original idea, to make the container smaller and flex wrap them but not sure how good a practice that is
torn blaze
Doesn't that only work if the container is too small to hold them all on the sam...
Hmm yeah I think you're right on yet
vestal grotto
I think that works, just not sure its the best practice