Dara: text cutting the featured image

  • Unknown's avatar
    kumaonvillage · Member ·

    Hello!

    I am using Dara, and would like to lower the page text body so that it does not cut off the lower part of the featured image. I have seen this topic discussed several times on the forum, such as:
    https://en.forums.wordpress.com/topic/dara-theme-body-text-cutting-into-featured-image/
    https://en.forums.wordpress.com/topic/trying-to-edit-daras-display-of-text-cutting-into-the-photo/

    I tried to apply the css code that was suggested respectively, but nothing works (to be precise: the featured image shows uncut on the customizer preview, but this is not reflected on the actual site, even after publishing). I checked with various browsers but all show the same.

    See for instance this page:

    Animations pédagogiques en classe

    Thanks in advance for your help! :-)

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

  • Unknown's avatar
    baldfreud · Member ·

    Hi,

    Do you mind sharing what code you were trying to use for the CSS?

    Have you tried this:

    .content-wrapper.with-featured-image {
    position: initial !important;
    padding-top: 100px;
}
  • Unknown's avatar
    kumaonvillage · Member ·

    Hi Baldfreud

    no I did not try the code you suggested, and youhoooo it’s working!!! :-D :-D :-D
    Amazing… thanks, and also for being so quick in responding!

    Just for info, I paste below the codes which I had tried and which did not work (I must say I am not very fluent with css, so I applied what I found on the net without knowing exactly what the code referred to).

    One more question: how do I increase the space between the featured image and the page text/title below?

    /* avoid text body to cut into featured image*/
    /* tentative 1

    @media     screen and (min-width: 768px) {
    .post-thumbnail + .entry-header {
    margin-top:20px;
    }
    .entry-body {
    margin-top: 3em;
    }
    }
    */
    /* tentative 2

    .content-wrapper.full-width.with-featured-image {
    margin: 0 4% 0;
    padding: 3.1em 3% 0;
    }
    */
    /*tentative 3

    @media     screen and (min-width: 768px) {
    .post-thumbnail + .entry-header {
    margin-top: 20px;
    }

    .entry-body {
    margin-top: 3em;
    }
    }
    */
    /* tentative 4

    @media     screen and (min-width: 768px) {
    .post-thumbnail + .entry-header {
    margin-top: 60px;
    }
    }
    */

  • Unknown's avatar
    baldfreud · Member ·

    Hi again,

    sorry for the late response. In order to have the text appear even lower, you would have to change the value of pixels next to padding-top. The higher you go the lower it will be. Now it is set to 100px but you can change it to 150px and so on until you are satisfied. Don’t forget to save your changes!

  • Unknown's avatar
    baldfreud · Member ·

    Also, if you want to learn more about CSS and are willing to invest some time into it then this place is a good start:

    https://www.w3schools.com/css/default.asp

  • Unknown's avatar
    kumaonvillage · Member ·

    Hi Baldfreud,

    It works! Thank you so much :) . Now I am really satisfied with the way the page looks.

    And great hint to the CSS tutorial, this is surely going to be useful!

  • The topic ‘Dara: text cutting the featured image’ is closed to new replies.