In certain sizes (on the iPad) the reading pane and related articles overlap with the top sidebar. The top sidebar I’m using is a TEXT menu with adsense in it. I’ve tried encasing it in a div and adding some style but no success yet. Any suggestions?
That got me headed in the right direction, but didn’t solve the issue. The following was able to fix the overlap and decrease the indent from the menu bar.
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.single #dw-argo-top-sidebar {margin: 0 0 90px 0 !important; ;}
.single-post #dw-argo-top-sidebar {margin: 0 0 90px 0 !important;
}
}
@media(max-width:1200px) {
.single #dw-argo-top-sidebar {margin: 0 0 90px 0 !important; ;}
.single-post #dw-argo-top-sidebar {margin: 0 0 90px 0 !important;}
.single-post #main {padding-top: 75px !important;
}
}
@media(max-width:1200px) and (min-width:768px) {
.single #dw-argo-top-sidebar {margin: 0 0 90px 0 !important; ;}
.single-post #dw-argo-top-sidebar {margin: 0 0 90px 0 !important;
}
}
Please send me your site for further checking.
The problem occurs on blog post pages such as:
http://www.savingsbump.com/2014/09/baked-ziti-recipe/
Only at certain zoom level for a PC and on the iPad
To resolve this issue, you can add the following code to the style.css file:
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
#main-content {padding-top: 105px !important; }
.single #side-content { top: -17px !important; }
.single-post #main {padding-top: 100px !important;
}
}
@media(max-width:1200px) {
.single #side-content { top: -17px !important; }
.single-post #main {padding-top: 150px !important; }
#main-content { padding-top: 100px;
}
}
@media(max-width:1200px) and (min-width:768px) {
.single-post #secondary {
top: -415px !important
}
}
Hope this helps !
Please login or Register to submit your answer