NO BUG: Row-Gap on mobile on top of div instead of between flexboxes - footer

Bricks Version: 1.3.7
URL: https://bricks-lab.auster.net/

The defined linespace in div/flexbox between childs is put on top of flexbox, and not between the lines.

It shows correct in the editor, but not on frontend on iphone 13 pro max.
To make it more clear, i put the linespace now to 40px instead of 4px :wink:

See the 2 screenshots.

  1. Editor view

This is how it looks on iphone 13 pro max

Hi Joachim,

I believe you confuse line-height and row-gap :wink:

Best regards,
timmse

No, Stefan :wink:

Why should I confuse?

The footline is a container with 2 elements (menu + basictext) in it.
For desktop and tablet it is horizontal.
For Smartphones it is vertical.
And if I define a row-gap for smartphones then this means the distance between both elements.
In the editor it shows correct (vertical distance between elements)
On mobile devices it shows wrong (space above both elements not in between).

I have no clue what you mean with your comment…

Now I saw it, the subject of this ticket was wrong named :slight_smile:
Sorry for unwanted confusion…

Just for testing I put both elements into its own container/div to look, if this changes the result, but it does not. Same effect.

And its the same in Safari and Chrome on iOS iPhone 13promax

Hi Joachim,
sorry, I was confused by the title and ā€œlinespaceā€.

Unfortunately, the remote login is disabled again, so I can’t take a look at it :smirk:

Best regards,
timmse

User unblocked temporarily.
Please tell me, if you finished your work so I can block the user again.
Please make NO changes to the website.

Best regards
Joachim

Hi Joachim,

I’ve exported your template and imported it into my dev site and found the problem: the flex-direction reverse is causing the problem. I need to investigate a bit further, but in the meantime, you can change the order of your basic text element to 1 on mobile, which has the same effect as the column-reverse, except for it is working with gap :smiley:

Best regards,
timmse

I leave it as it is currently.
It is important that you know the problem and you are on the way to solve it :slight_smile:

I block your user. Let me know, if you need it again.

Hi Joachim,

As announced, I dug deeper and rebuilt the example without further ado in the simplest form in HTML/css: the result is the same, which shows that it is not a bricks bug.

Here is another example: https://wpt.live/css/css-flexbox/column-reverse-gap.html
Visit both examples on desktop and then on your smartphone in chrome or safari.

I’m sorry, but unfortunately, we can’t do anything about it. As long as CSS Grid is not implemented yet, I suggest the solution I have already proposed.

Have a lovely weekend,
timmse

1 Like