Center Text on Home Page

  • Author
    Posts
  • #2913569

    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.

    #2913784

    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!

    #2913825

    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.

    #2913838

    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;
    }

    #2913839

    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

    #2913841

    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;
    }

    #2913842

    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

    #2913845

    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;
    }

    #2913846

    Awesome, thanks!

    #2913847

    You are welcome.

The topic ‘Center Text on Home Page’ is closed to new replies.