Flex Container with cards issue

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: 687
Joined: Mon Feb 01, 2016 5:43 pm
Location: Ecuador
Contact:

Flex Container with cards issue

Post by Bluesman » Thu Jan 24, 2019 2:10 am

Hi. Playing with cards inside a Flex Container... Wonder if this behavior in WWB 14.3.1 is correct or I can prevent it in some way? Look at this screenshot... the cards I'm inserting to the Flex container continous out of the viewport to the right. When this happens I can't reach the cards that disapears to the right, but when published it works correct ??

Image



Look at this published example and it's ok.
https://www.chevere.ec/richy_flex_test/index.html
"Make My Day"

See my Website

User avatar
Pablo
 
Posts: 17973
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Flex Container with cards issue

Post by Pablo » Thu Jan 24, 2019 7:15 am

Maybe 'flex wrap' is set to 'no wrap'
Or maybe there is another conflict in your settings?

Note that I cannot see what you have done, based on the HTML code. I need the project file to say anything manful about this.

Related FAQ:
http://www.wysiwygwebbuilder.com/forum/ ... 10&t=82134

User avatar
Bluesman
 
 
Posts: 687
Joined: Mon Feb 01, 2016 5:43 pm
Location: Ecuador
Contact:

Re: Flex Container with cards issue

Post by Bluesman » Thu Jan 24, 2019 10:51 am

Pablo wrote:
Thu Jan 24, 2019 7:15 am
Maybe 'flex wrap' is set to 'no wrap'
Or maybe there is another conflict in your settings?

Note that I cannot see what you have done, based on the HTML code. I need the project file to say anything manful about this.

Related FAQ:
http://www.wysiwygwebbuilder.com/forum/ ... 10&t=82134
Hi Pablo... thanks for checking in to this issue. Here is the project file:
https://www.chevere.ec/web_storage/nett ... _pablo.wtp

1. make a Flex Container
2. Make product cards as in the project
3. Cards: Minihight 480, Minwidth: 230
4. Make: 12 and insert in the Flex Container
5. When more than 5 they disapears outside the viewport (page size) ?
"Make My Day"

See my Website

User avatar
Pablo
 
Posts: 17973
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Flex Container with cards issue

Post by Pablo » Thu Jan 24, 2019 12:22 pm

I am confused by your flexbox settings :?
Why did you use flexgrow: 4, flexshrink 4: flexbasis 0%, stretch?

User avatar
Bluesman
 
 
Posts: 687
Joined: Mon Feb 01, 2016 5:43 pm
Location: Ecuador
Contact:

Re: Flex Container with cards issue

Post by Bluesman » Thu Jan 24, 2019 12:31 pm

Pablo wrote:
Thu Jan 24, 2019 12:22 pm
I am confused by your flexbox settings :?
Why did you use flexgrow: 4, flexshrink 4: flexbasis 0%, stretch?
:? I tried a lot of settings for get rid of the problem... but you say... set this settings to standard will fix the issue?
"Make My Day"

See my Website

User avatar
Pablo
 
Posts: 17973
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Flex Container with cards issue

Post by Pablo » Thu Jan 24, 2019 12:39 pm

The settings do not make sense to me (and probably also not for the application).
I suggest to try:
flex grow: 1
flex shrink: 1
flex basis:

for all cards

User avatar
Bluesman
 
 
Posts: 687
Joined: Mon Feb 01, 2016 5:43 pm
Location: Ecuador
Contact:

Re: Flex Container with cards issue

Post by Bluesman » Thu Jan 24, 2019 12:55 pm

Pablo wrote:
Thu Jan 24, 2019 12:39 pm
The settings do not make sense to me (and probably also not for the application).
I suggest to try:
flex grow: 1
flex shrink: 1
flex basis:

for all cards
I did... and it corrected the issue. Think I was a little lost in the settings after a while :? But now it make sense. Gracias Pablo.
Sorry for the occupation of your time...
"Make My Day"

See my Website

Post Reply