Archived topic

Header Widget Social Light Icons Mobile Align Centre

5 replies · Started by _blank on May 10, 2018

Viewing posts 1–6 of 6

May 10, 2018 at 12:59 pm #572720

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;
}
}

May 10, 2018 at 2:40 pm #572793

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;
    }
}

May 10, 2018 at 11:52 pm #572997

Hi Leo

If I remove this

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

Wont it be aligned right on the desktop version.

Thanks
Scott

May 11, 2018 at 2:25 am #573072

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;
    }
}

May 11, 2018 at 11:25 am #573503

Hi David

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

Regards
Scott

May 11, 2018 at 11:36 am #573511

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/

This archived topic is closed to new replies.

Start building better websites today.