flex container and cards

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
IMPORTANT NOTE!!

DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.



PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
wb_user
 
 
Posts: 1099
Joined: Sun Jul 05, 2015 7:03 am

flex container and cards

Post 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 : Image

can i do any thing to resolve this problem?
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: flex container and cards

Post by Pablo »

I do not see anything wrong.
What is the exact problem?
What did you expect to happen?
wb_user
 
 
Posts: 1099
Joined: Sun Jul 05, 2015 7:03 am

Re: flex container and cards

Post 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)
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: flex container and cards

Post 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.
wb_user
 
 
Posts: 1099
Joined: Sun Jul 05, 2015 7:03 am

Re: flex container and cards

Post 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
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: flex container and cards

Post 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
wb_user
 
 
Posts: 1099
Joined: Sun Jul 05, 2015 7:03 am

Re: flex container and cards

Post 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
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: flex container and cards

Post by Pablo »

This is possible if you give the cards a fixed width (via flex basis). Then for each breakpoint set different values.
wb_user
 
 
Posts: 1099
Joined: Sun Jul 05, 2015 7:03 am

Re: flex container and cards

Post 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?
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: flex container and cards

Post by Pablo »

I'm sorry, I cannot update your website for you. For me, this will also take a lot of time.
wb_user
 
 
Posts: 1099
Joined: Sun Jul 05, 2015 7:03 am

Re: flex container and cards

Post 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?
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: flex container and cards

Post 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'
wb_user
 
 
Posts: 1099
Joined: Sun Jul 05, 2015 7:03 am

Re: flex container and cards

Post 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
Post Reply