Archived topic

Lightweight social icons positions on tablet and mobile

5 replies · Started by Jorge on November 15, 2019

Viewing posts 1–6 of 6

November 15, 2019 at 2:26 am #1063734

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!

November 15, 2019 at 3:39 am #1063811

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.

November 15, 2019 at 4:02 am #1063821

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

November 15, 2019 at 8:10 am #1064124

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

November 16, 2019 at 4:53 am #1064708

Cool David! thanks, it works.

Regards

November 16, 2019 at 5:33 am #1064733

You're welcome

This archived topic is closed to new replies.

Start building better websites today.