[Resolved] Limit logo width/height

[Warner]

Hi,

I’m trying to implement the basics with GP Premium and I’m a bit stuck.

I have created a ‘merged’ header (by creating a ‘Header Element’) and I want to limit the width of the site logo. Preferably I would not upload a smaller version of the logo, because if I make it any smaller it will become very unsharp.

I know that using SVG will solve the sharpness issue, but also in that case I want to control the height/width of the logo.

Please help :)))

[David]

Hi there,

you can use this CSS to resize the logo:

.site-logo {
    width: 300px;
}

/* Mobile size and to center it in the header - adjust accordingly */
@media (max-width: 768px) {
    .site-logo {
        width: 200px;
    }
    .inside-header {
        text-align: center;
    }
}

[Warner]

Hi!

Ok that great, thanks!

Actually, it seems I need to max-width everywhere (since the sticky header logo gets deformed otherwise).

Also, I don’t seem to manage to ‘override’ with

@media (max-width)... </blockquote>

so I used

@media (min-width: 1025px) {
    .site-logo {
        max-width: 325px;
    }
    .inside-header {
        text-align: left;
    }
}

/* Mobile size and to center it in the header - adjust accordingly */
@media (max-width: 1024px) {
    .site-logo {
        max-width: 300px;
    }
    .inside-header {
        text-align: left;
    }
}

One more question: how do I now move the menu button on the mobile version to the right of the logo? For now it’s stuck right under the logo, where it’s taking up precious space 😉

Thanks again!

[Warner]

Sorry.. one more thing (after that I’ll leave you alone..)

The layout in Mobile seems to be having some problems (that don’t show up in the preview):

1. Sticky Header had the first 10 or so pixels cut of in Chrome/Android
– when it first appears when scrolling down
– when it is sticking to the top when scrolling up
– (when scrolling down it is shown correctly)
– (in firefox for mobile it is shown correctly)

2. The general layout seems to be a few pixels too wide (in Chrome/Android and Firefox/Android). So I can scroll a few pixels to the right..

Are there solutions for these issues that you know of?

Thanks!

[Leo]

Any chance you can open separate topics for different questions?

It will help us to keep track of the issues.

Thanks!

[Warner]

Hi again,

during the morning hours in Europe (when you were sound asleep I hope) I solved most of the issues.

Thanks for your help!

[Leo]

No problem 🙂

[Author]

Posts