New to the community? Start here

I would like

Hello,

I would like to display the services listed on this page in boxes that will stack depending on width. Is that a grid? I think my theme uses bootstrap if that helps. Im sorry, I don't know CSS well at all. http://bit.ly/2dHDwzg

Kasia Swiderska
- Support nomad: Earn your WPMU DEV membership
- 4,690 pts: Hero points 16,664 pts: Rep. points LEVEL 29
Hello Mike,

Could you tell me what is exact "service" on that page? Is this this small list under the "What’s Included:"? Or "Flat Fee MLS" and "Wanted Ad" sections?

Yes, your theme does use Bootstrap - so you can use bootstrap grid http://getbootstrap.com/css/#grid

You don't need to write CSS - you need to wrap your elements (elements you want in boxes) in divs that will have right classes.
So you need to edit your page in text editor. First you will need to create a row
```
<div class="row">
// your content
</div>
```
then inside row you need to create your boxes
```
<div class="row">
<div class="col-md-6">
   // your first service
</div>
  <div class="col-md-6">
// your second service
</div>
</div>
```
class="col-md-6" means that this column will be half of the avaliable space (row has 12 columns). If you need for example 4 boxes in row, you will use class="col-md-3" (3 times 4 equals 12).
Bootstrap will handle CSS when you will use those classes.

Let me know if you have more questions.

kind regards,
Kasia
Mike D
- The Bug Hunter: Earn your WPMU DEV membership
- 149 pts: Hero points 843 pts: Rep. points LEVEL 7
Ah thank you, that is very interesting. So this draws out a table like structure using bootstrap classes? Is it possible to add border and padding here or do I change that with css?
Kasia Swiderska
- Support nomad: Earn your WPMU DEV membership
- 4,690 pts: Hero points 16,664 pts: Rep. points LEVEL 29
Hello Mike,

So this draws out a table like structure using bootstrap classes?

Yes, this is purpose of the bootstrap framework - it allows you to create grid structure without writing CSS.

Is it possible to add border and padding here or do I change that with css?

Paddings are also handled by bootstrap as this is part of the grid. If you want to add borders you can do that with CSS. For example add custom class next to col-md-6 and then write
```
.mycustomclass {border: 1px solid red;}
```
You can
a) add it to the child theme style.css file
b) use this small plugin https://wordpress.org/plugins/simple-custom-css/

Also I suggest checking what other components bootstrap is offering http://getbootstrap.com/components/

kind regards,
Kasia

Mike D

The Bug Hunter: Earn your WPMU DEV membership

149 pts: Hero points 843 pts: Rep. points LEVEL 7

Thank you Kasia, this has been a great learning experience. Look how far i've come!

<div class="row equal">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">header1</div>
<div class="panel-body">
content1
<h5 style="text-align: center;"><a href="#">text1</a></h5>
</div>
<div class="panel-footer">footer1</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">header2</div>
<div class="panel-body">
content2
<h5 style="text-align: center;"><a href="#">text2</a></h5>
</div>
<div class="panel-footer">footer2</div>
</div>
</div>
</div>

Just one more thing that I wasn't able to solve by reading the bootstrap tutorials; How can I make the panels the same size? I tried a few different methods, including the "row equal" that you see above but its not working.

Kasia Swiderska
- Support nomad: Earn your WPMU DEV membership
- 4,690 pts: Hero points 16,664 pts: Rep. points LEVEL 29
Hello Mike,

I think you used wrong class - here http://getbootstrap.com.vn/examples/equal-height-columns/ its says to use class row-eq-height so your row will be
```
<div class="row row-eq-height">

</div>
```
let me know if this is working for you.

kind regards,
Kasia

Mike D

The Bug Hunter: Earn your WPMU DEV membership

149 pts: Hero points 843 pts: Rep. points LEVEL 7

Thanks Kasia. Im sorry but it does not work for some reason. Here is the full code:

<div class="row row-eq-height">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">header1</div>
<div class="panel-body">
content1
</div>
<div class="panel-footer">footer1</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">header2</div>
<div class="panel-body">
content2
</div>
<div class="panel-footer">
footer2
</div>
</div>
</div>
</div>

Adam Czajczyk
- Support Gorilla: Earn your WPMU DEV membership
- 3,309 pts: Hero points 19,262 pts: Rep. points LEVEL 29
Hello Mike D!

I hope you're well today and don't mind me joining this conversation :slight_smile:

