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

    Attached files:  homepage.png
      post.png

  •  665
    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,


    Alexandre from the Sonaar.io Crew

  • GertJan replied

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

  •  665
    Alexandre replied

    Good news!

    You are welcome

    Thanks,


    Alexandre 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? 

    Attached files:  missing dot whit space on mobile.png
      minus top marging.png

  •  665
    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,


    Alexandre 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!

    Attached files:  padding top 60.png
      NO padding top 60.png

  • GertJan replied

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