How to increase size of Header section for responsive layout

mberwing

Hello,
how can we increase the size of Header section for responsive layout 'Phone' ?
Our site logo is cut and not visible with its complete size.

No change on other layouts but just for Phone.

saguaros

Hello

You can try with this custom CSS rule:

@media (max-width: 767.98px) {
    .t4-header .header-block {
        height: 150px !important;
    }
    .t4-header {
        min-height: 150px !important;
    }
}

mberwing

Hello,

perfect....this is working great !!!!

Thanks a lot for the great support as always ....appreciated.

Regards
Markus

mberwing

Hello,

I just checked the Tablet view of our site on the iPAD and the logo is being cut and not visible entirely while all is fine on the mobile.

May I kindly ask for your valuable support another time please.

We need to adjust the size of Header section for responsive layout 'Tablet' too,

Desktop is perfect

Regards
Markus

saguaros

HI Markus,

Could you check it now?

mberwing

Hi,

everything is fine now....
I have added myself this morning an extended instruction:

/* Smartphones */
@media (max-width: 767.98px) {
.t4-header .header-block {
height: 150px !important;
}
.t4-header {
min-height: 150px !important;
}
}

/* Tablets (iPad Hoch- & Querformat) /
@media (min-width: 768px) and (max-width: 991.98px) {
.t4-header .header-block {
height: 160px !important;
}
.t4-header {
min-height: 160px !important;
}
.t4-header .logo img {
max-height: 100px !important; / ggf. anpassen /
}
.t4-offcanvas-toggle {
margin-right: 10px !important; / Platz für Menü-Button */
}
}

We can close the case now....all is fine

Thanks !

Regards
Markus

saguaros

Glad to hear that 😉