Docs

[gobeyondesign]

polaris.dance

When I look at the site in mobile view the css I add in the Customizer is not working. The phone number in the top bar isn’t resizing and I also tried to get the text to wrap so that the phone number maybe shows up on a second line and that didn’t work.

Any ideas to fix please?

@media (max-width: 979px) {
.x-topbar p.p-info {
font-size: 16px; /*Change to your preferred font size*/
text-align: right;
}
.x-navbar-inner {
min-height: 0;
}
.x-navbar-inner:after {
display: table;
clear: both;
}
.x-navbar .x-brand {
width: 350px;
height: 106px;
background-size: contain;
margin-bottom: 20px;
margin-top: 10px;
}
@media (max-width: 480px)
{
.x-topbar p.p-info {
font-size: 16px; /*Change to your preferred font size*/
text-align: center;
margin-top: -5px;
}
}
@media (max-width: 767px) {
.x-topbar p.p-info {
background-color: #253c80;
}
}

[Christopher]

Hi there,

Please close curly bracket for following block of code :

@media (max-width: 979px) {
.x-topbar p.p-info {
font-size: 16px; /*Change to your preferred font size*/
text-align: right;
}

Hope it helps.

[gobeyondesign]

This reply has been marked as private.

[Christian]

This block of media query in your CSS is not closed

@media (max-width: 979px) {
.x-topbar p.p-info {
	font-size: 12px; /*Change to your preferred font size*/
	text-align: right;
}
.x-navbar-inner {
	min-height: 0;
}
.x-navbar-inner:after {
display: table;
clear: both;
}
.x-navbar .x-brand {
width: 350px;
height: 106px;
background-size: contain;
margin-bottom: 20px;
margin-top: 10px;
}

Please add a closing bracket }

Thanks.

[gobeyondesign]

Still not working. 🙁

[Rue Nel]

Hello There,

Thanks for writing in! To resolve your issue, please update first the contents of your topbar. By default, the topbar content is being wrap by a p tag. So it is apparent that your content is invalid. Please make use of this code instead:

<span style="font-size: 24px; color: white; font-style: italic; font-weight: bold; text-align: right;">For More Information Call: 540-374-5678</span>

And since you have an inline css in the code above, you will need to update your @media css blocks. You have to add !important to the code so that the inline css which is 24 will be overridden. For example;

@media (max-width: 480px){
  .x-topbar p.p-info {
    font-size: 12px !important; /*Change to your preferred font size*/
    text-align: center;   
    margin-top: -5px;
  }
}

Hope this helps.

[Author]

Posts