Jump to content

Archived

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

AEP

Youtube embed into media box misalignment with adjacent column photos

Recommended Posts

AEP    2
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 {
}
 
htmlbodydivspan,appletobjectiframeh1h2h3h4h5,h6pblockquotepreaabbracronym,addressbigcitecodedeldfnem,fontimginskbdqssampsmall,strikestrongsubsupttvarbui,centerdldtddolullifieldset,formlabellegendtablecaptiontbody,tfoottheadtrthtd {
  1. margin0;
  2. padding0;
  3. border0;
  4. outline0;
  5. font-size100%;
  6. vertical-alignbaseline;
  7. backgroundtransparent;
}

  

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Please can we keep the topics to a minimum - could you update the previous post rather than starting a new topic? 

 

For this one though please see the following screenshot

 

http://screencast.com/t/MScntgHqIj

 

Instead of using the iframe embed method provided by YouTube try and use the pagelines embed method as follows 

[pl_video type="youtube" id="Add video id here, "]   

the id would be SBnrqYbzZOQ

 

This information is in the DMS documentation here http://docs.pagelines.com/tutorials/shortcodes

 

Avoid using iframes where possible within WordPress (WordPress.org )


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
AEP    2
AEP

Martin, I didn't want to start a new topic but you asked me to start a new one in your previous post.  "Can you create a new topic for this please rather than add to an answered one and we will take a look," now you just said "Please can we keep the topics to a minimum - could you update the previous post rather than starting a new topic? "  

 

The good news is it is no longer an issue given a design change request by the customer but  THANK YOU for trying to help out.  I will try the Pagelines embed on a different sandbox test site later.

 

Best,

 

Arnold

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

AEP is this issue now resolved ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
AEP    2
AEP

Yes. It is resolved for my client because they are now using white backgrounds on adjacent photos and this hides the problem but doesn't fix it.  Martin gave me a work around which I'll need to try out using Pagelines Youtube embed...maybe it will work?  This may be a topic in the future for anyone needing top margin alignment with mediabox photos and a Youtube video in 3 columns.  Thanks for checking in on it!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Would it be possible for you to provide a link to a test page where can I can see your issue please, because using a white background is really just masking the issue.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

That page isn't loading for me?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
AEP    2
AEP

The top margin gap got a lot better with DMS 2.0.7 and WP 3.9.1...it is about 5 pixels lower than the left and right photos...potentially good enough...yet it would be nice to have all 3 columnsl aligned on the top margin....

 

http://wpb2b.com/

Share this post


Link to post
Share on other sites
GetMeWebDesign+    115
GetMeWebDesign

You have a 10.5px top -margin... just remove it with custom CSS, which will be something like:

#mediaboxu0z1yzg {
  margin-top: 0;
}
  • Like 1

Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Unless there is something wrong my route to that site, I am unable to access that one either.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Fish-Owl-360    1
Fish-Owl-360

I am in the USA and I can access the link just fine.

Share this post


Link to post
Share on other sites
AEP    2
AEP

ok thanks!  I'll try:

 

#mediaboxu0z1yzg {
  margin-top: 0;
}

Share this post


Link to post
Share on other sites
AEP    2
AEP

I used this below in custom css and when the page first loads it is at top of margin and 1 second later it drops back to the lower position. 

 

 #mediaboxu0z1yzg {

  margin-top: 0;
}

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Try 

 #mediaboxu0z1yzg .the-media .fitvids {  
margin-top: 0;
}

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
AEP    2
AEP

Same scenario...it was top of margin and then it dropped about 5 pixels...hey don't worry about it...the customer is happy and I'm good now...but I will be happy to keep working on it...

 

 

Custom LESS/CSS
Custom LESS/CSSTip Hit [Cmd⌘+Return] or [Ctrl+Return] to Preview Live
 
1
#mediaboxu0z1yzg .the-media .fitvids {
2
margin-top: 0;
3
}

Share this post


Link to post
Share on other sites
GetMeWebDesign+    115
GetMeWebDesign

AEP I did notice that Martin recommended using the pagelines short code, but you have used iframe. I would if that might be as issue. I have to be honest, I could not replicate you issue (dropping down after adding custom css)

 

One alternative would be to use a PL Next box with the options Render Shortcodes (if using the pagelines video shortcode) and Remove DMS Padding both checked

  • Like 1

Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
AEP    2
AEP

Thanks GetMeWebDesign!  I'll give it a go.

Share this post


Link to post
Share on other sites
AEP    2
AEP

I just went to the site and the Youtube video box still drops 4-5 pixels after loading.  I'm using Chrome to view it.  I just tried Firefox and IE...same result.  

 

http://wpb2b.com/

Share this post


Link to post
Share on other sites

  • Similar Content

    • pehja
      By pehja+
      https://pehjaproduction.se/webbdesign/  Video is not showing up in Journey section. Why? I have entered this in the settings 
       
    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
    • flourishdesignstudio
      By flourishdesignstudio
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!
×