Header height

Mauer Themes Support Bild Header height

This topic contains 3 replies, has 2 voices, and was last updated by  Paul 1 year, 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1500

    herman
    Participant

    Hello,

    Is it possible to make the header images not that high?

    How can I add a css to specify the height of the header images?

    Kind regards,
    Herman

    #1503

    Paul
    Keymaster

    Hello Herman,

    The CSS rule for the entries thumbs’ height would be the following:

    .entry-full .entry-thumb,
    .single .entry-thumb {
    	height: 300px!important;
    }

    Feel free to replace 300 with you preferred value in pixels.

    You can add custom CSS with the Simple Custom CSS plugin. Once you install and activate it, in your Admin Panel please go to ‘Appearance’ > ‘Custom CSS’. There insert the code you see above and save.

    FYI:
    Out-of-the-box these images’ height is responsive and is dynamically controlled with the following function in the theme’s /js/general.js file:

    function adjustEntryThumbHeight() {
    	var width = $(".entry-thumb").width();
    	var ratio;
    	if ($(window).width() > 849) {ratio = 0.433;} else {ratio = 0.618;}
    	$(".entry-thumb").height(width * ratio);
    }

    In this function you can see the ratios with which the height of the images is calculated based on the width they occupy on the screen.

    So you may as well want to go about that the JS way rather than the CSS way.

    Regards,
    Paul

    #1519

    herman
    Participant

    Thanks Paul, the JS-solution did it, because the css-solution didn was that beautifull on mobile phones.

    Grtz,
    Herman

    #1529

    Paul
    Keymaster

    You’re welcome, Herman!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.