This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

How to remove white space on the mobile

Resolved 6 replies premiumthemetheme-vantage
rashid
10 years ago · Last reply by Daniel 10 years ago

How can I remove the white space between the logo and Menu bar and the white space between the menubar and the page title on the iPhone ONLY. The desktop version looks just fine.

URL: http://rakium.com

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

6
  1. Daniel Staff 10 years, 11 months ago

    Hi Rashid

    You can fix/change this with some custom CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.

    @media screen and (max-width: 680px) {
.hgroup.full-container {height:73px!important;}
}

    Try that out and let me know the outcome

    Cheers

  2. rashid 10 years, 11 months ago

    Hi Addo,

    This change removed the white space between the logo and the menu bar. Thanks A lot.

    The only other white space that I would like to reduce on the iPhone HOME page is the white space between the slider and the rest of the page. I guess this could also be reduced for the whole theme.

    At present, I have the following customer CSS.

    /* Vantage set menu font family and font size */

    .main-navigation a {
    font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif !important;
    font-size: 13px;
    }

    /* Headline Widget */

    .widget_headline-widget h1 {
    font-family: Verdana, Geneva, sans-serif !important;
    font-size: 12px !important;
    font-weight: bold;
    text-transform: none;
    }

    header#masthead {
    padding: 0 !important;
    }

    header#masthead hgroup {
    padding: 0 !important;
    }

    header#masthead {
    padding: 0px 35px !important;
    }
    @media screen and (max-width: 680px) {
    .hgroup.full-container {height:63px!important;}
    }

  3. Daniel Staff 10 years, 11 months ago

    Hi Rashid

    You can fix this with some custom CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.

    #main {
    padding:5px 35px !important;
}

    Kindly adjust the figures to meet your requirements

    Let me know if it works for you

    Cheers

  4. rashid 10 years, 11 months ago

    Hi Addo

    The solution that you sent me removes the white space on all the pages and works fine for the theme in general.

    I was after a solution specific for the iPhone , as the white space on the iPhone makes the page look odd. Is there a way to do it just for the iPhone?

  5. rashid 10 years, 11 months ago

    Hi Addo,

    I added your suggestion as follows:

    @media screen and (max-width: 680px) {
    .hgroup.full-container {height:63px!important;}

    >> #main {
    >> padding:5px 35px !important;
    >> }

    }

    seems to do the trick. Just hoping this is the correct way for changing the white space on the iPhone only.

  6. Daniel Staff 10 years, 11 months ago

    Hi Rashid

    Your right :-)

    Am glad you have this solved. Always feel free to open a new thread whenever you require support

    Cheers

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread