Page 1 of 1
flex container and cards
Posted: Wed Jun 02, 2021 10:57 am
by 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?
Re: flex container and cards
Posted: Wed Jun 02, 2021 12:23 pm
by Pablo
I do not see anything wrong.
What is the exact problem?
What did you expect to happen?
Re: flex container and cards
Posted: Wed Jun 02, 2021 12:41 pm
by wb_user
Pablo wrote: Wed Jun 02, 2021 12:23 pm
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)
Re: flex container and cards
Posted: Wed Jun 02, 2021 12:45 pm
by 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.
Re: flex container and cards
Posted: Wed Jun 02, 2021 12:55 pm
by wb_user
Pablo wrote: Wed Jun 02, 2021 12:45 pm
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
Re: flex container and cards
Posted: Wed Jun 02, 2021 1:00 pm
by 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
Re: flex container and cards
Posted: Thu Jun 03, 2021 5:03 am
by wb_user
Pablo wrote: Wed Jun 02, 2021 1:00 pm
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
Re: flex container and cards
Posted: Thu Jun 03, 2021 5:54 am
by Pablo
This is possible if you give the cards a fixed width (via flex basis). Then for each breakpoint set different values.
Re: flex container and cards
Posted: Thu Jun 03, 2021 6:25 am
by wb_user
Pablo wrote: Thu Jun 03, 2021 5:54 am
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?
Re: flex container and cards
Posted: Thu Jun 03, 2021 6:29 am
by Pablo
I'm sorry, I cannot update your website for you. For me, this will also take a lot of time.
Re: flex container and cards
Posted: Thu Jun 03, 2021 6:39 am
by wb_user
Pablo wrote: Thu Jun 03, 2021 6:29 am
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?
Re: flex container and cards
Posted: Thu Jun 03, 2021 6:45 am
by 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'
Re: flex container and cards
Posted: Thu Jun 03, 2021 6:52 am
by wb_user
Pablo wrote: Thu Jun 03, 2021 6:45 am
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
