Spooky ghost margin on <768 breakpoint

Bugs
1

Bricks Version: Latest
Browser: Chrome latest
OS: Windows
URL: https://www.jacobil.com/

Why does this logo element lose it’s center aligned cross axis (well it’s off center) on the <768 width breakpoint?

hmmm
hmmm785×95 4.95 KB

View @ https://www.jacobil.com/

Putting the logo in a container with 100% height with a centered main axis reveals a small top-margin that isn’t reflected anywhere else in the builder or with the chrome inspection tool 🥴

ooff

A-tag is looking all funky — seems like like it might be what’s being centered around — although on higher breakpoints all the way to desktop the a-tag is just as funky looking with no effect on centering 🤷

atag

It would seem that the logo element is somehow tied to the image on the left rather than the parent element.

2

Hello @Fynbo ,

I believe that “ghost” margin is actually your Font Size of your Logo element.

image
image1920×1095 177 KB

3

Perhaps this can be another feature request or bug @timmse ?

I am not sure, but this doesn’t seem right if it’s correct and @Fynbo confirms it.

If a logo image or SVG is selected, the font should no longer be set on that element, is it not?

Or perhaps it’s still needed for Fallback reasons. :thinking: Not sure about this.

4

The font looks the same above the 768px width, yet the centering works. It specifically breaks at the <768px breakpoint. The ONLY style being applied by an outside force is the basic official Bricks breakpoint media queries, as far as I can tell (flex-wrap).

5

Just re-tested and the Font Size also causes the layout to shift,- the ghost margin I believe,- even on higher resolutions. So it’s centered on higher resolution just because of the Font size :slight_smile:

Once you reduce the height of the image on the left it seems to also resize the container on the right.

So perhaps there are 2 problems? 1 with the Font size and 1 with how you arranged the containers there?

I never tried to do such a layout before, with an image larger then the background. Can you share how the structure panel looks like in this case?

6

Hi Christian & Cristian,

There is a tiny “gap” below the logo caused by the font settings, but that does not cause the jumping, as you can see here: https://vimeo.com/660863535/1b6439625b

The logo image and the logo element are wrapped in containers. So the align-items: center on the outer container centers the containers, and the container that contains the logo element (Jacobil Bosch car Service) orients itself on the image element container, which changes. And this causes the jump, I guess. It’s hard to explain, so I hope you get what I mean :sweat_smile:

I would also change the general structure. For example, empty containers to create spacing are not quite as lovely. So instead, I would work with margins. Would you please look at this template to understand what I mean?

Best regards,
timmse

7

@timmse
The three main containers — top, beam and bottom — are all meant to contain elements of their own.

Top container will have quick access contact information, while the bottom container will contain the actual menu (on desktop). They’re not there to create space (otherwise margins of course are the way to go). I simply stopped in my tracks as I hit the snatch.

I only later wrapped the SVGs in containers, just to see if the issue persisted, which it does. To avoid confusion, I’ve now removed the wrapping containers and filled in the blanks @ https://www.jacobil.com/ — as you can see, the SVG is still aligning itself according to the image rather than adhering to align-items: center.

I’ve built this exact structure for many Bosch Car Service repair shops, in everything from Oxygen to even Divi (yikes) — this only happens with Bricks; surely it’s unintended? :thinking:

Here’s the structure panel:
struc

8

@timmse

See here how the logo element (and image element — i checked) is somehow bound to the neighbouring element even if the parent element has been set to align-items: center (or “Align Cross Axis” in the builder): https://photos.app.goo.gl/KCG362i7gdXHYvcU6

I tried with PNGs as well, just to make sure SVGs weren’t the issue. Issue persist regardless of image type.

9

When you

root {
  align-self: end;
}

the logo element, it clearly shows that the overflowing image is increasing the height of the parent container — this happens even with the container’s max-height set to 60px (matching the height set in the builder).

align self
align self1502×468 26.7 KB

10

Ah, ok, I see. Overall, the behavior is bizarre…

Please add this custom CSS and let me know if it helps:

@media (max-width: 767px) {
  .bricks-element-logo {
    font: unset;
  }
}
11

Indeed — that fixed it :sweat_smile:

I’m really confused as to how this only happens past that specific breakpoint, while desktop and <992 is unaffected :woozy_face:

12

@timmse

Yikes, strike that. Unsetting the font fixes the issue only in the builder, while the front end still has the jump. (Cache cleared)

13

Did you know that you can edit your posts (clicking the little pen icon below the text)? :sweat_smile:
Try to increase the specificity by adding the ID:

@media (max-width: 767px) {
  #bricks-element-fauayk.bricks-element-logo {
    font: unset;
  }
}

Overall, it’s really strange. I will add it to our ToDo list for some further investigation on this.

1 Like
14

Increasing specificity fixed it on the front end :ok_hand:
Apologies for spamming replies :upside_down_face:
I’ll stick with this temporary fix in the meantime.

1 Like