making the featured image smaller in Edin

  • Unknown's avatar
    eighty4degrees · Member ·

    Hi… I love the Edin theme, and am happy with all of it except that the featured image on each page is quite dominating. I’d like it to be narrower. Is there some place I can change this? I have the custom upgrade, if that will help.

    Thank you VERY much.
    amy

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

  • Unknown's avatar
    lizthefair · Member ·

    Hi Amy,

    This should make the main image on each page a little shorter–does that help?

    div.hero.with-featured-image{
    max-height: 200px;
}

    Note: I set the max height at 200px, but the CSS isn’t reducing the image down quite that much so if you want the images to be even smaller, try cropping the images a bit more before you up load them.

    If I’ve misunderstood, could you use this tool to take a screen shot at show me which images you are trying to change?

  • Unknown's avatar
    eighty4degrees · Member ·

    That’s exactly what I was talking about!

    I tried cropping the images before I uploaded them, but wordpress fits them to the height – which means vastly stretching them out.

    Now there’s another problem… now the title isn’t centered vertically over the feature image.

    So I’m going to work WITH the theme, and not against it. Can you possibly tell me how to change the alignment of the title over the featured image? I’d be happy with a left justified title, just a little below the top of the image, so it doesn’t matter how high the image is.

    Thank you SO much for your help!
    amy

  • Unknown's avatar
    lizthefair · Member ·

    @eighty4degrees If you make sure the images are very wide (at least 1300px, you should be able to crop the height–but if you are happy with what you have now, no need to worry about it :)

    I’m working on the alignment of the title. Its pretty easy to just move it up and over, but it causes problems on smaller screens, so I’ll be back as soon as I have a recommendation that works on different sized screens.

  • Unknown's avatar
    lizthefair · Member ·

    So I wasn’t able to move the title to the top, because it moves out of the header on small screens, but it does seem to work to move it to the bottom left. Let me know what you think of this:

    .page-title{
    margin-top: 7% !important;
    text-align: left !important;

}
.hero-wrapper{
    margin-left: 2% !important;
}
  • Unknown's avatar
    eighty4degrees · Member ·

    that’s a great idea. I see how I can alter it a little, too.

    I did try making the photos really wide and short, but it still stretched them to the height it wanted – leaving the sides of the very long photo hanging off the edge of the window into the abyss.

    but this works great for me. thank you so much for your help, it’s MUCH appreciated!

  • Unknown's avatar
    lizthefair · Member ·

    So glad you are happy with the results!

  • Unknown's avatar
    homekeep · Member ·

    Where do I paste this code?

  • The topic ‘making the featured image smaller in Edin’ is closed to new replies.