Can the topbar p-info be split onto two lines when viewed on a mobile device?

[core365]

Hi, I’m working on a site and wondered if it’s possible for the topbar p-info text to be split onto two lines when viewed on a mobile device? I’ve done a rough mock up to show you: (I’ll put the URL in a secure note as it’s on a temp link!)

Thanks!

[mldarshana]

Hi There @core365,

Thanks for writing in! Could you please try adding the following CSS rule into your X -> Theme Options -> CSS area and see if that helps.

@media (max-width:480px){
  .x-topbar .p-info {
    width: 100%;
    font-size: 14px;
    margin-right: 0;
  }
  .x-topbar .x-social-global {
    top: 0 !important;
    float: none;
  }
}

Thanks!

[core365]

Hi, thanks, but unfortunately it doesn’t split it over two lines.

Cheers

[nabeel]

Hey @core365,

It’s not easy to achieve this with CSS only. You need to restructure of HTML in order to do it. For example wrap the sentence in <span> tag which needs to be shown in the second line and then using CSS we can show it in second line. For example, you should have similar HTML markeup:

First line <span class="break-line">show in second line for mobile screens</span>

Then in small screens we can split it into two lines using CSS:

@media screen and (max-width: 767px) {
	.break-line {
		display: block;
	}
}

Hope this helps!

[core365]

Hi @Nabeel, that’s exactly how I wanted it, thank you so much!

Thank you, I really appreciate your time and help!

[friech]

We are delighted to assist you with this.

Cheers!