• 0
Sign in to follow this  
Followers 0

Media Boxes don't align in 3 columns


Question

Posted · Report post

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;
}

 

Share this post


Link to post
Share on other sites

3 answers to this question

  • 0

Posted · Report post

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;
}
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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!

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thank you for letting us know this worked for you 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0