[Resolved] Header not viewing correctly on laptop screen

Home Forums Support Header not viewing correctly on laptop screen

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #330329
    johnno43

    Hi Guys

    You’ve helped me before on one of my clients sites http://www.alexandrahazard-soprano.com I’ve got the site title inline with the menu and 2 different fonts in the title. It looks fine on a normal monitor but when viewed on a laptop they separate and the menu drops below.
    Is there a way to stop this from happening at all please?

    John

    P.S im using Elementor if that helps

    GP Premium 1.3
    #330450
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    This happens because your site title takes up a lot of real estate, so the menu runs out of room on smaller screens.

    You can adjust the title font size at specific screen sizes with some CSS:

    @media (max-width:1550px) {
        .main-title {
            font-size: 30px;
        }
    }
    
    @media (max-width:1190px) {
        .main-title {
            font-size: 25px;
        }
    }
    #330938
    johnno43

    Hi Tom

    Thanks that worked a treat.
    The logo is slightly higher than the menu but should be ok

    Thanks again
    John

    #331145
    Tom
    Lead Developer
    Lead Developer

    You can add spacing to the title with margin-top:

    @media (max-width:1550px) {
        .main-title {
            font-size: 30px;
            margin-top: 10px;
        }
    }

    Glad I could help 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.