Problem with website on big screens

  • Hi!
    I just finished a website and was all happy, now the customer tells me that the navigation is messed up on his 21 inch monitor screen. It basically jumps out of the line.
    Can anybody give me an advice how to fix it with CSS?
    Mobile responsiveness is great though, just the big screens giving me a hard time…
    Thanks!
    Best,
    Hanna

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Get rid of the “max-height” and instead use padding to add height to your navigation menu;

    
.wp-custom-logo .site-header-main {
	...
	max-height:35px;
}
    Thread Starter HannaWP

    (@hannawp)

    I was so proud of me finding out about the max-height! ?? Now if I delete it, the navigation bar is too big. How can I adjust that with padding as I don’t want to add but to reduce its size?
    Thanks ??

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try:

    
.main-navigation li {
    padding-top: 0;
}

.site-branding, 
.site-header-menu, 
.header-image {
    margin: 0;
    margin-top: 10px;
}
    Thread Starter HannaWP

    (@hannawp)

    It reduced the navigation bar a bit, but it is still too wide.
    I also noticed, that on bigger screens, there is a bit of the grey background sticking out on the right side.
    It is probably caused by the same issue, no?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try this instead, this results in a 30px tall navigaiton menu instead of previous 35px:

    
.main-navigation li {
    padding-top: 0;
}

.main-navigation a {
    padding-bottom: 5px;
}

.site-branding, 
.site-header-menu, 
.header-image {
    margin: 0;
    margin-top: 5px;
}
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I also noticed, that on bigger screens, there is a bit of the grey background sticking out on the right side.

    Your header image is 2px smaller than the width of the website, making it look like the grey is the one protruding where it is the image that is smaller. It should be 1200px wide.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Problem with website on big screens’ is closed to new replies.