Single article / cover template mode

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #11272
    alex G
    Member

    hi,
    i’ve been trying to reduice the height of the cover bg color/image without success. i tried to modify the css file by adding a specific height :

    .cover-header-inner-wrapper
    .cover-header-inner
    .singular.template-cover

    it doesn’t change anything. how should i proceed ?

    thanks for your help
    alex

    #11273
    Andre
    Administrator

    Hi Alex,

    To adjust the custom header cover image height, it’s currently done from this:

    .custom-header .screen-height {
        min-height: 85vh;
    }

    You can change the value of the “vh” to what works best for you. Simply, copy the above code, paste it into your customizer’s Additional CSS tab and then change that value of 85 to be lower (if you want it to be less in height).

    Hope that helps 🙂
    Andre

    #11276
    alex G
    Member

    Hi Andre,
    Thanks for the quick reply. I copied the code in “CSS additionnel » as you said but it doesn’t seem to have any effect on my page.

    Here is the page I’m working on as an exemple :
    https://www.masscritic.fr/peut-on-enseigner-lesprit-critique/

    Thanks again for your help.
    Alex

    #11277
    alex G
    Member

    Hi Andre,
    i wanted it to be roughly half the current height.
    thanks
    alex

    #11278
    Andre
    Administrator

    I’m testing out a couple things…but try this:

    .cover-header.bg-image {
        height: 50vh;
    }
    #11279
    alex G
    Member

    thanks. it did work but now my title has disappeared. probably something to do with the fact that it’s half the size but from the bottom up where as the title is right in the middle.
    i can try to work on that.

    #11280
    Andre
    Administrator

    Right after that code I just gave you, add this part and see what happens:

    .screen-height {
    min-height: auto;
    }

    Basically, it would become:

    .cover-header.bg-image {
        height: 50vh;
    }
    .screen-height {
        min-height: auto;
    }
    #11281
    alex G
    Member

    unfortunately, it did not work. when i set the vh to 70 instead of 50, the title appears but not the meta tags below. it seems that the bottom half of the cover header is cut instead of half top and bottom.

    #11282
    Andre
    Administrator

    Hmm…this is what I am seeing where both of those codes are applied…see screenshot.

    Attachments:
    You must be logged in to view attached files.
    #11284
    alex G
    Member

    thanks a lot andre. it did work but not on firefox. when i checked the page on safari and google chrome, it looked fine. for some reason, on firefox it looks different.
    thanks anyway

    #11285
    Andre
    Administrator

    Odd….I just opened that page in Firefox and seems to be OK. Wonder if it’s a cache issue…
    I did find some other things that need some tweaking though in an update. For example, your quotes have the quote icon too high. Until I get this in an update, you can add this if you want:

    .wp-block-pullquote.is-style-solid-color::before {
        top: auto;
    }

    I will also look to add a cover image setting to adjust the height without doing code–perhaps a slider control in the customizer.

    #11286
    alex G
    Member

    great theme by the way. thanks a lot for your help.

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.