Flex container sticking objects

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
makros
 
 
Posts: 64
Joined: Tue Mar 09, 2021 2:31 am

Flex container sticking objects

Post 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.
Last edited by makros on Mon Mar 15, 2021 12:33 pm, edited 1 time in total.
User avatar
Pablo
 
Posts: 21572
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Flex container sticking objects

Post 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.
makros
 
 
Posts: 64
Joined: Tue Mar 09, 2021 2:31 am

Re: Flex container sticking objects

Post 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.
Last edited by makros on Mon Mar 15, 2021 3:09 pm, edited 1 time in total.
User avatar
Pablo
 
Posts: 21572
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Flex container sticking objects

Post 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.
makros
 
 
Posts: 64
Joined: Tue Mar 09, 2021 2:31 am

Re: Flex container sticking objects

Post by makros »

Pablo Thanks a lot for updating :D 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
Post Reply