Q&A
Mr. Pickles the AdPlugg Pug

My Ads are all in a line

+1
0
-1

How can i make the ads next to each other rather than one long line of ads? I have 4 125 x 125 squares. Thanks.  



Answers

+1
1
-1

You can change how your ads display using CSS.

This CSS will arrange your 125px ads into a 2 column grid:

.adplugg-tag {
    width: 275px;
}

.adplugg-tag .adplugg-ad {
    float: left;
    width: 125px;
    margin: 5px;
}

If you aren't familiar with css, the first rule says: give the ads a 275px wide box to fit into.  This is enough room for two 125px ads (plus their margin) per row.  The box will automatically stretch vertically to hold all of the ads.  The second rule says to "float" the ads so that they fit into wherever they can but that they should stay to the left.  It also puts a 5px margin around each ad.  If you have 4 ads, this would result in a two by two grid of 125px ads.

Feel free to modify the CSS above to fit your own requirements.  For instance, if you change the 275px to 355px then 3 ads (plus margin) would fit in a single row.  Want your ads to go all the way across? Change the 275px to 100%.

For it to work, you add the above CSS to your site's stylesheet. If you are using WordPress, you can do the following to modify your stylesheet:

  1. Log in to your WordPress administrator.
  2. Go to Appearance, then Customize, then Additional CSS.
  3. Add the CSS code from above.
  4. Press the Save & Publish button at the top of the screen.

EDIT 2015-09-15: The latest version of AdPlugg includes a wrapper div with a class of "adplugg-ad" around all ads.  It's now better to float the wrapper div instead of the img tag.  I've updated the above CSS to reflect the change.