Docs

[knowmates]

Hi there,

I’m having problems getting the top bar responsive. The problem is that the p-info text is breaking on false positions (eg after the @symbol) and the responsivnes of the social icons is also not good. On different resolutions they break in the middle. Would be nice to have them in one row like for example on 545px width.

Could you help please?

[knowmates]

This reply has been marked as private.

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

@media (max-width: 767px){
    .x-topbar .x-social-global {
        clear: both;
    }
}
@media (max-width: 631px){
    .x-topbar .p-info span,
    .x-topbar .p-info a  {
        font-size: 12px !important;
    }
}
@media (max-width: 540px){
    .x-topbar .p-info span,
    .x-topbar .p-info a  {
        font-size: 10px !important;
    }
}
@media (max-width: 480px){
    .x-topbar .p-info span,
    .x-topbar .p-info a {
        font-size: 8px !important;
    }
}

Hope it helps 🙂

[knowmates]

Hi there,

helped 90% 🙂 please take a look at the social icons on 768 px width. Could assist one more time please?

Thank you.

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 820px){
.x-topbar .x-social-global {
    float: none;
    width: 100%;
    clear: both;
    text-align: center;
}

.x-topbar .p-info {
    float:none;
    text-align:center;
}
}

Hope that helps

[knowmates]

thank you!

[John Ezra]

You’re most welcome!

[Author]

Posts