Need help? Check out our Support site, then


Center Text on Home Page

  1. lifeismeantforexploring
    Member

    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 lifeismeantforexploring.com.

  2. lifeismeantforexploring
    Member

    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!

  3. lifeismeantforexploring
    Member

    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.

  4. 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;
    }
  5. lifeismeantforexploring
    Member

    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

  6. 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;
    }
  7. lifeismeantforexploring
    Member

    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

  8. 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;
    }
  9. lifeismeantforexploring
    Member

    Awesome, thanks!

  10. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic