Title & Tag not displaying correctly on mobile sites

Hello @heathernicolesoprano,

as far as I can see, your header image is a little bit too thin. The recommendations are 1200×400, while yours is 1200×291. Anyways, if you upload your image again and crop it a little bit thicker, respectively accept the ratio WordPress suggests, everything should work fine.

I’ve also recognized, that the cancel-button of the search-bar has the wrong color. My fault ?? You can fix this easily, when you go to Appearance->customize-> Additional CSS and add

a.btn.btn-secondary.nav-search-submit {
	color: #ffffff;
}

In the next release it should be fixed.

I hope that helps ??

• This reply was modified 7 years, 3 months ago by cafeserendipity21.

Thanks @cafeserendipity21 – I did just as you suggested and it did make some difference. Now, in mobile, the title is mostly there (bottom of the second line of the title is cutting off), and the tagline is missing.

Hi @heathernicolesoprano,

to make this work, just add the following css-code to Appearance->customize->Additional CSS, like before. For sure you can play around with the values.

@media screen and (max-width: 576px)  {
  .site-info-wrapper .site-title {
    font-size: 1.5rem;
  } 
}

@media screen and (max-width: 768px)  { 
  .site-info-wrapper .site-description {
    display: inline-block !important;
    font-size: 1.00rem;
  }
}

The tagline deliberately disappears, when the screen is to small, but with display: inline-block !important; you can make it appear again.
You can also pack the styles into one breakpoint, like this:

@media screen and (max-width: 768px)  { 
  .site-info-wrapper .site-title {
    font-size: 1.5rem;
  } 
  .site-info-wrapper .site-description {
    display: inline-block !important;
    font-size: 1.00rem;
  }
}

Now it should work ??

Thank you! I fiddled with font size a bit and got them both on there!! Is there any way to decrease the amount of space between the title and tag on mobile?

Also, how can I adjust the font size on the title for non-mobile sites so that I can make it fit on a single line?

Your help is so greatly appreciated!!

Hi @heathernicolesoprano,

to change the font-size of the title add something like this:

.site-info-wrapper .site-title {
    font-size: 2.0rem;  
} 

 .site-info-wrapper .site-description {
    font-size: 1.0rem;  
} 

The upper one is for the title, the lower one for the description. You can also fiddle around with the padding values.

.site-info-wrapper .site-title {
    font-size: 2.0rem; 
    padding: .3rem 3rem !important;
}
 .site-info-wrapper .site-description {
    font-size: 1.0rem;  
    padding: .3rem 3rem !important;
} 

To decrease the amount of space between the title and tag on mobile add margin-bottom to the styles you added before, i.e.:

@media screen and (max-width: 576px)  {
  .site-info-wrapper .site-title {
    font-size: 2.0rem; 
    margin-bottom: 0;
  } 
}

Maybe you’d have to change the font-size here as well. Same here, you can play around with the values, like 2px, 3px, .2rem …

Hope that helps ??

@cafeserendipity21 that worked beautifully. THANK YOU!!!!

Heather