Mobile Site- One word spreading to two lines

• 

  jessicawhalenphotography · Member · May 31, 2016 at 6:52 pm

  • Copy link
  • Add topic to favorites

  When I go to https://searbuffalo.wordpress.com/contact-us/

  on my phone, the word “Contact” looks like this:
  CONTAC
  T

  But when I look at it on the mobile view online, it looks correct. I’ve looked from several different types of phones as well. Any assistance would be greatly appreciated!

  The blog I need help with is: (visible only to logged in users)

• 

  siobhyb · Member · Jun 1, 2016 at 12:13 pm

  • Copy link

  Hi there,

  Your theme breaks up the title in order to make it fit on mobile devices. You could workaround this by adding the following custom CSS that reduces the font size of the title, and therefore makes it fit nicely on one line:

  @media only screen and (max-width: 500px) {
  .wf-active #primary-header .entry-title {
  font-size: 40px;
  }
  }

  Hope that helps out!

• 

  jessicawhalenphotography · Member · Jun 20, 2016 at 11:24 pm

  • Copy link

  Hi! Thank you! This was the second issue that you helped me with, I greatly appreciate it. Back to the original, you helped me resize my image by creating it as a background image in CSS, but now it’s appearing like this:

  https://searbuffalo.wordpress.com/

  I’d like for it to appear more like this:
  http://rpmrestaurants.com/rpmsteak/chicago/

  So, I’d need to move the font over too perhaps, when using this particular photo, so that the words don’t blend in with the picture.

• 

  thesacredpath · Member · Jun 21, 2016 at 1:01 am

  • Copy link

  Hi, you can increase the bottom padding with the following to make it look more like the site you reference.

  #primary-header.has-background {
      padding-bottom: 140px;
  }