The code looks pretty good but the question is: are you sure that the grid is not working as expected or.... the "content" of the grid cell? By "content" I mean the rest of HTML that's put inside each box. This sometimes causes confusion :slight_smile:

I see you got two sites registered with your account but I don't know to which one we are referring here and if I can see your code "in action" anywhere there but I think that could help if we new about the site and page in question :slight_smile:

Have a nice day!
Adam
Mike D
- The Bug Hunter: Earn your WPMU DEV membership
- 149 pts: Hero points 843 pts: Rep. points LEVEL 7
Thanks Adam, this site http://bit.ly/2dQgtmD
Adam Czajczyk
- Support Gorilla: Earn your WPMU DEV membership
- 3,309 pts: Hero points 19,262 pts: Rep. points LEVEL 29
Hello Mike D!

I should have noticed that before since you posted the same site in your initial post :slight_smile:

It seems that there's a little "catch" there. Try adding that full CSS to the style.css of your child-theme or via a Simple Custom CSS:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

Best regards,
Adam
Mike D
- The Bug Hunter: Earn your WPMU DEV membership
- 149 pts: Hero points 843 pts: Rep. points LEVEL 7
Which CSS are you referring to, the one in the link you just gave me? I tried the whole thing but it doest work, caused major issues. I have Simple CSS installed. Do you want to give it a shot?
Adam Czajczyk
- Support Gorilla: Earn your WPMU DEV membership
- 3,309 pts: Hero points 19,262 pts: Rep. points LEVEL 29
Hello Mike D!

Yes, the one in the link I gave you. I'll be happy to give it a shot myself if you grant me a support access to your site. Here's a guide on this:

https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

Best regards,
Adam
Mike D
- The Bug Hunter: Earn your WPMU DEV membership
- 149 pts: Hero points 843 pts: Rep. points LEVEL 7
yup, already granted

Dimitris

Support Star: Earn your WPMU DEV membership

1,680 pts: Hero points 7,106 pts: Rep. points LEVEL 25

Hey there Mike D,

hope you're doing good and don't mind chiming in! :slight_smile:

I just went ahead and added the following snippet in Appearance -> Simple CSS

/* WPMU DEV Staff - start */
/*
 * Row with equal height columns
 * --------------------------------------------------
 */
.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}
/*
 * Edit panels for equal height columns
 * --------------------------------------------------
 */
.panel-default {
  height: 100%;
}
.panel-footer {
  position: absolute;
  bottom: -40px;
  left: 15px;
  right: 15px;
  border: 1px solid #ddd;
}
/* WPMU DEV Staff - end */

Have a good one,
Dimitris

Mike D
- The Bug Hunter: Earn your WPMU DEV membership
- 149 pts: Hero points 843 pts: Rep. points LEVEL 7
Dimitris Thank you. It works great on Chrome but not Safari. I have not had a chance to check Firefox or IE.
Dimitris
- Support Star: Earn your WPMU DEV membership
- 1,680 pts: Hero points 7,106 pts: Rep. points LEVEL 25
Hey there Mike D,

I trust you're doing good today! :slight_smile:

I can see the issue in Safari.
Unfortunately, the way is setup now, this can only be surpassed by adding the following CSS rule:
```
.panel-body {
  height: 100%;
  min-height: 200px;
}
```
I also checked in Firefox and seems to behave just like Chrome.

Cheers,
Dimitris
Mike D
- The Bug Hunter: Earn your WPMU DEV membership
- 149 pts: Hero points 843 pts: Rep. points LEVEL 7
Thanks, that works now. Im surprised how hard it was to create equal row heights which is so easy to do with tables. I thought bootstrap made this sort of thing easy? Oh well, i learn something new everyday. Thanks again!
Mike D
- The Bug Hunter: Earn your WPMU DEV membership
- 149 pts: Hero points 843 pts: Rep. points LEVEL 7
Sorry I have to reopen this. The panels break in portrait view on iPhone and ipad
Dimitris
- Support Star: Earn your WPMU DEV membership
- 1,680 pts: Hero points 7,106 pts: Rep. points LEVEL 25
Hey there Mike D,

could you please add this CSS rule and test again?
```
.row.row-eq-height .col-md-6 {
  flex: 1;
}
```
Kind regards,
Dimitris
Mike D
- The Bug Hunter: Earn your WPMU DEV membership
- 149 pts: Hero points 843 pts: Rep. points LEVEL 7
Resolved via live chat. Closed