Page 1 of 1
Flex container sticking objects
Posted: Sun Mar 14, 2021 6:04 am
by makros
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.
Re: Flex container sticking objects
Posted: Sun Mar 14, 2021 8:20 am
by Pablo
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.
Re: Flex container sticking objects
Posted: Mon Mar 15, 2021 12:31 pm
by makros
Pablo wrote: Sun Mar 14, 2021 8:20 am
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 flexbox properties for image.
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.
Re: Flex container sticking objects
Posted: Mon Mar 15, 2021 1:27 pm
by Pablo
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.
Re: Flex container sticking objects
Posted: Mon Mar 15, 2021 3:08 pm
by makros
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