Header on mobile

Hi there,

1. Can you link me to your site so I can see what's causing the white space?

2. This topic should help: https://generatepress.com/forums/topic/mobile-friendly-header/#post-177641

Hi Tom
its http://www.cotswoldcolleague.co.uk

Any reason you have the description added but hidden? That's most likely a part of the cause.

Then you have negative margin added to the .inside-header class.

I would remove the site description, remove that negative margin and then add padding to the bottom of the header.

Thanks Tom.

I changed the negative margin , and added padding to the bottom.
The site title is Cotswold Colleague and the tagline is Resourceful Virtual Admin the Cotswolds, but if I unhide this it shows additionally above the logo.

I can't locate where the line showing below the logo is . Is site description somewhere else and not in site identity?

It looks like you have the site title and tagline in the logo itself, so it's probably ok just to remove the text versions in "Customize > Site Identity".

It looks a lot better on mobile for me now :)

Tom

I've taken this line out on the site identity but it's still showing? Is there site description somewhere else?

Can I add you as user and you could take a look?

Did you check the "Hide title" and "Hide tagline" checkboxes?

Sure, feel free to send it using the contact page: https://generatepress.com/contact/

Hi

Yes I have them checked and its still showing.

Sorry, not clear on how I give you access?

I think Ive added you as a User now- sorry being dumb and getting my head around this. Thanks for your patience

I don't think I received any details through the contact form?

sorry . I cant find the form? Other than account issue? Sorry I'm not understanding how do I do give you access? I added as a user ?

You can send me the URL, username and password through the account issue form :)

Tom

I managed to remove this which as in GP hooks. Thanks.

I trialled adding in the css from your note in point 2 above- social icon appearing above the logo but the social icon moved to nearly touching under the logo. On mobile the social icons are too big in comparison with my logo. On pc it looks fine.

Could you help with css for this ? many thanks

This CSS should make the icons smaller on mobile:

@media (max-width: 768px) {
    .icon-set-lsi_widget-6 a {
        font-size: 15px !important;
    }
}