Center topbar text on mobile and right side on desktop

[shawinglasgow]

HI, Thanks for great support. I have mysef ina bit of a muddle.
On my site https://glacierwatersystems.com/ I want my top bar text to be right aligned on desktop devices but center aligned on mobile devices.

Currently I have this in my Global CSS
p-info a {font-size: 2.1em; text-align: right !important;}
.x-topbar .x-social-global {display: none;}
.x-topbar .p-info {
float: right;
}
.entry-footer.cf
{
display:none !important;
}

and this in my top bar Theme Options:
028 2589 0000
- sales@glacierwatersystems.com

My problem is on mobile devices, it doesn’t do this for all mobile pages. ie, Home page the text isn’t adjusted small enough whilst the mobile version of replacement water filters is adjusted?

Thank You for your help

[tristup]

Hi Gareth,

Thanks for reaching out.
To make the text in center only in the mobile you need to add the following code for the specific breakpoints. You need to add the code to the Theme Options > CSS also you may need to adjust the breakpoint size as per your need. To know the different breakpoints of devices you can go through this article: https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp

@media(max-width: 980px) 
{
    .x-topbar .p-info 
    {
        float: none;
        text-align: center;
    }
}

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it. Further customization should be directed to a third-party developer or you can avail One, where we answer the questions beyond normal theme support.

Thanks