Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] Header Widget Social Light Icons Mobile Align Centre

Home Forums Support [Resolved] Header Widget Social Light Icons Mobile Align Centre

Home Forums Support Header Widget Social Light Icons Mobile Align Centre

  • This topic has 5 replies, 3 voices, and was last updated 3 years ago by Leo.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #572720
    mackiecompany

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

    GeneratePress 2.1.1
    #572793
    Leo
    Staff
    Customer Support

    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;
        }
    }
    #572997
    mackiecompany

    Hi Leo

    If I remove this

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

    Wont it be aligned right on the desktop version.

    Thanks
    Scott

    #573072
    David
    Staff
    Customer Support

    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;
        }
    }
    #573503
    mackiecompany

    Hi David

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

    Regards
    Scott

    #573511
    Leo
    Staff
    Customer Support

    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/

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.