@jzonewarrior, the tricky thing is that the main content area and the sidebar widths are set as a percentage. Just removing the padding isn’t going to help, because as the user shrinks the screen width, the width of the sidebar will shrink proportionally, possibly (probably) under 300px. If you just try setting the minimum width of the sidebar to 300px (min-width), the sidebar will wrap below at screen widths of 1110px. Since you need at least 300px to display the Google ads, you’ll need to convert those percentage widths to fixed pixels and use media queries to adjust the widths at different viewport settings. For example, you can give this a try:
#secondary {
/* Set width to 300px to fit Google ads */
width: 300px;
padding: 0; /* remove padding so ads fit */
float: left;
}
#primary {
/* since enclosing content div is 1100px, 1100-300 = 800 */
width: 800px;
}
/* The following adjusts the main content area (primary) depending upon the screen width */
@media screen and (max-width: 1200px) {
#primary {
width: 600px;
}
}
@media screen and (max-width: 940px) {
#primary {
width: 500px;
}
}
@media screen and (max-width: 840px) {
#primary {
width: 400px;
}
}
@media screen and (max-width: 767px) {
#primary {
width: auto;
}
#secondary {
width: auto;
}
}
Remember my warning in a post above about using either a child theme or a CSS plugin to add CSS rules if the theme does not have a Custom CSS option. If you edit the theme files directly, your changes will be lost if/when the theme is upgraded.
