Header/wrapper smaller on mobile device

Resolved barbara89
(@barbara89)

8 years, 2 months ago

Hi there!

I am working on a website and I am pretty satisfied, except for one thing.

If I open de site on a mobile device, the part where the logo + hamburger menu is, is really big. This way, a visiter does not see on which page he/she is because the whole screen is filled with menu and header image.

Can i make the grey part with logo+ hamburger menu smaller? or can I make the header image smaller? Or maybe even both?
(Or move the logo+menu down so it is on the image instead of a grey area above it?)

I think I need to do this with custom css?

Thanks in advance!

The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)

Kharis Sulistiyono
(@kharisblank)

8 years, 2 months ago

Hello there,

Visiting the link you’ve shared. the screen just displaying “This page isn’t working HTTP ERROR 500”. It looks like it’s invalid. Please share the valid one.

Regards,
Kharis

Thread Starter barbara89
(@barbara89)

8 years, 2 months ago

How odd! It was working yesterday just fine..!! https://www.eigenwijzrestaurant.nl

Is this working?

Thread Starter barbara89
(@barbara89)

8 years, 2 months ago

The site should be back in the air now! I had some troubles…. My host provider said something about malware….. Anyway, Fixed that!!

Hopefully someone can help me with tis issue now 🙂

Thread Starter barbara89
(@barbara89)

8 years, 1 month ago

Hi There!

I was really hoping to get some help here! I still hav not figured this out yet…!

Thanks in advance!

Roman Bondar
(@romanbon)

8 years, 1 month ago

Hello,

I noticed that your logo image has much top/bottom free space. Please try to crop it and see if it helps.

Kind Regards, Roman.

Thread Starter barbara89
(@barbara89)

8 years, 1 month ago

Hi Roman!

Thanks, This looks better in general, but I have the same problem still.

On my Iphone SE you can only see the logo, hamburger menu and header image. I really want to see the first title of the page as well.

Can I make the header image smaller on mobile devices? Or could there be another solution?

Thanks a lot!
Roman Bondar
(@romanbon)

8 years, 1 month ago
Hello, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.
```
@media (max-width: 1024px) {
    #masthead .site-logo,
    #masthead .header-wrap .col-md-4 {
        margin-bottom: 0;
    }

    #masthead {
        padding-top: 10px;
    }
}
```
Also you can edit the first row, expand Layout section, and select 45px for Mobile padding.

Kind Regards, Roman.
Thread Starter barbara89
(@barbara89)

8 years ago
PERFECT!

Thanks so much!

Both solutions combined work. Now it looks the way I wanted to. You are a genius Roman!
- This reply was modified 8 years ago by barbara89.
Roman Bondar
(@romanbon)

8 years ago

It’s great that solutions worked! You are welcome 🙂

Kind Regards, Roman.