Topbar text formatting

Support
#1

I am trying to make the text in the topbar to text-align:center; in mobile view. The phone number is separate from the text on right. The css is listed below.

Please advise.

https://www.powellkc.com/

@media screen and (max-width: 480px) {
.right-topbar {
text-align: center;
}}

@media screen and (max-width: 480px) {
.left-topbar {
text-align: center;
}}

#2

Hello @kstidham,

Thanks for asking. :slight_smile:

Please add following CSS under X > Theme Options > CSS:



@media only screen and (max-width: 600px) {
    .right-topbar {
    float: none;
    text-align: center;
}

.left-topbar {
    float: none;
    text-align: center;
}
}

If you would like to explore CSS, please take a look at following resources:

Thanks.

#3

Thanks for your assistance. I tweaked things a little bit and it is working like I need it to for now. I have one more question. The tobar contains the text - Serving the Kansas City Area | Family Owned Since 1991 | Licensed and Insured.

Is there anyway to make this text go to as list when the page goes responsive…420 or smaller?

Serving the Kansas City Area
Family Owned Since 1991
Licensed and Insured

Right now it cuts it off in mid item, etc. I get CSS fairly well but I seem to struggle assigning the class in the CS element properties.

Please advise.

#4

Hello @kstidham,

Thanks for asking. :slight_smile:

I suggest you to change the topbar code with following:

<div class="left-topbar" style=""><span>Serving the Kansas City Area</span><span>Family Owned Since 1991</span><span>Licensed and Insured</span></div>

After that, add following CSS under X > Theme Options > CSS:


@media only screen and (max-width: 600px) {
    .left-topbar span {
    display: list-item;
    list-style-type: none;
}
}

Thanks.

#5

It does not seem to be working. Would you please take a look at it again and advise further?

Thank you.

#6

Hi There @kstidham

Could you please try adding the following CSS rule instead and see if that helps.

@media (max-width:480px) {
  .left-topbar span {
    width: 100% !important;
    display: block !important;
    font-size: 16px !important;
  }
}

Thanks!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.