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.
Here is the cover page that I’m trying to adjust its height
Thanks for everyone helps in advance
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.