header resizing

Hello sailpilot,

Add below css code into your current active child theme’s style.css file or you can add additional css option in theme customizer

.header-cover.section.bg-dark-light.no-padding {
    height: 300px;
}
.header.section {
    height: 300px;
}

Hope this will helps you.

Thanks.

Hi @sailpilot,

Go to Appearance → Customize → Additional CSS (the menu labels might be different in your language) and enter the following code:

@media ( min-height: 700px ) {
    
    .header {
        padding: 150px 0;
    }
}

Increase/decrease the value to increase/decrease the height of the header. Let me know if that does it.

— Anders

Thanks for both your suggestions

@addweb-solution-pvt-ltd the changes don’t work correctly on the iphone (image wrong size)

@anlino while the padding increases the image size on a pc id does not seem to affect the image on a mobile device (iphone)

Hi @sailpilot,

Add the following CSS (in addition to the CSS I posted earlier) to adjust the size on mobile:

@media ( max-height: 700px ) {
    
    .header {
        padding: 100px 0;
    }
}

— Anders

Thanks @anlino but that change didn’t have any impact on the iphone (6s)

@sailpilot Oops, sorry, change both of the ones I posted from min-height and max-height to min-width and max-width.

@anlino sorry to say that these changes also didn’t make a difference on the iphone

@sailpilot Replace them with the following:

@media ( min-width: 700px ) {
    
    .header {
        padding: 150px 0 !important;
    }
}

@media ( max-width: 700px ) {
    
    .header {
        padding: 100px 0 !important;
    }
}

• This reply was modified 5 years, 11 months ago by Anders Norén.

@anlino that worked.

Thank you, really appreciate it.