Cards in Flex Container shall not fill width when wraping

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
User avatar
Bluesman
 
 
Posts: 1116
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Cards in Flex Container shall not fill width when wraping

Post by Bluesman »

Hi Pablo or other :) Wonder how to make the one wraping card to not fill the width? Having four cards in a Flex Container I have made them wrap when entering a setted min width. But is it possible to set a max width for the card so it will not fill max width of the Flex container when wraping to next row?
"Make My Day"

See my Website
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Cards in Flex Container shall not fill width when wraping

Post by Pablo »

The flexbox properties can be used to control the size behavior of card and other elements inside a flex container.
User avatar
Bluesman
 
 
Posts: 1116
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Re: Cards in Flex Container shall not fill width when wraping

Post by Bluesman »

Hi Pablo, thanks for answering. I'm trying all settings (I think) but can't figure out how to not make the card that wraps down when shrinking the page to fill out the width?? Can you please give me a hint which setting will prevent the card from being full width.
Setted the min width so it wraps when the cards reach it, but must have a max width for the card that has wrapped down.
"Make My Day"

See my Website
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Cards in Flex Container shall not fill width when wraping

Post by Pablo »

I'm sorry, I do not have standard settings for hits. For me, this would also take some time to figure out.
Note that you can have different settings in breakpoints.
User avatar
Bluesman
 
 
Posts: 1116
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Re: Cards in Flex Container shall not fill width when wraping

Post by Bluesman »

Ok, gracias Pablo.
"Make My Day"

See my Website
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Cards in Flex Container shall not fill width when wraping

Post by crispy68 »

Hey bluesman,

to get your cards to work, just set the Flex Grow and Flex shrink to 0 and make the Flex basis box blank

Image

When I previewed it, once the max-width is reached it flips to the next line. I have them all centered. See below:

Image
User avatar
Bluesman
 
 
Posts: 1116
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Re: Cards in Flex Container shall not fill width when wraping

Post by Bluesman »

crispy68 wrote: Mon Nov 18, 2019 10:54 pm Hey bluesman,

to get your cards to work, just set the Flex Grow and Flex shrink to 0 and make the Flex basis box blank

Image

When I previewed it, once the max-width is reached it flips to the next line. I have them all centered. See below:

Image
Hi crispy, thanks for your solution... thought I tested that, but clearly not... :) Shall do an attempt now. Muchas Gracias.
"Make My Day"

See my Website
User avatar
Bluesman
 
 
Posts: 1116
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Re: Cards in Flex Container shall not fill width when wraping

Post by Bluesman »

Muchas Gracias crispy... it works with some fine tuning :D
"Make My Day"

See my Website
User avatar
Bluesman
 
 
Posts: 1116
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Re: Cards in Flex Container shall not fill width when wraping

Post by Bluesman »

crispy68 wrote: Mon Nov 18, 2019 10:54 pm Hey bluesman,

to get your cards to work, just set the Flex Grow and Flex shrink to 0 and make the Flex basis box blank
Hi again crispy... just a note :) Works good with the "Flex container" but I tried it with the new "Card container" and seams that you can not do this settings... when pressing OK it goes back to stnd settings :roll: As I told just a note... do you think this is a bug?
"Make My Day"

See my Website
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Cards in Flex Container shall not fill width when wraping

Post by Pablo »

When using a card container, the flex box settings of cards are automatically reset to the default values.
This is intentional behavior to simplify the usage of the card container.

Note that the card container is basically a flex container with lessor options. So, if you need more control then use the flex container instead.
User avatar
Bluesman
 
 
Posts: 1116
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Re: Cards in Flex Container shall not fill width when wraping

Post by Bluesman »

Pablo wrote: Tue Nov 19, 2019 2:06 pm When using a card container, the flex box settings of cards are automatically reset to the default values.
This is intentional behavior to simplify the usage of the card container.

Note that the card container is basically a flex container with lessor options. So, if you need more control then use the flex container instead.
Ok thanks Pablo. Was just a reflection. Though I think if the settings that works in the Flexbox Container should work in the Card Container (not be resetted) after closing (ok), you could take bennefit of the possibillity for the breakpoint setting in the "Card Container".
"Make My Day"

See my Website
chan2015
 
 
Posts: 20
Joined: Thu Nov 28, 2019 11:15 am

Re: Cards in Flex Container shall not fill width when wraping

Post by chan2015 »

I am trying out cards & flex container ... and I cannot find the "flexbox" in the toolbox or the flex settings inside a card.

Image
Image

I cannot find the place to set the card's width. When I drag a card inside a flex container, it will take full width ...
chan2015
 
 
Posts: 20
Joined: Thu Nov 28, 2019 11:15 am

Re: Cards in Flex Container shall not fill width when wraping

Post by chan2015 »

I found it after reading http://www.wysiwygwebbuilder.com/flexbox.html ... :)
I am hoping that I can place cards (each card contain an image of a product & its description) into the flex container ... so that at all viewports ... the cards automatically will rearrange to fit the viewport size without needing any breakpoints... let's see if this work.
Post Reply