The entire header area (contains the page links and logo) looks great on a desktop computer; however, when viewed on a mobile device, the height of this section is too high and dominates the view. For example, on an iPhone in portrait, half of the screen is taken up by this block - giving very little initial impact to the viewer. In landscape mode, it fills the entire screen. I've tried adding some custom css commands to change the height of the classes up in this top portion, but so many divs are affected, I can't come up with anything clean looking. Do you have any suggestions? I would be ok with shrinking the height in desktop if it could allow the mobile view to make better use of the screen real estate. Or better yet having these divs rendered differently if a mobile device is detected. Thank you!
Hello, Paste this code in Custom CSS Appearance > Theme Option > Styling Option > Custom CSS It will decrease height of header and slider content in the mobile view. Code: @media only screen and (max-width: 480px){ .menu_container { margin-top: 0px; } .menu_bar { margin-bottom: 0px; } .slider_info { margin-top: 10px; margin-bottom: 5px; } .slider_info p { margin-top: 5px; } .slider_wrapper { padding-bottom: 10px; } .flexslider { margin-top: 10px; }}
