On Iphone iFrame is wider

  • Profile Image
    m_ruiz14
    Asked on March 20, 2015 at 01:23 PM

    I have designed a site that I would like to look the same on mobile devices the same as web browsers. The webpage is finally displaying exactly how I like however when I view it on iPhone the iframe is extremely larger. how do I control this? 

     

    Here is a link to my dev page. 

     

    http://ssworkshop247.com/_new_template/

     

  • Profile Image
    Carina
    Answered on March 20, 2015 at 02:58 PM

    Please try adding this css code:

    @media screen and (max-width: 320px) {

        .form-all {

            max-width:310px;

        }

    iframe {

            max-width:310px;

        }

    Let us know if we can assist you further.   

  • Profile Image
    m_ruiz14
    Answered on March 20, 2015 at 03:04 PM

    That just strip all the css i did in design view. 

  • Profile Image
    Mike
    Answered on March 20, 2015 at 04:28 PM

    Have you already fixed the layout? The form looks pretty similar to the desktop version on iPhone.

  • Profile Image
    m_ruiz14
    Answered on March 20, 2015 at 04:43 PM

    I have not. What I am trying to accomplish is the same (or Similar) height on the iPhone. As you can see on the iPhone the height is double as opposed to the iframe on the desktop which is 250px. I basically want them to be identical if possible. 

  • Profile Image
    Mike
    Answered on March 20, 2015 at 06:12 PM

    I have added the following CSS to your form in order to remove the extra space on mobile devices. The form height should be almost the same on iPhone now.

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

    .form-line {

    padding: 0;

    }

    div.form-header-group {

    margin: 0 !important;

    }

    }

    @media only screen and (max-device-width: 550px) {

    .form-submit-button, .form-submit-reset {

      font-size: 10px;

      line-height: 12px;

    }

    }

    Thank you.

  • Profile Image
    m_ruiz14
    Answered on March 20, 2015 at 06:42 PM

    That Worked!!!! Thanks!!!!