Set minimum distance between objects inside flexbox

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
heynen
 
 
Posts: 105
Joined: Sun Dec 31, 2017 4:27 pm

Set minimum distance between objects inside flexbox

Post by heynen » Sat May 23, 2020 1:13 am

Dear all,

is it possible to set a minimum distance between items in a flexbox?

On broad screens, I want to have two items next to each other. The distance between them should ALWAYS be 20 Pixel. On smaller screens, the second item should move into the next row (this works already).

But: Before it moves, the two items are pushed closer together, so that the distance is less than 20 pixels. The seconde item only moves into the next row, once the distance is 0 pixels. I want it to move already when the distance is less than 20!

Any clever way to do this?

One solution is suggested here, but I don't know it this produces clean code:
https://stackoverflow.com/questions/206 ... xbox-items

Thanks!

Malte

User avatar
crispy68
 
 
Posts: 1052
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Set minimum distance between objects inside flexbox

Post by crispy68 » Sat May 23, 2020 2:08 am

Why not just add 20px margin to the right or left of one of the objects?

heynen
 
 
Posts: 105
Joined: Sun Dec 31, 2017 4:27 pm

Re: Set minimum distance between objects inside flexbox

Post by heynen » Sat May 23, 2020 9:55 am

Thank you very much! Cleaner and simpler. That works, the negative margin for the flexbox is not necessary.

There is still one thing that does not work: On a small screen with the firefox browser, my news items have no margin at the right of the screen. (see image).

Image

It should look the same as on the left (on the left, there is a nice margin between the left border of the screen and the left border of the news item).

You can see the layout here: https://www.freiblatt.de/test/

You can find the corresponding WBS-file here: https://www.freiblatt.de/test/download.html

Thank you very much in advance!

Malte

heynen
 
 
Posts: 105
Joined: Sun Dec 31, 2017 4:27 pm

Re: Set minimum distance between objects inside flexbox

Post by heynen » Sat May 23, 2020 7:54 pm

I have tested this a bit:

The Firefox mobile browser on small screens COMPLETELY ignores the margin at the right of the "news item" (like in the photo above), if you use ANY method to add some space at the left:

1) If you add a margin at the left oft the "news" item.
2) If you add some padding at the left of the FlexContainer (The "news items" are inside a Flexcontainer).
3) If you add a margin at the left of the Flexcontainer.

I also tried negative margin / padding, but nothing helped. Either, the mobile browser ignores the space at the right. Or, the spaces at the right and at the left are unequal. I found no solution.

Any help?

User avatar
Pablo
 
Posts: 21525
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Set minimum distance between objects inside flexbox

Post by Pablo » Sat May 23, 2020 8:21 pm

I do not think the margin is ignored.
However, the margin will be added to the width of the flex container (which is 100%).
So the total width will be 100% + margin. This is what you see in your browser.

heynen
 
 
Posts: 105
Joined: Sun Dec 31, 2017 4:27 pm

Re: Set minimum distance between objects inside flexbox

Post by heynen » Sat May 23, 2020 9:24 pm

Thanks! Yes this makes sense!

Still, the site is displayed correctly in the opera or "duckduckgo" mobile browsers.Is there any way to make this work in the mobile firefox browser as well?

There might be two possibilities:
a) Tell the browser, that the 100% should include the margin. Possible?
b) Find another way to keep the minimum distance between the objects inside the flexbox. Possible?

At the moment, any solution that works in firefox leads to errors in the other browsers.

heynen
 
 
Posts: 105
Joined: Sun Dec 31, 2017 4:27 pm

Re: Set minimum distance between objects inside flexbox

Post by heynen » Sat May 23, 2020 10:05 pm

Maybe I have to rethink my approach completely?

What I want to achieve is:

1) On Laptop Screens, the page should have two "news items" in each row. Both items should always have a distance of 20px
https://www.freiblatt.de/test/

The order of the news items must be:
1 2
3 4
5 6



2) On small screens, the "news items" should regroup like this.

1
2
3
4
5
6

