flex container and cards

[wb_user]

hello
i dont understand how can understand you my mean
please see demo: https://we.tl/t-CbNblx6Knt
when i preview and miniaturize my browser window , i see card images are not show correctly ( look at the pictures in preview )
video demo :

can i do any thing to resolve this problem?

[Pablo]

I do not see anything wrong.
What is the exact problem?
What did you expect to happen?

[wb_user]

I do not see anything wrong.
What is the exact problem?
What did you expect to happen?

image in cards not show correct when you miniaturize browser window (Hight ,Wight)

[Pablo]

There is no enough space for image to fit so you will need to add a breakpoint to change the layout for smaller screens.

[wb_user]

There is no enough space for image to fit so you will need to add a breakpoint to change the layout for smaller screens.

yes, i understand the problem is enough space
i create 768px and 411px breakpoints, but it not effect on space and images not show correctly again in small screens
demo: https://we.tl/t-NkAxEntB55

[Pablo]

All you did was add breakpoints.
You will need to actually change the flexbox properties otherwise it will not make any difference.
For example, switch to 'column' mode (and stretch the cards). Also, you may need to remove the 'max-width' of the cards.

Related tutorial:
https://www.wysiwygwebbuilder.com/flexbox.html

[wb_user]

All you did was add breakpoints.
You will need to actually change the flexbox properties otherwise it will not make any difference.
For example, switch to 'column' mode (and stretch the cards). Also, you may need to remove the 'max-width' of the cards.

Related tutorial:
https://www.wysiwygwebbuilder.com/flexbox.html

I have reached results, but i have other question
please see this new demo : https://we.tl/t-KI3urZnqqt
in default breakpoint , the 5 cards shown in One row.
can i set 4 cards in two raw in 980px?
i test many, but in 980px cards shown in One row one by one

[Pablo]

This is possible if you give the cards a fixed width (via flex basis). Then for each breakpoint set different values.

[wb_user]

This is possible if you give the cards a fixed width (via flex basis). Then for each breakpoint set different values.

can you edit my demo to i understand your work?

[Pablo]

I'm sorry, I cannot update your website for you. For me, this will also take a lot of time.

[wb_user]

I'm sorry, I cannot update your website for you. For me, this will also take a lot of time.

I succeeded by chance to make that
please see this demo : https://we.tl/t-fumpdN51gT
are this work is standard and you Do you confirm that work?

[Pablo]

Why are you using nested flex containers?

Suggested solution:
- use one flex container for all cards.
- set 'flex wrap' to 'wrap'
- set the flex basis of each card to to '219px'

[wb_user]

Why are you using nested flex containers?

Suggested solution:
- use one flex container for all cards.
- set 'flex wrap' to 'wrap'
- set the flex basis of each card to to '219px'

and with your help every thing is done
thanks