[Resolved] Header Widget Social Light Icons Mobile Align Centre

[_blank]

Hi There

I’d like to add some CSS to make the Header Widget area align centre at Mobile screen size.
I tried this code below but it’s floating over the logo.

/*Widget header Not working */

@media (max-width: 768px) {
.header-widget {
position: absolute;
left: 50%;
padding-bottom: 20px;
}
}

[Leo]

Hi there,

It should be center by default. It’s not working due to these CSS you’ve added:

.header-widget {
    float: left;
    max-width: 50%;
}

/*Widget header Not working */
@media (max-width: 768px) {
    .header-widget {
	position: absolute;
        left: 50%;
        padding-bottom: 20px;
    }
}

[_blank]

Hi Leo

If I remove this

.header-widget {
float: left;
max-width: 50%;
}

Wont it be aligned right on the desktop version.

Thanks
Scott

[David]

Hi Scott,

there isn’t enough room above the header for the icons. You can do this to center them and place them below

@media (max-width: 768px) {
    .header-widget {
        position: absolute;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        bottom: -3em;
    }
}

[_blank]

Hi David

Thanks for CSS, I’ll have a play around with the header height.

Regards
Scott

[Leo]

If you prefer your original CSS, you can wrap it in media query so it’s desktop only as well:
https://docs.generatepress.com/article/responsive-display/

[Author]

Posts