Moving text higher up the page so 'featured' image is not so deep

  • Unknown's avatar
    lifenutritionaustralia · Member ·

    Hi,

    I’m using the SELA theme and I’m finding that on all pages except for my home page that the feature image is too deep, meaning that my text for that page starts too far down the page. I want to bring the text box up so that it starts approximately half way down the image, rather than only just above the bottom. Any advice would be appreciated

    Regards – Carla

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

  • staff-jeanpierreac · Staff ·

    Hi there, Carla!

    Well, your text starts just a little bit above the bottom of your featured image IF your page is at least 1180px wide. In case it is narrower, it will start after that image. I assume you want to change your page behavior just in the first case.

    Right now you have a css definition saying you want your text -when there is a featured image- to start 4 times the size of your current text font before the end of the featured image, and to use a 165px margin to the left.

    This would be your current css statement: 

    @media screen and (min-width: 1180px)
.content-wrapper.with-featured-image {
    margin: -4em 0 0 165px;
}

    You can modify it by changing “-4em” and “165px” values to adjust them to your needs or likes. For instance, if you want your text to start a little bit early in the page, you can put “-10em”. You could also use pixels to fix this distance, and taking into account your featured images have 435px height, if you want your text box to start approximately half way down the image, you could use a value of -220px.

    So, you can use this piece of css magin to add to your custom css:

    @media screen and (min-width: 1180px)
.content-wrapper.with-featured-image {
    margin: -220px 0 0 165px;
}

    :)

    Hope this helps!

  • Unknown's avatar
    nomadademudanza · Member ·

    Hi there!!I am also trying to create my cover with the Sela theme and following this website: http://doncharisma.com/2015/04/08/getting-the-wordpress-sela-theme-to-look-like-the-demo/, it has been ‘pretty’ easy for someone like me with basic knowledge of html. However, I have a tiny problem, probably ‘silly’, but I really do not know how to solve it. Please, any help would be GREATLY appreciated :) My blog is: https://nomadademudanza.wordpress.com/ .I just would like to stick the image to the main menu (ust like in the example of the Sela theme), but I do not know how to erase the title ‘Home’ before the image, since I would like to keep it in the menu. Any solution??

    THANKS!!:)

  • staff-jeanpierreac · Staff ·

    Hola, Miriam.

    Well, any of your pages have a title on top (I mean in the editor). Your home page has a title: “Home”, and this is what you get. Have you tried to delete your “home” page title? :)

    Espero que esto te ayude. Ten buen finde. :)

  • Unknown's avatar
    nomadademudanza · Member ·

    Gracias!!Sí, probé eso, pero entonces en el menú en vez de ‘Home’ me aparece #3596 (SIN TÍTULO). Vale, justo se me acaba de ocurrir que igual podía cambiar el título del menú en la sección ‘Menús’, después de hacer lo que me dices y ha funcionado. ¡GENIAL!:) Muchas gracias!!Ahora solo me falta que la imagen se pegue al menú, en grande, como en el ejemplo del tema de Sela. Tiene 1180px como pone en las explicaciones de WordPress…¿alguna idea??

    Muchísimas gracias!!Y buen finde desde un París lluvioso!

  • staff-jeanpierreac · Staff ·

    Hi again.

    We should speak English here, as this is the English forum and this problem-answer could help someone else :)

    The key point is here:

    1. Create or edit a page, and assign it the Front Page Template from the Page Attributes box.
    2. Go to Settings → Reading and set “Front page displays” to “A static page.”
    3. Select the page created in Step One as “Front page,” and choose another page as “Posts page” to display your blog posts.

    https://wordpress.com/themes/sela/

    You should not need to change anything in the menu section. Home will point to your front page if you follow step 2.

    Hope this helps

  • Unknown's avatar
    nomadademudanza · Member ·

    Ups, sorry, I reexplain my problem then :). In the Sela theme example (https://wordpress.com/themes/sela/) the cover image is stuck to the menu, in my blog there is a blank between the menu and the image and the image looks smaller than the one in the example even though I used the recommended size. It is not a big issue, but I would be happy if my blog could be like the example, so any advice on how to erase the blank between the menu and the cover would be appreciated.

    Best, Miriam

  • Unknown's avatar
    thesacredpath · Member ·

    Miriam, open your front page in the page editor and remove the image from within the content area and set it as a Featured Image and it will go full width and to the top below the navigation.

  • Unknown's avatar
    nomadademudanza · Member ·

    Many thankd, thesacredpath!!Finally, I got it:) Have a wonderful day!

  • Unknown's avatar
    thesacredpath · Member ·

    Awesome, and you are welcome, and you too.

  • Unknown's avatar
    lifenutritionaustralia · Member ·

    Hi Raulanton,

    Apologies for the late reply – many thanks for your reply to my initial question. It is all a bit beyond me so I’m going to leave it as is as otherwise I fear I’ll stuff up other layouts unintentionally by fiddling around with something I don’t understand.

    Appreciate you taking the time to respond though with the answer

    Regards – Carla

  • The topic ‘Moving text higher up the page so 'featured' image is not so deep’ is closed to new replies.