Top banner resizing of


#1

Hi, I was wondering if there is a way to decrease the height of the Hiero top banner please as it is too dominating on the screen and especially so on a cellphone.
Thanking you in advance
regards
Peter


#2

Hi Peter,

I have found your website link in another topic https://softawareview.com/ . Header size is determined buy content inside, and default title font is larger by default so only way to decrease header size is to decrease font. This can be applied globally, but it is better to first try to decrease it for smaller screens only with css code below:

@media screen and (max-width: 768px) {
    .site-title {
        font-size: 2.5em;
    }

    .site-description {
        font-size: 0.8em;
    }

    #main-navigation,
    .site-header {
        padding-top: 5px;
    }
}

In case that you want to apply this globally then add code without media rule like this:

.site-title {
    font-size: 2.5em;
}

.site-description {
    font-size: 0.8em;
}

#main-navigation,
.site-header {
    padding-top: 5px;
}

You can apply the code from Appearance > Customize > Additional CSS field.

Best Regards!


#3

Thanks for responding.
Makes sense what you say ill give it a go. Isn’t there the padding to
consider too?
Yeah ok i know nothing about coding but was ok with Dreamweaver but that
was years ago and ive forgotten much of it now cos i stopped working with
site design.


#4

Hi again,

Yes, I have already added padding in provided code (last line). It is decreased to 5px, and you can off course decrease it even more.

All the Best!


#5

You are very helpful many thanks 🖒.You mention rather try first code does
this relate to how it appears on mobile devices cos there are a few issues
how the site shows up on my S5 depending on screen orientation of course.
Looks ok on horizontal but banner way too dominating.


#6

Hi again,

First code is same except that it is using media rule and will be applied only on screens below 768px which is iPad in portrait orientation and will also be applied to smaller devices. Second code will be applied to all devices.

If you are concerned about landscape view, do not worry because almost every visit from hand held devices is in portrait orientation, and that is official statistics.

In case that you still want to decrease header size only way is to reduce values in provided code, but I don’t think that it should be smaller then it is currently.

Best Regards!


#7

Yes I hear and acknowledge your views. Thanks for being so helpful,
appreciate.
Regards
Peter