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
How to remove white space on the mobile
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
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
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;}
}
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
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?
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.
Hi Rashid
Your right :-)
Am glad you have this solved. Always feel free to open a new thread whenever you require support
Cheers