• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Monochrome Pro (newest version) – Remove White Space at Top of Website

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Monochrome Pro (newest version) – Remove White Space at Top of Website

This topic is: resolved

Tagged: css, monochrome pro, White Space Removal

  • This topic has 8 replies, 3 voices, and was last updated 2 years, 3 months ago by flailiak.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • December 1, 2020 at 1:41 pm #502138
    flailiak
    Participant

    Hello, I recently upgraded to the latest version of Monochrome Pro, and there is an extra white space at the top of the website sitewide I would like to remove.

    Does anybody please know how to remove this white space at the top of my website?

    https://www.maximizingmoney.com

    When I inspect the element, it shows it as ul.genesis-skip-link, and it says it's 45px in size.

    I've searched through my CSS to find this and can't seem to do it.

    Does anybody have any ideas please?

    Also, if you know, what's the purpose of this white space, can something be added up there like a menu or other text or something?

    Thank you so much for your help. It just seems like wasted space, especially on a mobile browser.

    https://www.maximizingmoney.com
    December 3, 2020 at 11:28 am #502171
    Anita
    Keymaster

    In the stylesheet look for this:

    .site-inner {
        background-color: #fff;
        clear: both;
        margin-top: 100px;
        max-width: 1200px;
        position: relative;
        word-wrap: break-word;
        z-index: 999;
    }
    

    There is a 100px top margin. Change that.


    Love coffee, chocolate and my Bella!

    December 3, 2020 at 4:33 pm #502179
    flailiak
    Participant

    Hello Anita,

    Thank you so much for providing me with assistance.

    When I change the 100px top margin for those site-inner settings, it changes the white space that sits just below my menu/title bar (the green bar) and above the first post title.

    However, I am trying to adjust the white space that sits above my menu/title bar at the top of the website.

    I really do appreciate your help with my issue.

    Thank you very much.

    December 3, 2020 at 5:43 pm #502180
    Anita
    Keymaster

    Try disabling your caching plugin to see if that changes it. I can't see all of the code because of the caching.


    Love coffee, chocolate and my Bella!

    December 4, 2020 at 12:01 am #502183
    flailiak
    Participant

    I was able to see the changes you suggested take place on the live website, so it's not that I don't see any changes due to the caching plugin.

    However, the site-inner section you mentioned is not resolving the issue I am having.

    I want to remove the white space at the top of my website, above the menu bar, while the site-inner coding affects the white space below the menu bar.

    It has to be related to some other section of coding in the stylesheet, unless I'm not understanding what you are saying.

    Thank you again.

    December 4, 2020 at 1:44 am #502186
    Anita
    Keymaster

    Some times caching will prevent certain code from displaying properly. The code looks fine. You may have an error in the stylesheet somewhere or something in the Genesis Header Scripts possibly.

    Run your code through the validator- https://jigsaw.w3.org/css-validator/.


    Love coffee, chocolate and my Bella!

    December 4, 2020 at 11:22 am #502192
    andytc
    Participant

    The reason for the whitspace above the menu is the Skip links <ul><li> have padding applied to them as below -

    li {
        list-style-type: none;
        padding-bottom: 15px;
    }

    That CSS will apply to all list items , we don't want that on the skip links <li> ... so

    Add this into custom css -

    .genesis-skip-link li {
      padding: 0;
    }
    December 7, 2020 at 4:21 pm #502234
    flailiak
    Participant

    Hello andytc,

    Thank you very much for your help.

    Your solution definitely addressed my issue, and I can remove the white space now.

    I really appreciate you coming through and helping me out.

    Best wishes.

    December 7, 2020 at 4:22 pm #502235
    flailiak
    Participant

    Hello Anita,

    Thank you for that css validator website link, I will definitely use that in the future to check for errors.

    I appreciate your help and patience.

    Best of luck.

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Monochrome Pro (newest version) – Remove White Space at Top of Website’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble