Streaming live at 10am (PST)

Problems with flexbox order on different devices


#1

I have problems with the flexbox on the different devices. I make an online shop with products and i want to show 4 products in 1 row on desktop view. On Smartphone i want 3 products in 1 row and on smartphone only 2 products in 1 row. I can not solve the problem.


Here is my public share link:
https://preview.webflow.com/preview/regumedde?preview=76f0477ddd2a74c6198a8b8a7b0651d1


#2

Can you please help me with this topic? I need to finish the project. Thanks.


#3

@Bettina_Lucas have you considered using CMS collections? This gives you quite a bit of flexibility and control when working with multiple products. You can still use flexbox to organize the content, but the dynamic items allow you to select how many products you want on each row for each breakpoint.

If you are unsure how to create and manage collections, here is a Youtube playlist from the Webflow Youtube page that walks through every step of this process.

I think this would be the best way to accomplish what you are trying to do. It will also make it easier for you to add or update products in the future!

I hope this helps!
Hamilton


#4

Hi Hamilton,
we host the Website/Online Shop on our own server with a databank for the products and own CMS system. When it is not possible to create it with flexbox...it is better to solve this with tables? I start creating the product list with flexbox because for the products i need always the same height vor the product box. When i create it with tables i have to give the product box a height for every device.


#5

@Bettina_Lucas
You can, but the way you structured the elements within divs makes a 3 row solution quite....well lets say: not pretty.

Since you have 4 elements within your parent div, the only good solution would be to have at least an even amount of elements per row.. e.g 4 on desktop, 2 on tablet, 2 on mobile.

You may want to try and play with these attributes:

  1. set your "browse cat box" and "product flexbox parent" to "WRAP CHILDREN.

  2. select "browse cat box" element and click this icon and set flex-grow and flex-shrink to "0".
    then add a % based value or px based value in the lower form:

tablet: 29%
mobile landscape 44%
mobile horizontal 39%

These are not perfect values you have to check them yourself. but maybe you ll get the idea.

Regards
Daniel

Falls sonst noch Fragen aufkommen, schreib mir einfach :).


#6

Thanks...i defined it like that. I make now 4 products in a row for desktop and 2 products in a row for the lower devices. But how can i define a break after the second product for the lower devices?


#7

Sent you a personal message


#8

"product flexbox parent" -> Wrap Children :smile:


#9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.