White space after menu on Mobile

  • Resolved miakurt1

    (@miakurt1)


    6 years, 10 months ago

    Hello, I am looking for some help. On a website I am working on cimienergy.com, On a mobile phone, I want to remove the white space right after the menu bar and before the slider. On a desktop I was able to do this by adding .site-content-contain {
    background-color: #fff;
    position: relative;
    margin-top: -50px;
    }

    How should I do the same for the mobile screen? What css should I add. It seems I keep running into the same issue. When I change some part of the pages layout via css, I also need to also add css for mobile phones.

    Thanks

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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    There’s an empty paragraph causing some of the space:

    
<p><!-- Do Not Delete --></p>

    Then there’s some padding set on top of the first article, which you can override here:

    
.site-main:first-child .panel-content .wrap {
    padding-top: 0;
}

    Try that. Then you shouldn’t need to do hacky CSS like negative margin top values.

    Thread Starter miakurt1

    (@miakurt1)

    Thank you. That worked. But there is some white space when viewed on the desktop. How should I get rid of that?

    Thank you

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    This is caused by the empty <header> information at the top of the post that usually contain’s the title. To hide it just for the Homepage, add:

    
.twentyseventeen-front-page .entry-header {
    display: none;
}
    Thread Starter miakurt1

    (@miakurt1)

    Thank you Andrew. I always appreciate your help.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘White space after menu on Mobile’ is closed to new replies.