[Resolved] How to reduce space below menu icon on mobile view?

Home Forums Support [Resolved] How to reduce space below menu icon on mobile view?

Home Forums Support How to reduce space below menu icon on mobile view?

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #205421
    Kristen

    Hi,
    I can’t seem to figure out how to reduce the amount of padding/empty space that appears below the menu icon when viewing my site on a mobile device. The vertical spacing seems normal when the site is viewed on a computer, but once the menu switches to the smaller icon on mobile the extra padding appears. I tried adjusting the padding in a few spots but nothing affected that area.

    My site is http://copywriterkris.com/

    Thank you in advance for your help and suggestions!

    Kind Regards,
    Kristen

    #205439
    Jamal

    Hi

    I think it depends how much white space you want to leave there but the following should reduce it significantly.

    @media (max-width: 768px ) {
        .inside-header {
            padding: 20px 40px 0px 40px;
        }
        .nav-float-right .main-navigation {
            margin-bottom: 0px ; /* 20 */
        }
        .right-sidebar.separate-containers .site-main {
            margin: 0px 20px 20px 0px;
        }
        .separate-containers .inside-article {
            padding: 10px 40px 40px 40px;
        }
    }

    Adding CSS: Knowledgebase

    Somebody correct me please if im wrong ๐Ÿ™‚

    #205562
    Tom
    Lead Developer
    Lead Developer

    That should work great, Jamal! ๐Ÿ™‚

    #205605
    Kristen

    Thanks, that worked!

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