Media Boxes don't align in 3 columns

[jessedwilloughby 2]

Hi all...first post here but have been using pagelines for over a year.

 

Using Latest version of DMS & Wordpress. 

 

Link to my page: http://briandavisonline.com/ctdev/

 

ScreenShot of the issue: http://i.imgur.com/2rIH8SJ.jpg

 

I'm having a problem with a Media Box that doesn't align correctly that I've placed inside 3 columns. I want them to all align equally horizontally. Each media box is the same size and settings except the left one with the issue has a video lightbox. However the issue remains even if it is just an image in the media box. 

 

In the first media box on the left, upon clicking the image it is a Youtube video Lightbox. I'm using a plugin for this (WP Video Lightbox). The code for that is: http://paste.pagelines.com/CCS4qyMM?full-page

 

I don't understand why this media box has extra padding above it. The same column width and media box width settings are the same and in place among all three of the media boxes. 

 

Please help :) Thanks!

 

 

The only custom CSS on the site is this:

 

 .pl-hero-wrap .pl-hero h1 { font-size: 20px !important; } 

.pl-hero-wrap .pl-hero p { font-size: 12px !important; }

.navbar .navline > li > a {font-size: 16px;}

body.display-boxed .boxed-wrap {background: url("http://briandavisonline.com/ctdev/wp-content/uploads/2013/12/bkg-01.png") repeat scroll 0 0 transparent;}

#navbaru7tcn2 .pl-section-pad.fix {

    padding-top: 40px;

}

.span5 .pp-header {

    color: #FFFFFF;

}

 

[Danny+ 1,327]

Hi,

 

The issue is that the first MediaBox is different to the other two, meaning you have used a different method add that image. 

The first MediaBox image is wrapped in a <p> tag, which contains margins on both top and bottom this is what is causing the issue.

 

So if you're using code, like this:

 

<a href="http://www.youtube.com/watch?v=jtruXMVSQjo&rel=0&showinfo=0&controls=0" rel="wp-video-lightbox" title=""><img src="http://briandavisonline.com/ctdev/wp-content/uploads/2013/12/bottom-placeholder1.png" alt="YouTube" width="300" /></a>

 

Then I recommend you wrap your code inside <p> tags and use one of our utility classes to remove the margin, that should do the trick. For example, we can use the .zmt and .zmb classes like so.

 

<p class="zmt zmb"><a href="http://www.youtube.com/watch?v=jtruXMVSQjo&rel=0&showinfo=0&controls=0" rel="wp-video-lightbox" title=""><img src="http://briandavisonline.com/ctdev/wp-content/uploads/2013/12/bottom-placeholder1.png" alt="YouTube" width="300" /></a></p>

 

Replace the code you have used with my code above and that should resolve the problem. If it doesn't then add the following CSS.

 

#mediaboxukp1ap .the-media p {

margin: 0;

}

[jessedwilloughby 2]

Danny, 

 

You are awesome buddy! The code didn't work correctly but the CSS you gave me instantly fixed it. 

 

I was frustrated because the mediabox did the same thing even when I had cloned it from the other boxes with just an image and no video wrap. 

 

I really appreciate it. I was trying all day yesterday with little snippets of code from CSS-TRICKS.com and nothing...you're a big help. Thank You!

[greenfly 230]

Thank you for letting us know this worked for you