Tagged: mobile view
Hi,
on http://www.musikzentrale.net i am using an 152px offset from top to achieve the fixed header along with social icons, phone number and footer navigation:
This is to have the UberMenu in position, which i am using instead of the enfold`s origin menu, since it offers some more modification methods that i want.
On mobile devices i do now face a black border on top of the main section and i do have no idea, how to get rid of it. Here is my custom.css styling the header & main:
#header {
position: fixed;
box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
}
#main {
margin-top: 152px;
}
#wrap_all {
position: absolute;
width: 100%;
z-index: 1;
}
Thanks for your help,
Cheers, Sebastian.
Hi,
I checked your website on a mobile device but I don’t see the black border. Can you give us a screenshot? In what mobile device is this happening?
Regards,
Ismael
Hi,
I check it further and I can see the gap on the main div. Add this on your custom.css
/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */
@media only screen and (max-width: 900px) {
/* Add your Mobile Styles here */
#main {
margin-top: 0;
}
}
Regards,
Ismael