[Support request] Error in header widget…not using the full area allowed

[Doug]

I thought I just posted this but I can’t seem to find it anywhere.

For some reason if I use only 2 widgets in an Elementor section, when I put it in the header widget area it doesn’t expand the full width of the area.

If I put in more widgets it will expand. 2 widgets and it’s way too narrow.

https://kpow.wyohost.com/wp-content/uploads/Ok-with-4-columns-1.png

any ideas?
Thanks

[David]

Hi there,

the elementor widgets are collapsing in width, as they basically scale up / down to fit. You can define a width of the header widget to stop this from happening:

.header-widget {
    width: 50%; /* adjust to suit */
}

[Doug]

Scale up or down to fit what? What determines the scaling?

And I thought the header widget was already set at 50%?

[Doug]

That widget that got scaled down…is the same one that is in the top image where it is full width across,

[David]

The header widget only has a max-width property. So the container size is unknown.
Then elementor widgets are set to width: 50%; Secondly they use Flex, without changing the default flex prosperities which includes the element can Shrink.

So 50% of an unknown container size and able to shrink leads to this effect.

[Doug]

Thank you David for the explanation. Not quit sure I ‘fully’ understand, but about 80% of what you’ve outlined, I do. I’m not too familiar with Flex.

Thanks again.

[David]

Glad to be of ‘some’ help 🙂

[Author]

Posts