Center Text on Home Page

• 

  lifeismeantforexploring · Member · Apr 4, 2017 at 6:37 am

  • Copy link
  • Add topic to favorites

  Hey,

  I am hoping someone can help me center the text on our home page featured image across mobile and desktop, and when someone is logged into WP. Right now, it lands in a different location in each (half cut off when on mobile or logged in to WP). Any suggestions?

  Thanks in advance!
  TJ & Alli

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

• 

  lifeismeantforexploring · Member · Apr 4, 2017 at 8:08 pm

  • Copy link

  It also appears that this may be an issue across different browsers. For example, when logged in on Chrome vs. Explorer.

  Ideally, it would be great to have the text centered on the featured image across all devices.

  Thanks!

• 

  lifeismeantforexploring · Member · Apr 5, 2017 at 4:41 pm

  • Copy link

  The text we are referring to is “The best time to set off on an adventure was yesterday. The second best time is now!” That appears at the top when you first enter the site.

• 

  thesacredpath · Member · Apr 6, 2017 at 9:25 pm

  • Copy link

  Hi there, let’s start with this. Add to the bottom of your custom CSS.

  .home .content-caption .entry-content {
  	text-align: center;
  }
  .home .content-caption {
  	margin-left: auto;
  	margin-right: auto;
  	left: 0;
  	padding: 0 20px !important;
  }

• 

  lifeismeantforexploring · Member · Apr 6, 2017 at 11:30 pm

  • Copy link

  Wonderful! Thank you. Now we need to bring the text down on mobile because it is now completely blocked by the menu. Also, when you minimize your screen on any browser the text disappears behind the menu. Is there a way to just keep the text centered on (both vertically and horizontally)across any browser and screen size?

  Once again, we appreciate the help tremendously!

  TJ & Alli

• 

  thesacredpath · Member · Apr 7, 2017 at 4:35 am

  • Copy link

  Oh that’s weird. When I worked out the CSS, that did not happen. Add top and max-width declarations to this CSS rule (the last two items).

  .home .content-caption {
      margin-left: auto;
      margin-right: auto;
      left: 0;
      padding: 0 20px !important;
      top: 40%;
      max-width: 500px;
  }

• 

  lifeismeantforexploring · Member · Apr 7, 2017 at 5:11 am

  • Copy link

  You rock! This worked perfectly. One more small tweak we would like to make. If you look at the home page when logged in, the padding between the 2nd content block and our featured blog posts is slightly off. Is there a way to bring the blog posts down slightly for viewers who are logged in to WP? The padding is fine on all browsers and mobile when not logged in.

  Thanks!
  TJ & Alli

• 

  thesacredpath · Member · Apr 7, 2017 at 8:33 pm

  • Copy link

  Hi, in your min-width: 783px media query, this last rule is what is causing the issue.

  .logged-in.page .site {
  	margin-top:0;
  }

  The home page also has a page CSS class on it in the body html tag. Let’s modify the above rule in that query to exclude the home page, but let it apply to all other pages that have the page body CSS class.

  .logged-in.page:not(.home) .site {
  	margin-top:0;
  }

• 

  lifeismeantforexploring · Member · Apr 7, 2017 at 9:21 pm

  • Copy link

  Awesome, thanks!

• 

  thesacredpath · Member · Apr 8, 2017 at 5:24 am

  • Copy link

  You are welcome.