[Resolved] Limit logo width/height

Home Forums Support [Resolved] Limit logo width/height

Home Forums Support Limit logo width/height

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #662165
    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 :)))

    GP Premium 1.7.2
    #662329
    David
    Staff
    Customer Support

    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;
        }
    }
    #662372
    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!

    #662390
    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!

    #662811
    Leo
    Staff
    Customer Support

    Any chance you can open separate topics for different questions?

    It will help us to keep track of the issues.

    Thanks!

    #663437
    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!

    #663496
    Leo
    Staff
    Customer Support
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.