By
AEP
Help, I need to get straight alignment between the three column images on Mac's landing page at the bottom of the page. The Youtube video embed into the media box "text and HTML" box results in 10 or so pixels below the adjacent column images. I did a test replacing the Youtube video with a photo of the same resolution and it aligned with the other right photo. The problem is with the Youtube video.
Website URL: http://test.macelectricco.com/
Framework Version: 2.0.4
WordPress Version: 3.9.1
Plugins in Use: JetPack, SFDC web to lead, Akismet, Google Doc Embedder, WP Google Fonts
Server/Host: Godaddy.com
Screenshots: see attached
Details: The About page has a 3 column section below a slider. The middle box is a Youtube video embed in the media box text section but it will not align with the left and right photos thus making it out of alignment. I did a test with a photo the same resolution as the left and right boxes and it aligned perfect 600X350 which leads me to believe that a Youtube embed is causing the alignment problem. I deleted fall back css custom code
Youtube embed: <iframe width="413" height="241" src="//www.youtube.com/embed/SBnrqYbzZOQ" frameborder="0" allowfullscreen></iframe>
Martin's screencast:
http://screencast.com/t/uKE2Wfwqh
I did an inspect on the column but couldn't find the top margin in the div as suggested by Martin. Here is the inspect when I right clicked on the Youtube media box in the center:
<span class="ctitle">MediaBox</span>
element.style {
}
test.macelectricco.com/
media="all"
html, body, div, span,applet, object, iframe, h1, h2, h3, h4, h5,h6, p, blockquote, pre, a, abbr, acronym,address, big, cite, code, del, dfn, em,font, img, ins, kbd, q, s, samp, small,strike, strong, sub, sup, tt, var, b, u, i,center, dl, dt, dd, ol, ul, li, fieldset,form, label, legend, table, caption, tbody,tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
By redstate
By AEP
By valsbytes
By gianmarc0