I have this flex container with two images with property setting as Nowrap and space around or between ...but when the browser resizing smaller then the two images become sticking together and lastly get pass over the left one.
As I have set Up with space around or between then isn't that suppose to give space between two images regardless of browser resizing?
Or I assume there is something wrong with my container set up r?
I am trying to give space between two images .
Please see at below:
https://www.×××.com/page1.html
Thanks for any guide.
Flex container sticking objects
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
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
Flex container sticking objects
Last edited by makros on Mon Mar 15, 2021 12:33 pm, edited 1 time in total.
Re: Flex container sticking objects
This is expected behavior because the images have a fixed size.
What you can do, it add a breakpoint (for example, at the point where the image 'touch' each other) and then use different flex box properties for image.
What you can do, it add a breakpoint (for example, at the point where the image 'touch' each other) and then use different flex box properties for image.
Re: Flex container sticking objects
Pablo I did everything and played with the hope to get the space when resizing at the breakpoints for small devices but with no success.
If you do not mind could you please take a look at the project and see what is wrong with it.
https://www.×××.com/index.wbs
Much appreciated.
I just keep the logo at the top to have a better view of two images at center.
Last edited by makros on Mon Mar 15, 2021 3:09 pm, edited 1 time in total.
Re: Flex container sticking objects
I have updated the project for you. Note however that you will have to learn how to do this yourself.
https://www.wysiwygwebbuilder.com/support/makros.zip
Notes:
- the default view should be the largest view. In this case, the 1280 breakpoint does not make any sense.
- when using flexible layouts, the 'center in browser' alignment should not be used.
- flexbox properties can be used to control the behavior of elements inside a flexbox container.
https://www.wysiwygwebbuilder.com/support/makros.zip
Notes:
- the default view should be the largest view. In this case, the 1280 breakpoint does not make any sense.
- when using flexible layouts, the 'center in browser' alignment should not be used.
- flexbox properties can be used to control the behavior of elements inside a flexbox container.
Re: Flex container sticking objects
Pablo Thanks a lot for updating
and this exactly what I was trying to achieve.
I am new to builder and trying to digging out more and more.
by the way, the flex-basis set up you used with % at breakpoints was very tricky and I am sure it would be taken me a year to figure it out to work for me but you save my life.
Thanks again

I am new to builder and trying to digging out more and more.
by the way, the flex-basis set up you used with % at breakpoints was very tricky and I am sure it would be taken me a year to figure it out to work for me but you save my life.
Thanks again