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

Flex Container responsive design

Post by Dynonxp » Sat Jun 09, 2018 8:47 pm

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: 13058
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Flex Container responsive design

Post by Pablo » Sun Jun 10, 2018 7:04 am

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

Re: Flex Container responsive design

Post by Dynonxp » Sun Jun 10, 2018 4:54 pm

Ok, thank you very much for the solution!

Post Reply

Who is online

Users browsing this forum: No registered users and 3 guests