Moving iframe to line up correctly

Hello and thanks for the help.

I am trying to get the iframe on this page http://smartphonopoly.com/demo-app.html to line up on the phone.

I inspected the element and thought I found where I change the positioning, but was not able to move only the iframe, the phone image moved too.

I have researched the Bootstrap grid examples, but am a little unsure where or if this is the right place to start.

Thanks again for the help, let me know if I am missing info to assist with solving this problem.

 

Add a top and left margin to the iframe to push it into place inside the larger parent DIV. If the margin is being ignored, add overflow:hidden to the parent DIV (and if you care about legacy IE, a haslayout trigger like zoom)

Though that page is a laundry list of how not to build a site -- admittedly you end up with that the moment you have bootcrap involved with idiocy like this:

<div class="phone-holder-wrapper col-md-4 col-sm-5 col-xs-12 col-md-offset-1 col-sm-offset-1 col-xs-offste-0 col-md-pull-6 col-sm-pull-6 col-xs-pull-0">

Code (markup):

But there's some nonsense that can't be blamed on the fat bloated framework that just makes you work harder, not smarter...

Like the endless pointless DIV for nothing, endless pointless classes for nothing, gibberish use of numbered headings, scripttardery doing CSS' job, tags like IFRAME that have no business on any website written after 1997, etc, etc... NOT entirely related to your problem, but thought you should at least be made aware that wasting 17k of markup on 970 bytes of plaintext and only one element I'd even go so far as to call a content image is anywhere from three to five times what's needed to do that job. Then people wonder why I say bootcrap does NOT make things simpler/easier?

I'd HIGHLY suggest pitching bootcrap in the trash and starting over clean with ACTUAL semantic markup and separation of presentation from content, backing away from the "JS for nothing" garbage as well.

Also, that image is pretty simple -- have you considered perhaps trying to generate that phone outline with CSS3 instead of as a separate image? Box-shadow and border-radius can do some pretty amazing stuff in that department and it would scale/zoom better. Moving the design to CSS would have the advantage that you could demo multiple different phone sizes around that iframe instead of just one fixed one.

 

Oh, BTW your iframe code is busted too -- you declare attribute without their values, declare the same attribute twice, frameborder only accepts 0 or 1 (which is why I'd choose 0).

 

Thanks for the help, this is a wrapbootstrap theme and I know this is not necessarily the best way, but for the price point (free) this is what they get. But I want it to look decent and your assistance is appreciated.