Support » Plugin: Display Featured Image for Genesis » Align the title to main body/width of website

  • Hi there,

    I’ve been trying to fiddle with my CSS for a while, but I’m really struggling to align my title (within the featured image) to the body of the website — i.e. from left paragraph to right of the sidebar.

    Currently, it’s stretching to full width and while I can add paddings, they’ll look different based on mobile/tablet/desktop browsers.

    Any help would be appreciated!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Robin Cornett

    (@littlerchicken)

    I think this is doable with a slightly different approach than what I would normally do (which is to set a max-width on the .big-leader .wrap to match the rest of your site, but I see you’re using that for an overlay, so it needs to stay at the 100% you’ve already picked).

    Instead, you can modify the CSS you’ve already put into your custom CSS with something like this:

    
    .big-leader .entry-title.featured-image-overlay,
    .big-leader .archive-title.featured-image-overlay {
        font-size: 3em;
        color: #fff;
        text-align: left;
        text-shadow: 0px 0px 30px rgba(0,0,0,0.8);
        /* Make these changes: */
        max-width: 1280px;
        padding: 0 60px;
        margin: 0 auto 10px;
    }
    

    This is for desktop/large screen sizes–you’ll need to make corresponding changes for whatever media queries you have set. You’ll see that I just changed the max-width of the heading to match your .site-inner, and then added the same amount of padding that your content has to bring everything in line with your text. The margin needs to be set as well so that the whole h1 element centers when it is not the full width of the parent element. And again, you’ll need to make similar adjustments for whatever media queries you have set, but hopefully, this will get you started.

    Robin, you legend. Thanks so much!

    I’ve got a lot to learn when it comes to CSS 🙂

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.