Flex Container responsive design

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
Dynonxp
 
 
Posts: 14
Joined: Sat Jun 09, 2018 8:16 pm

Flex Container responsive design

Post by Dynonxp »

I have recognized a Problem by using of FlexBox Container and responsive design. In the WB version 12.5.2 I used the FlexBox Container with the setting: General -> Miscellaneous -> Size -> viewport height - and everything was Ok.

After the migration to WB 14 – it is not working properly (FlexBox does not cover the whole viewport and the setting: General -> Miscellaneous -> Height -> 100vh is ignored). I made a small research and found out, that without responsive design (break points) it works properly. After adding some breakpoints - WB generates in CCS for these sections “min-height: 0; instead of min-height: 100vh; which would be probably correct.

What I am doing wrong please?
User avatar
Pablo
 
Posts: 21569
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Flex Container responsive design

Post by Pablo »

WB generates in CCS for these sections “min-height: 0; instead of min-height: 100vh; which would be probably correct.
The reason why this was added is because in most cases full height is not desired on smaller screens. The content may be taller than viewport in which case it would be clipped or overlap other objects.
So, this is an intentional change, after feedback from users.

If you want to overwrite this behavior then you can add the following code between the head tags of the page HTML:

Code: Select all

<style>
#FlexContainer1
{
   min-height: 100vh !important;
}
</style>
Dynonxp
 
 
Posts: 14
Joined: Sat Jun 09, 2018 8:16 pm

Re: Flex Container responsive design

Post by Dynonxp »

Ok, thank you very much for the solution!
cesmarvas
 
 
Posts: 2
Joined: Sun May 31, 2020 11:54 pm

Re: Flex Container responsive design

Post by cesmarvas »

Hola Pablo.


You can add an option (check) if we want to use 100vh on all screen sizes.

It would be very useful.

Thank you
Post Reply