Reduce Featured image in Blog to half, and change font size

  • Author
    Posts
  • #110852

    biancahawk17
    Member

    Hi, I love the theme.
    I would like to customize a bit the blog post page and I would like to reduce / or even delete the top image of the blog post.
    Right now, on mobile it’s very big.

    How can I reduce a bit the font size on the blog post also?

    thanks!!

    The blog I need help with is biancahawk.com.

    #110946

    ricardpriet
    Theme Author

    Hi biancahawk17!

    Top image height is equal to mobile devices height. The design wants to show the image and when the user scroll the web, the text will appear.

    You can cahnge the height easily to 50% of window height (for example) adding this CSS:

    .silvio-single-bg-image {
        min-height: 50vh;
    }

    If you need more, change to 60, 70…or 40, 30 for less.

    Another option is that the image gets the min-height relative to the content that is on it (post title, categories and author…)

    For this, add the following:

    .silvio-single-bg-image {
        min-height: 0;
    }
    .silvio-single-bg-image > .container {
        padding-top: 20px;
        padding-bottom: 20px;
        position: relative;
        bottom: 0;
    }

    And finally, if you want to remove the image leaving a black background, add this:

    .silvio-single-bg-image {
        background-image: none !important;
        min-height: 0;
    }
    .silvio-single-bg-image > .container {
        padding-top: 20px;
        padding-bottom: 20px;
        position: relative;
        bottom: 0;
    }

    Thanks :)
    Ricardo P. from SiloCreativo

The topic ‘Reduce Featured image in Blog to half, and change font size’ is closed to new replies.