[Resolved] Lightweight social icons positions on tablet and mobile

Home Forums Support Lightweight social icons positions on tablet and mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1063734
    Jorge

    Hi there,

    I can’t find a solution to my issue so I have to ask:

    1 – How can I position on the right side and aligned with the logo the icons on tablet?

    2 – How can I not show the icons on mobile, and just show them on the off-canvas panel?

    Thanks!

    #1063811
    David
    Staff
    Customer Support

    Hi there,

    1. try this CSS:

    @media (max-width: 768px) {
        .inside-header {
            display: flex;
            align-content: center;
        }
        .site-logo {
            order: -1;
            margin-right: auto;
        }
        .header-widget {
            margin-bottom: 0 !important;
            margin-right: 20px;
            position: relative;
            bottom: -5px;
        }
    }
    @media (max-width: 560px) {
        .header-widget {
            display: none;
        }
        .site-logo {
            margin-left: auto;
        }
    }

    2. In Appearance > Widgets you can add the Social Icons to the Off Canvas Widget area.

    #1063821
    Jorge

    Hi David,

    Thanks a lot! it works pretty well the only thing is that now the logo on mobile is not centered.

    How can I center it, please?

    Regards

    #1064124
    David
    Staff
    Customer Support

    I edited the CSS above to center logo on the smaller devices.

    #1064708
    Jorge

    Cool David! thanks, it works.

    Regards

    #1064733
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.