SOLVED: 1.4RC: Header IMG (Logo) is rendered down if container is set to width "auto)

Bricks Version: 1.4rc
Browser: Chrome 100

Header IMG (Logo) is rendered down if container is set to width "auto)

If I remove the “auto” for width in the DIV for header image, then the logo is displayed with full-size (300x54), but otherwise is rendered down to 209.89 or something.

After all these changes in the background I dont know, if this is a real bug or a design problem.

See screenshot (URL in screenhot)

Hi Joachim,
thanks for your report / question.

As far as I can see it is not a bug, but standard flexbox behavior. Flexbox decides in this case that your logo can get smaller (because the container width is auto and the width of the img element too).

You can prevent this by giving the image element a min-width of 300px.

Best regards,
timmse

Yes, in the first try I thought you are right :wink:

When I removed the container around the logo, it worked fine even without min-width.

But when I added a LINK to the logo, the same problem appeared again.
So I have to define again the min-width.

To me it seems a little complicated, if I have to always add a min-width to each image, just for the reason to be displayed correctly. I would assume when using an image, that the image is displayed in its defined size in the control (eg fullsize 300x34).

Maybe you check this again if this really is not a bug. I would define it as a bug.

Sidenote:
It might also be helpful after those changes with 1.4 that you make a help-article with all these standard settings and structure that each designer now has to follow. I think also about this topic with the new settings (with 100%) for containers as a block (first container, first child et.c)

Hi @timmse, hi @thomas,

once again, the issue with the resizing is only if the image has a LINK it points to.
If there is no link on the image, the image is displayed in its full size.

I recorded a video to illustrate my perception as a bug.

Hi Joachim,

Thank you for your video! I have watched it again and talked in detail with @thomas about it. We both think that it is not a bug, but still flexbox behavior that you can influence.

I’ve already given you the first option (apply a min-width to the image), but there are (at least) two more possibilities, which I summarized here in this video: https://vimeo.com/707465605/c29f514e2f

Attached also the header template from the video: Dropbox - template-auster-header-2022-05-08.json - Simplify your life

Best regards,
timmse

1 Like

OK, I understand it :slight_smile:

1 Like