How to stop top sidebar and reading pane overlap

caleb sparkman
asked 10 years ago

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?

3 Answers

caleb sparkman
answered 10 years ago

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;
}
}

DominicStaff
answered 10 years ago

Please send me your site for further checking.

caleb sparkman
replied 10 years ago

http://www.SavingsBump.com

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

DominicStaff
answered 10 years ago

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 !