Header size in the post pages

  • Author
  • #138187

    Original poster

    Hello, I am very dissapointed because I can not change the height of the header in the post page. The problem is that the style was made in HTML, so I can not modify it in CSS. It work well for vertical images but I use only horizontal images because my willing is to share the articles in facebook and facebook only work well with horizontal images for the main image. It would be great if you write the size of the header in CSS and not in HTML so that all the users like me can modify it for our requirements.

    Thank you very much,


    Original poster

    <header id=”primary-header” class=”entry-header primary-hentry has-featured-image loaded” style=”background-image: url("https://somoscinecom.files.wordpress.com/2018/12/dt.common.streams.StreamServer.jpg?w=1024&quot;); height: 568px; min-height: 568px;”>

    This is what I mean. As it is written in HTML style, we can not modify it in CSS. I just need to change the height.


    Theme Author

    Thank you for using the Hermes theme!

    The theme uses Javascript to calculate a height of the screen in single views. When the theme was initially built, a support for viewport units was not very popular yet. This is the reason why we’ve used a Javascript and inline CSS to set a height of the header section.

    Now, viewport units are well supported (92.9%: https://caniuse.com/#feat=viewport-units), so we are planning to drop Javascript calculation and use viewport units in the future releases.

    For now, you’ll need to use !important property to change the height of the header section in single views:

    #primary-header.has-featured-image {
        height: 200px !important;
        min-height: 200px !important;

    Hope this helps.


The topic ‘Header size in the post pages’ is closed to new replies.