Problem with Flex Container

[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

[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]

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.

[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]

Hi Pablo,

look at the screenshots. you know what i meen?
https://drive.google.com/drive/folders/ ... sp=sharing

[Pablo]

Did you do what I suggested in my previous reply?

[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.

[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.

[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.

[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...

[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.

[Pablo]

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

Are you using WB18?
Do you have an example project?

[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

[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]

I cant input a link for share screenshots

[Dali]

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

https://ibb.co/gWS2LYh
https://ibb.co/SshXhY1

[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]

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

https://ibb.co/gWS2LYh
https://ibb.co/SshXhY1

[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/