Increase space beneath the media wrapper

[James]

The media container rests right on top of my Comment/Like buttons and needs a bit of space. I’m using this code currently, but it impacts the Comment/Like button spacing on other activity items where additional space is not needed.

#buddypress div.activity-meta {
  margin-top: 5px;
}

So I’m adjusting the activity-meta when I really should be increasing the space beneath the media wrapper.

I tried:

div.buddyboss-media-photos-wrap-container {
  margin-bottom: 10px !important;
}

… but obviously don’t know what I’m doing!

Can you help me add a little space under the media wrapper? This would need to work for single images as well as the new group uploads (which are awesome, btw!).

James

[Alyssa]

@jgwolfensberger Unfortunately you can’t add padding to that element because it’s position is absolute so here is a hack to add margin to the bottom of the entire activity li, add this to functions.php:

function buddyboss_margin(){
  ?>
<script>
  $('li.activity:has(div.activity-content:has(div.activity-inner:has(div.buddyboss-media-photos-wrap-container)))').css('margin','0 0 10px');
  </script>
<?
  }
add_action('wp_footer','buddyboss_margin');

I hope this is what you wanted.

[James]

Hi @tjchester –

I’m afraid this didn’t make a change for me.

Not sure if this helps, but when I dropped the code into DreamWeaver, DM flagged line 7, but I didn’t know how to correct it (or if it even needs corrected).

Any possible solutions?

Thanks man!

James

[Alyssa]

@jgwolfensberger I didn’t see the image previously, this is what you want:
#buddypress div.activity-meta{margin:10px 0 0 0;}

[James]

@tjchester, would you mind having a look at my original post… maybe this can’t be fixed, but please check my original inquiry.

Thanks TJ!

James

[Alyssa]

@jgwolfensberger this is highly custom and should be beyond support but I think I just got it.

function buddyboss_margin(){
  ?>
<script>
  $('li.activity:has(div.activity-content:has(div.activity-inner:has(div.buddyboss-media-photos-wrap-container)))').each( function( ) {
  $(this).find( '.activity-meta' ).css( 'margin', '20px 0 0 0' );
});
  </script>
<?
  }
add_action('wp_footer','buddyboss_margin');

[James]

Works beautifully, @tjchester!

Thanks for definitely going the extra, extra mile on this one 🙂

It’s sincerely appreciated. Our site would not be what it is without BuddyBoss products and your support.

James

[Alyssa]

@jgwolfensberger it is quite the hack. This is not possible with CSS so jQuery was the only option. There may be a brief moment until this CSS is applied but at least you will have the extra margin. Enjoy!