They should be centered on the screen, and have a small margin (ideally 5-10 pixels) to the left AND right.

What I did:
I put the news items in a flex container.
I put that flex container inside a layout grid (with just 1 column).
I added "margin 10" to the news items
I added "gutter width 10" to the outer layout grid.

Correct?

User avatar
Pablo
 
Posts: 21525
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Set minimum distance between objects inside flexbox

Post by Pablo » Sun May 24, 2020 7:02 am

Firstly, I do not recommend to put a flex container or flex grid inside a layout grid.
Layout grid and flex box are two different layout concepts , they may conflict with each other.

To implement this layout, you may consider using cards. Then all; you will have to do is add a margin to the cards.

heynen
 
 
Posts: 105
Joined: Sun Dec 31, 2017 4:27 pm

Re: Set minimum distance between objects inside flexbox

Post by heynen » Sun May 24, 2020 11:15 am

Thank you Pablo, great idea! I am sure this generates much cleaner code. I was able to copy most of my design with cards.
I still need help.

This is as far as I got: https://www.freiblatt.de/b/cards.html

Three problems remaining:
1) The cards should keep their width of 500px all the time (this works), but they should shrink when the screen is narrower than 510px
2) Each card should link to an article (onclick)
3) The program puts all cards in one row. Once I have 10 or 20 articles, they would not fit on the screen any more. See photo:

Image

Thank you!
Last edited by heynen on Sun May 24, 2020 12:00 pm, edited 2 times in total.

User avatar
Pablo
 
Posts: 21525
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Set minimum distance between objects inside flexbox

Post by Pablo » Sun May 24, 2020 11:56 am

If you set the max width of the layout grid to 1000px (+ margin) then the cards will not get wider on large screens but shrink on smaller screens.

heynen
 
 
Posts: 105
Joined: Sun Dec 31, 2017 4:27 pm

Re: Set minimum distance between objects inside flexbox

Post by heynen » Sun May 24, 2020 12:04 pm

Thank you.
I have already set the maximum width of the card container to 1065.
But I also need to set a minimum width of 500px for the cards. Otherwise, there would be more than 2 cards in each row.

Everything works well, except for the view on screens that are less than 500px wide.

I tried to define a breakpoint. But it was not possible to change the custom style HTML code ONLY in one breakpoint (the changes would affect all breakpoints).

User avatar
Pablo
 
Posts: 21525
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Set minimum distance between objects inside flexbox

Post by Pablo » Sun May 24, 2020 1:09 pm

In an HTML object you can set the CSS for current breakpoint only.

heynen
 
 
Posts: 105
Joined: Sun Dec 31, 2017 4:27 pm

Re: Set minimum distance between objects inside flexbox

Post by heynen » Sun May 24, 2020 1:52 pm

So have can I solve my problems?

Three problems remaining:
1) The cards should keep their width of 500px all the time (this works already), but they should shrink when the screen is narrower than 510px
2) Each card should link to an article (onclick)
3) The program puts all cards in one row. Once I have 10 or 20 articles, they would not fit on the screen any more. See photo:

Image

User avatar
Pablo
 
Posts: 21525
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Set minimum distance between objects inside flexbox

Post by Pablo » Sun May 24, 2020 2:47 pm

In a layout grid you can add up to 12 columns. For example, one for each card.
The breakpoint determines when the layout will switch to stacked mode.

heynen
 
 
Posts: 105
Joined: Sun Dec 31, 2017 4:27 pm

Re: Set minimum distance between objects inside flexbox

Post by heynen » Sun May 24, 2020 2:54 pm

Are you talking about layout grid or card container? I would use layout grid, card container or flexbox, whatever is working.

Do not know if columns work for me. I will have maybe 40 news items in the end.
I need this behaviour for the news items:

Big screen:
1 2
3 4

Small screen:
1
2
3
4

For a card container, I could think of two solutions:
1) Add a breakpoint at 520px, and in that breakpoint set another minimum width for the cards (if there is any possibility to do this).
2) Add HTML code to the "card container", telling the container to only put 2 cards in each row.

Post Reply