Jump to content


This topic is now archived and is closed to further replies.


Media Boxes don't align in 3 columns

Recommended Posts


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;



Jesse Willoughby


Share this post

Link to post
Share on other sites



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;

Please search our forums, before posting!

Share this post

Link to post
Share on other sites



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!


Jesse Willoughby


Share this post

Link to post
Share on other sites

Thank you for letting us know this worked for you 

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 


Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post

Link to post
Share on other sites

  • Similar Content

    • dbrowne02
      By dbrowne02+
      Hi, I am trying to figure out how to create columns where the text flows into the next column, like the attached, and am flummoxed. Does anyone have any ideas? 

    • lbhansen
      By lbhansen+
      I am slowly getting closer to something I like for the general appearance of my site. What's currently nagging me is trying to remove the top and bottom padding/margin from the image in the header. It seems that I've done what I want with the menu but there was dead space above the image and between the image and menu.
      Trying out padding and margin settings, I got something that came close to what I want but saw odd behavior along the way. Changing either the top or bottom padding to 0 (from blank), removed all padding from the top and sides but left a small band between the image and menu.
      Setting all eight padding and margin settings to 0 removed all except the band between image and menu. (But it seems that entering 0 in only the top or bottom padding option is all that was needed.)
      So, heading into the twilight zone, I changed the bottom margin to -1. That removed the band but allowed the menu to slightly overlap the image. AND, narrowing the browser, or viewing on a phone, caused the band to reappear.
      Perhaps there's also a problem with the menu but I don't see it.
      So that's where it stands at the moment: http://756.a44.myftpupload.com 
      I seems to me that if there is a default padding value, setting it to 0 should be all that's needed to get the two sections to meet perfectly on any device/browser width.
    • Perry
      By Perry+
      Hello There, 
      I am working with Platform 5 and have run into an unnerving problem. I am trying to position my clients picture along the bottom of the container, so that it sits right on the bottom. After a good hour of googling and messing with the CSS I figured I would ask the question here. Below is my screenshot displaying my problem. I will need to do this frequently in the future. 
      My Problem Image
      Unlike in DMS, when I add a margin to an embed or image box it simply makes the container larger while keeping the padding, I cannot have any padding or any space whatsoever on the bottom of my clients image.  Is there a way to remove all padding from the container so I can have this work across screen sizes? If not is there anyway to position an element directly at the bottom of another element in Platform 5? This seems like a basic feature and was easily attainable within DMS. 
      I cannot create an image combining all these elements as it will not scale well on mobile and will make my clients logo unreadable and her face incredibly small. 
      Thank you for any help,
    • chamois_blanc
      By chamois_blanc+
      I am a bit confused about the usage of percentages for section padding/margin settings in the PL5 UI. Percentages don't scale well for mobile devices (especially in height), so those settings are pretty much useless. Case in point, the defaults are expressed in rem units, not percentages:
      .pl-sn-pad { padding: 1rem; ... } Why force the user to use percentages in the PL5 section UI when it would have been as easy to let the user specify the unit?
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      I have been unsuccessfully trying to get my 3-column widgetized footer aligned centered. The widget section itself is aligned left because the alignment appears to be controller the widget's content only. The container that contains the widget section is aligned centered. I have chosen a 3 column layout and I added 3 widgets, assuming they would be aligned centered.
      Any idea of what I may be doing wrong?
      The page is question is: http://www.michaelkummer.com