Okay
  Public Ticket #3571944
Too much white space on mobile
Closed

Comments

  • GertJan started the conversation

    Hi,

    On mobile I have too much white space between the menu and the content.

    See 2 screenshots (home and a post) with red crosses. 

    Where can I change that?

    Thanks!

    Kind regards,

    GertJan van Schuppen

  •  708
    Alexandre replied

    Hi,

    Please add this custom css code:

    @media (max-width: 1159px){
    .home .boxed {
    margin-top: 0 ;
    }
    }

    @media only screen and (max-width: 1143px){
    .home #pusher.menu-type-classic-menu{
    padding-top: 0;
    }
    }


    Thanks,


    Alex from the Sonaar.io Crew

  • GertJan replied

    oops, forgot to let you know it worked! Thanks!

  •  708
    Alexandre replied

    Good news!

    You are welcome

    Thanks,


    Alex from the Sonaar.io Crew

  • GertJan replied

    Hi Alexandre,


    I thought I fixed the problem but still having some issues on PAGES with too much white space on mobile.

    https://www.madonna.nl/muziek/ check this page. Above the page title (Muziek) there is still (too) much white space.. I want the space between the blue main menu and the page title to be smaller. 

    But you can also see the dot is not complete on the i the word Muziek... it still looks like there is "something" between te main menu and the page title where the title gets pushed under....

    I have tried to give the item some minus top marging (see screenshot) and then it gets pushed under some white spacing or something...

    Can you have another look for me? 

  •  708
    Alexandre replied

    The code I gave was only apply on the homepage. 

    Please use thise code:


    @media (max-width: 1159px){
    .boxed {
    margin-top: 0 ;
    }
    }

    @media only screen and (max-width: 1143px){
    #pusher.menu-type-classic-menu{
    padding-top: 0;
    }
    }


    instead of:


    @media (max-width: 1159px){
    .home .boxed {
    margin-top: 0 ;
    }
    }

    @media only screen and (max-width: 1143px){
    .home #pusher.menu-type-classic-menu{
    padding-top: 0;
    }
    }

    Thanks,


    Alex from the Sonaar.io Crew

  • GertJan replied

    Here 2 two other screenshots:

    As I inspected the page with Chrome you could see mobile still has a paddin top of 60. (see screenshot: padding top 60.png)

    And when I de-selected the option the white space at the top is gone... (see NO pading top 60.png)

    Is this hard coded in that main.min.css? Or could I adjust somewhere in your template?

    Thanks again!

  • GertJan replied

    Oops you were fast! Forget the last post.. I will try the new code you sent me :)