Support » Plugin: Display Featured Image for Genesis » Featured Image, Page Title, and Body Text Spacing

  • Resolved pschulte

    (@pschulte)


    Hi Robin,

    First, thank you so much for creating this plugin! It has been extremely helpful.

    My question: When I upload a featured image 1) the page title is centered and located toward the bottom of the image. When I edit the code using Google Inspect, the results are fine. However, when I edit the code within the theme’s CSS editor, nothing happens. Any ideas? And 2) a large gap has appeared between the featured image and the body text/content. This only happened once I inserted a featured image. Any ideas?

    Here is the page I am working on. This will give you a visual: http://mofact.online/our-history/

    Thank you for your hard work with this plugin, and thank you for your help.

    Parker

    • This topic was modified 2 years, 4 months ago by  pschulte.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Robin Cornett

    (@littlerchicken)

    So, when you try to override most plugin styles within your theme, you will need to make your rules a bit more specific than the plugin does, because WordPress is loading the theme styles first. You can do this with what you’ve added to your theme by prefixing the .big-leader selector with div, like this:

    
    div.big-leader .entry-title.featured-image-overlay,
    div.big-leader .archive-title.featured-image-overlay {
        color: #fff; // you can remove this line because it's identical to the plugin
        text-align: left;
    }
    

    As for the large gap, that’s happening because your theme has a fixed header element and the .site-inner has a large margin applied to the top to compensate. The plugin adds a body class of .has-leader so you can deal with this pretty easily. Actually, the plugin already adds the necessary rule for the .site-inner element, which is just:

    
    .has-leader .site-inner {
        margin-top: 0;
    }
    

    However, it looks like your theme is adding an inline style to your .site-inner using JavaScript based on the height of the sticky header. You can try overriding the inline style by adding the same rule as above, but making it !important, but it might need more help than you can do with just CSS. (Note that the fixed header element is also affecting the .big-leader container, which is flush against the top of the page–you might consider adding a margin-top to it to bring it below the header.)

    Hope that helps get you started–

    Robin, thank you for the quick response. On top of that, thank you for not only providing me an answer to my question, but thank you for taking the time to thoroughly explain how, what, and why you did what you did.

    What you suggested I do was spot on! 🙂 The text left aligned, the spacing is now corrected, and I simply used height and line-height to adjust the vertical alignment.

    Thank you again for everything!

    Hello @littlerchicken!

    Thank you very much for creating this plugin! I do not know what would have happened to me without him;) It seems to me most useful.

    I have a little problem using it on my blog.

    On desktop screens or mobile phones with the big screen, it’s perfect, but on small phone screens, you lose a piece of the post title text at the top.

    I had to modify the CSS of the theme and give it a 0 margin on the main page of the theme, I do not know if that will be the fault maybe ..

    You can check it, for example in https://juanmaaranda.com/ganar-dinero-redes-sociales/

    I have checked the appearance on the screens in this tool https://www.responsinator.com/

    Thank you very much beforehand for your help. A hug from Spain.

    Plugin Author Robin Cornett

    (@littlerchicken)

    Juanma, I think it’s happening on large screens as well, but isn’t as noticeable because there is so much more room. The issue is that your .site-header element is in a fixed position, so the next element, in this case the featured image, is actually partially hidden behind it. You can ensure that the featured image isn’t hidden behind it by adding a margin to the top of it. This worked for me when I looked at your site:

    
    .big-leader {
    	margin-top: 80px;
    }
    

    I would try adding that to your theme and see if that helps.

    Also, in the future, instead of adding onto another user’s thread, please begin a new one. You can include a link to the first thread if it is relevant to your question, but it’s more helpful to start a new topic. Thanks–

    Thanks for responding so fast, Robin.

    He tried the solution he offered me, but unfortunately it does not work. Putting that margin to the class, the letters are still less seen and the size of the upper margin is enlarged, what happens is that it is enlarging the size of the menu band, but the title letters are still hidden below:

    I imagine it is a problem of the subject, which is quite bad. I’m having a lot of problems with it, because there are too many things that have changed a hand without knowing anything about programming.

    Thank you very much for trying to help me.

    A greeting.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Featured Image, Page Title, and Body Text Spacing’ is closed to new replies.