FIx Gap on mobile menu area?

scott74

What can I do to fix this huge gap caused by the schedule appt button on mobile browser?

I am using the plain menu which looks good on desktop and tablet but does this on all pages of mobile 

http://screencast.com/t/4jyRqUyS7

http://forestparkdental.info/about-us/team-members/

Thanks Scott

itniederrhein

Hey Scott,

i think you can solve this problem by editing your CSS.
Copy&paste this code to Design > BeTheme Options > Custom CSS & JS > CSS:

body:not(.template-slider):not(.header-simple) #Header {
    min-height: 190px;
    background-position: center 202px;
}

@muffin: correct me, if i'm wrong ;-)

Albert

@itniederrhein You were very close but it was a right direction. Instead of above css, we recommend to use below in this case:

@media only screen and (max-width: 479px) { 
    body:not(.template-slider):not(.header-simple) #Header { min-height: 0 !important; }
}

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

scott74

Thanks guys but I think i would like to eliminate the search and the button label all together on mobile as it just pushes everything to far down.

I tried this but still have a bunch of white spacing on mobile between menu and content

@media only screen and (max-width: 479px) { 

  .button_label{display: none!important; }

}

@media only screen and (max-width: 479px) { 

#search_button{display: none!important; }

}

see here, having hard time with menu, title and breadcrumbs looking right on mobile

http://screencast.com/t/26UMNcMEu

Albert

To remove additional white space on mobile you need to use below css as well:

@media only screen and (max-width: 479px) { 
    #Top_bar .top_bar_right { display: none !important; }
}

This css will remove whole right bar section. But unfortunately there is nothing what you can with breadcrumbs on mobile. You can only remove them from mobile devices what is the best choice.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

scott74

ok thankyou for your help