Customize page cover height Casper theme

Hi! Sorry for asking this, but I have no idea how to customize the height of my cover page picture. Do anyone know the CSS code in Casper theme that I have to look for? I’ve tried adjusting the CSS codes that maybe related to it but the height of my cover page doesn’t change. I’m struggling so much. :melting_face:

Here is the cover page that I’m trying to adjust its height

Thanks for everyone helps in advance :slight_smile:

Check out this post :slight_smile:

1 Like

Thank you so much! It’s work now :)

Excuse me I would like to ask you little bit further. After I add .site-header-content { min-height: 620px!important; } The result seems like what I want but after I tried different screen sizes , it doesn’t act responsive like default. Is it associate with this in Index.hbs?

<div class="site-header-content{{#match @custom.publication_cover_style "Large"}} large{{/match}}"> {{#if @site.cover_image}} <img class="site-header-cover" srcset="{{img_url @site.cover_image size="s"}} 300w, {{img_url @site.cover_image size="m"}} 600w, {{img_url @site.cover_image size="l"}} 1000w, {{img_url @site.cover_image size="xl"}} 2000w" sizes="100vw" src="{{img_url @site.cover_image size="xl"}}" alt="my website" />

It doesn’t have to do with your markup; it’s more to do you with your CSS - if you’re saying min-height: 620px, that tells the engine that the height of the cover should be at least 620px, which is a lot on smaller screens! You might have to play around with it, but you can use vh (1% of the screen height) instead of px, or you can use media queries to set custom heights. You probably want to use min-height: unset and height, or max-height instead.