search

hlxsites / sunstar-foundation

Apache License 2.0
0 stars 2 forks source link

Hero Banner component #179

Closed ehrro closed 9 months ago

ehrro commented 9 months ago

There is a blank space in the hero banner component when the text is too small. The before element is inheriting its width from the parent so small text leads to this blank space section.

Like on this page: https://main--sunstar-foundation--hlxsites.hlx.live/en/education/perio-link-night

You can set min-width to 150% on the before element.

image

FYI: @bosschaert @sdmcraft

Not a blocker

jindaliiita commented 9 months ago

Didn't exactly got this issue. @ehrro Can you please mention screen size also because its not reproducible at my end.

ehrro commented 9 months ago

If you open the page you can see that there is a blank space gap on the left side:

image

The reason there is a gap here is because the width of the before blue element is based on it's parent and if the parent is not wide enough it won't fill the gap until the end.

jindaliiita commented 9 months ago

If you open the page you can see that there is a blank space gap on the left side:

image

The reason there is a gap here is because the width of the before blue element is based on it's parent and if the parent is not wide enough it won't fill the gap until the end.

For me its not reproducible on any screen size. Can you please share browser and screen size ?

ehrro commented 9 months ago

I am on 1920x1080.

ehrro commented 9 months ago

I believe if you zoom out you are able to reproduce the issue.