search

buddycore / surface-theme

WordPress + BuddyPress + BBPress Theme
4 stars 1 forks source link

activity will be 2 post on row #76

Closed inzerat closed 7 years ago

inzerat commented 7 years ago

4591b71c-c089-11e6-9c2d-96a046496ac4

inzerat commented 7 years ago

This is actual look: http://www.ontwig.com This is actual style: http://www.ontwig.com/wp-content/themes/surface-theme-master/style.css

I need:

  1. Posts breaks down at a mobile resolution
  2. Gaps between the posts
  3. When the post ends, others will just under

serve php

buddycore commented 7 years ago

You will want to try something like this in your modified CSS.

@media screen and (max-width: 750px) { ul#activity-stream li { width: 100% } }

inzerat commented 7 years ago

OK thank you very much.. It solves one point but what about the other two? Please help me

buddycore commented 7 years ago

You need to do something like

ul#activity-stream li { margin-bottom: 20px; }

inzerat commented 7 years ago

if you would look into style.css you'll find that this is already there and not working

buddycore commented 7 years ago

Ok, you will have to go into the following file.

surface/buddypress/activity/entry.php

Immediate after <li class="<?php bp_activity_css_class(); ?>" id="activity-<?php bp_activity_id(); ?>">

Add this <div class="activity-container">

Then go to the end of that file and just before </li> add `

'.

Basically you're adding a bit more markup. We have to style it a little bit differently.

Then you'll need to figure out what CSS to use. It will be something like this.

First you need to cancel out the original background color by doing...

ul#activity-stream li { background-color: transparent; }

Then add that to the new markup

`ul#activity-stream li div.activity-container { background-color: #FFF; padding: 20px; }

The padding will make the gaps you are looking for.

You will have to apply a negative margin though to the ul to fix it.

`ul#activity-stream { margin: -20px; }

But like I said you'll have to mess around with this for a while.

inzerat commented 7 years ago

here is result: http://www.ontwig.com/ Thank you, one last point - number 3 (When the post ends, others will just under)

buddycore commented 7 years ago

YW. For point number 3 you might want to use something like http://masonry.desandro.com/

inzerat commented 7 years ago

Is it any easiest solution?

buddycore commented 7 years ago

Probably you can do this with CSS and float: left; instead of display: flex; flex-wrap: wrap;

Happy Christmas