Archived topic
How to reduce space below menu icon on mobile view?
3 replies · Started by Kristen on June 29, 2016
Hi,
I can't seem to figure out how to reduce the amount of padding/empty space that appears below the menu icon when viewing my site on a mobile device. The vertical spacing seems normal when the site is viewed on a computer, but once the menu switches to the smaller icon on mobile the extra padding appears. I tried adjusting the padding in a few spots but nothing affected that area.
My site is http://copywriterkris.com/
Thank you in advance for your help and suggestions!
Kind Regards,
Kristen
Hi
I think it depends how much white space you want to leave there but the following should reduce it significantly.
@media (max-width: 768px ) {
.inside-header {
padding: 20px 40px 0px 40px;
}
.nav-float-right .main-navigation {
margin-bottom: 0px ; /* 20 */
}
.right-sidebar.separate-containers .site-main {
margin: 0px 20px 20px 0px;
}
.separate-containers .inside-article {
padding: 10px 40px 40px 40px;
}
}Adding CSS: Knowledgebase
Somebody correct me please if im wrong :)
That should work great, Jamal! :)
Thanks, that worked!