Reduce Height of Featured Image (Sela Theme) & Child Themes

  • Unknown's avatar
    careergururva · Member ·

    1) How do I reduce the height of the featured image on the Sela theme? I would like it to make it about 60% of it’s current size. The site is: http://www.careergururva.com

    Using dummy numbers, I’ve a lot of different CSS including:

    .featured-image {
    height: 400px:
    }

    2) I’m not clear when I should be using a child theme. Should I use a child theme anytime I change the CSS? Or is it for certain types of changes?

    Thanks!

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, the site you reference is hosted here at WordPress.com, so you cannot use a Child Theme. Child themes can only be created on self-hosted WordPress sites using the software from WordPress.org and hosted elsewhere.

    At WordPress.com, you have a number of customization options in the Customizer, including the ability to add custom CSS.

    If you can give me a bit more detail on where you want to change the height on featured images, I can be a bit more specific. In general, instead of a “height” I think it would be better to use a “max-height” so that the image can shrink in size on smaller screens, such as small tablets and phones.

  • Unknown's avatar
    careergururva · Member ·

    Thanks for the reply. I’ve been sick or I would have responded earlier.

    I want to decrease the height of main image (photo of keyword, glasses, notebook) to about 2/3 out what it is now.

    It there a list of the particular elements used in theme? I find myself guessing to figure what something is.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, CSS is theme specific, and although there may be some elements with common CSS classes, what is required to make a particular change is typically different. We have a support page on How to Find Your Theme’s CSS with some brief screencasts on how to use the web inspector built into your browser which should help.

    On the height of the featured image at the top of your main page, add the following and you can adjust the 400px value as desired. The unfortunate thing is that there is some horizontal stretching of the image, but due to the nature of the image, I don’t think it is an issue. Give it a try and see what you think. 

    .home .hero-content img {
    max-height: 400px;
}
  • The topic ‘Reduce Height of Featured Image (Sela Theme) & Child Themes’ is closed to new replies.