Also, how to restrict this to specific placements?
Q&A
I have my top and bottom ads with 3 side by side using:
.adplugg-tag .adplugg-ad {
width: 300px;
float: left;
margin: 10px;
}But they are all on the left hand side. How to center the ads on the page?
It's pretty dependent on your theme and how much space is available, but you could try something like this:
.adplugg-tag[data-adplugg-zone="my_zone"] .adplugg-ad {
text-align: center;
padding: 10px;
}
@media only screen and (min-width: 767px) {
.adplugg-tag[data-adplugg-zone="my_zone"] .adplugg-ad {
display: table-cell;
}
.adplugg-tag[data-adplugg-zone="my_zone"] {
display: table;
margin: 1em auto;
}
}Note that in the above, I've used [data-adplugg-zone="my_zone"] to restrict the rule to only be applied to the "my_zone" Zone tag. You'll want to update "my_zone" to match your Zone's machine name. Also note that I've used a media query to make it responsive - it will switch to a column of ads (instead of a row) on mobile. You can adjust the padding, margin and breakpoint (767px) as needed. This code would be a replacement to the code that you were previously using (you probably won't want to use them both together).
