Responsive shop page layout - Grid/Flex?
Hey,
I'm stumbling on this problem for the 9000th time. I have made a webshop with two column layout:
left - text information
right - product information
But on mobile i want to mix the child elements of those containers. So i was thinking of making it one parent element so i can use grid/flex. I was thinking about grid but that is not flexible enough (height wise). Then I thought about Flexbox (masonry like idea) but that is also not a good way to work because of the order of items.
So now I'm going to fix it with javascript but i'm not happy with that solution. Do you guys have any css/html solution to create this?
So in short:
desktop 2 column layout to mobile 1 column layout. And rearrange the child elements
37 Replies
found something! 🙂
There's an MDN article on that technique https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
MDN Web Docs
Ordering flex items - CSS: Cascading Style Sheets | MDN
New layout methods such as Flexbox and Grid bring with them the possibility of controlling the order of content. In this article, we will take a look at ways in which you can change the visual order of your content when using Flexbox. We will also consider the implications of reordering items from an accessibility point of view.
make sure to read the accessibility concerns
the flex order only affects the visual order for example, screenreaders just follow DOM order
i know flex order, that is a good solution if everything is in one <div> but to create the desktop version i need two columns <div class="left> <div class="right">
I don't know how i would create the desktop version with flex or grid or block.
Only think i could think of is on the image float: right; clear: right;
What comes to mind are grid areas.
but that kinda sucks and i need to alter the dom order. (dont want that for seo purpose)
yeah but in grid area's i'm stuck on fixed row heights. that doesnt work for 2 columns with different elements/heights
You cannot mix content of two eparate divs based on media query.
No, have one large blocks with children, which you then rearrange with help of hrid template areas. On mobile all will be a cingle col, anyway.
yes mobile issnt the problem
Why fixed heights?
this wil happen on desktop with grid css
and all the content is not fixed
so i have to say to the product text. take grid-area row 2 till 4
and if the text grows the right side breaks
In my case, imagine a block with headline, image and text. Pn mobile I want headline tops, then img and then text (with CTA). On desktop, tho, I want image on tle left and on the right the healine above text. Grid template areas.
Oh, more complicated.
exactly! thats my problem/.... your solution would reviews grow in height with the product text. then you get this problem.
So what are the divs? headline, desc, usps, img, reviews and help button?
I wou;d need to play aound with code to figure it out.
https://www.productlicenties.nl/windows-11/11-pro/
that page
think the only real solution is to rearrange with javascript 😦
That sucks. Have you looked into subgrids?
going to do that now
last resort 🙂
Have a look around. I would try a play on my end, but really need o get some little sleep now.
sleep well! thanks 🙂
its 12:00 here 🙂
need lunch
Yes, here too, but I have been sitting here since yesterday.
I believe it is doable.
for now this is my fix 🙂
If you have time, get me one sketch of the mobile layout and one for desktop.
ill message you when I fixed it with JS and its online 🙂
then you can see the live version
Well, last resort ... I do not like tjis approach. Albeit it may work.
same here. should be doable with css right!
thats why im here :-
I am leaving for an offl;ine weekend in the afternoon, anyway.
But I need to take it to geany, pen sucks for this.
no hurry, just searching for a better solution.. got this problem a lot with shops that need to be perfected for CRO marketing
I think it could be done using flex and setting it direction to row and wrap(?) to wrap
and then forcing one element to wrap
That does not handle uneven height. Perhaps even grid will not be it.
and then forcing one element to wrap
idk, maybe it won't work
Tough. Tough enough for funny Sunday evening.
https://codepen.io/Ghloo/pen/LYvYvmK - looks decent to me.
nice! 🙂
works good but still not dynamic
if my client puts in way more text the system will be broken
right container has to be always longer then left container in this case
i also fixed it (with js) going to upload now
Dunno, try to stretch it.
...and look at small screen - there you can reorder them blockx as wished.
small screen -> flexbox + order is amazing indeed
i will play with it! thanks for your effort
Javascript solution
https://www.productlicenties.nl/windows-11/11-pro/
Productlicenties.nl
Windows 11 pro licentie kopen? Productlicenties.nl!
Windows 11 pro licentie kopen bij Productlicenties.nl ✔️ Direct geleverd per mail ✔️ Laagste prijsgarantie ✔️ Installatie instructies!
Yea, thanks, will have a look, my js sucks, so I play around with css. / Order comes handy too, but my idea is in those grid areas - you can reorder the boxes without order so to say.without order (if you take a look now, the header titile is moved to the bottom on mobile).