Problem with Flex Container

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
Dali
 
 
Posts: 16
Joined: Wed Nov 23, 2022 10:57 pm

Problem with Flex Container

Post by Dali »

I've had problems with the flex container since version 18.0.2.
I created my website with WB17 and everything worked very well.
In WB18 specifying the height for flex containers does not work. In the breakpoints 360, 480 ..., the flex container remains minimal.
I am using the flex container as a "header". Here I insert cover pictures. They can no longer be adjusted in height.
Before that everything worked.
Look at my demo

https://drive.google.com/file/d/1lx9423 ... sp=sharing
User avatar
Pablo
 
Posts: 21574
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Problem with Flex Container

Post by Pablo »

Where in your demo do I need to look to see the problem?
Can you please be more specific?

For further details about how to share a project file, please see this FAQ:
https://www.wysiwygwebbuilder.com/forum ... 10&t=82134
Dali
 
 
Posts: 16
Joined: Wed Nov 23, 2022 10:57 pm

Re: Problem with Flex Container

Post by Dali »

Hi.
the problem is in the mobile view.
The header with image is not displayed at the set height.
It is only displayed minimally, so that nothing can be seen from the picture.
When I use the 360, 480 resolutions, you can't see the cover photo.

Sorry, my English is not good, i use Google Translater.
User avatar
Pablo
 
Posts: 21574
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Problem with Flex Container

Post by Pablo »

Unlike in previous versions of the software, in WWB18 you can set a different height mode in breakpoints.
In your breakpoints it is set to 'auto', so you will need to change this to 'fixed'.

Also note that you do not need this many breakpoints in flexible layouts.
Dali
 
 
Posts: 16
Joined: Wed Nov 23, 2022 10:57 pm

Re: Problem with Flex Container

Post by Dali »

Hi Pablo,

look at the screenshots. you know what i meen?
https://drive.google.com/drive/folders/ ... sp=sharing
User avatar
Pablo
 
Posts: 21574
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Problem with Flex Container

Post by Pablo »

Did you do what I suggested in my previous reply?
Dali
 
 
Posts: 16
Joined: Wed Nov 23, 2022 10:57 pm

Re: Problem with Flex Container

Post by Dali »

Yes, I have.
it does not change the height of the image in mobile view. Either it's set way too high or it's not visible.
When I enter the height, it only changes in the program, but in the browser, the cover image is way too tall.
User avatar
Pablo
 
Posts: 21574
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Problem with Flex Container

Post by Pablo »

Did you set height to 'fixed' in all breakpoints?
When I do this in your project this seems to work .

Can you share the updated project?
Also, can you remove all other elements from the page that are not relevant to your question, to prevent confusion.
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Problem with Flex Container

Post by crispy68 »

As pablo stated, the issue is you have the flex container (FlexContainer1) set to height = auto. When the height is set to 'auto', then it's the contents of the flex container that determine the height. Since you have nothing in the flex container and only top and bottom padding of 10px than that is all you are seeing is a 20px high flex container.

You need to change the height to fixed in all breakpoints including the default. When this is done, it works.

Also as a suggestion, I would set your content placeholder on the master page to "floating" since you are using a floating layout. Also, make sure to set your flex containers to full width = true. I'm not sure why you have a 768px and a 800px breakpoint. There is only a 32px difference between the two. The 800px is overkill and not needed.

Now what I do notice is, whatever height you set the flex container to in the default view is the same for all breakpoints.

@Pablo, not sure if this intended or not but fixed height is not responsive in BP's.

In place of the flex container, you could use a full width floating layer which the height is responsive in bp's.
User avatar
Pablo
 
Posts: 21574
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Problem with Flex Container

Post by Pablo »

@Pablo, not sure if this intended or not but fixed height is not responsive in BP's.
The height of a flex container can be different in breakpoints. But there may be exceptions, because there are so many possible combinations...
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Problem with Flex Container

Post by crispy68 »

Hey Pablo,

Unfortunately, I'm not able to get a flex container to have different heights in bp's. For example, if I create a few breakpoints and assign as the following:

default = 50vh
748 = 100vh
480 = 25vh
320 = 10vh

The result is in default it is 50vh and then each breakpoint it is setting the min-height = 0.
For fixed height, it is setting the height to the default value and not changing/adding the height in breakpoints.
User avatar
Pablo
 
Posts: 21574
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Problem with Flex Container

Post by Pablo »

It works for me.
https://www.wysiwygwebbuilder.com/suppo ... eight.html

Are you using WB18?
Do you have an example project?
Dali
 
 
Posts: 16
Joined: Wed Nov 23, 2022 10:57 pm

Re: Problem with Flex Container

Post by Dali »

I do not understand anything anymore. The WB 17 version was much simpler. I find the WB18 has more problems. Tried everything possible, but the height of the flex container cannot be adjusted. In the mobile version, the cover photo is always displayed in full height. See my demo project.
I don't understand these settings anymore either. See my screenshot

Demo WB Project https://drive.google.com/file/d/1lx9423 ... share_link
Screenshot Settings https://drive.google.com/file/d/1jPbs5U ... sp=sharing
User avatar
Pablo
 
Posts: 21574
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Problem with Flex Container

Post by Pablo »

I do not understand anything anymore. The WB 17 version was much simpler.
In WB17, the height property was not responsive. Many users have requested for this property to become responsive, so the value can now be different in breakpoints.

Your project works for me. The height can be set to a different value in the breakpoint.
What do I need to do to see the problem?
Dali
 
 
Posts: 16
Joined: Wed Nov 23, 2022 10:57 pm

Re: Problem with Flex Container

Post by Dali »

I cant input a link for share screenshots :(
Dali
 
 
Posts: 16
Joined: Wed Nov 23, 2022 10:57 pm

Re: Problem with Flex Container

Post by Dali »

Bitte schau dir den Screenshot an, ich hoffe du verstehst was ich meine.

https://ibb.co/gWS2LYh
https://ibb.co/SshXhY1
Last edited by Dali on Thu Dec 01, 2022 10:24 pm, edited 2 times in total.
User avatar
BaconFries
 
 
Posts: 5325
Joined: Thu Aug 16, 2007 7:32 pm

Re: Problem with Flex Container

Post by BaconFries »

I cant input a link for share screenshots :(
Uploading images to the forum is disabled. There is two ways to do so
1) Upload your image to your own host/server and provide a url or
2) Use the following https://imgbb.com/
Dali
 
 
Posts: 16
Joined: Wed Nov 23, 2022 10:57 pm

Re: Problem with Flex Container

Post by Dali »

please look at the screenshot, i hope you understand what i meen.

https://ibb.co/gWS2LYh
https://ibb.co/SshXhY1
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Problem with Flex Container

Post by crispy68 »

I downloaded your project and uploaded it. It seems to work correct for me on desktop and on my phone (use a real phone and not the browser interpretation of one). Does it work for you?

https://webbuildertemplates.com/demo/flex/
Post Reply