Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 5, 2018 at 12:21 am #893496
    Kevinmve

    Hello,

    I need help getting the iframe to adjust to smaller screen right now 2 pages where i have iframe get cut off on the phone. I am using code blocks on those pages and just have the this:

    <div class=”track”>
    <iframe src=”http://track.mtnvly.com/cgi-bin/wbprotrk?=&button=TRACE&#8221; width=”100%” height=”100%” >
    </iframe>
    </div>

    I have also tried adding this styling:
    .track-container iframe {
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .track-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
    }
    to try and make it responsive. Do you have any other suggestions I could try, thank you for your help.

    Kevin

    January 5, 2018 at 1:17 am #893506
    Mike

    Hey Kevinmve,
    Please try changing the height from 100% to 230px like this:

    <iframe src="https://track.mtnvly.com/cgi-bin/wbprotrk?=&button=TRACE" width="100%" height="230px" >

    Best regards,
    Mike

    January 5, 2018 at 1:43 am #893520
    Kevinmve

    Hello Mike,

    No it still cut off on the phone screen. Here is a screen shot:

    Phone

    do you have any other suggestions I would greatly appreciate it.

    Thanks,
    Kevin

    January 5, 2018 at 3:40 am #893543
    Mike

    Hi,
    Oh it’s getting cut off on the edge, I thought it was the bottom.
    Please try changing the iframe width & height back to 100% because I don’t think vw & vh will work directly, then try this css:

    div.track iframe {
width: 80vw!important; 
    height: 50vh!important; 
}

    by changing the width down it should fit on your screen. What phone & browser are you using?

    Best regards,
    Mike

    January 5, 2018 at 8:10 pm #893829
    Kevinmve

    Hi,
    I am using safari on an iphone and i put the following css in the same code block and it didnt work i also added it to Quick CSS and also didnt work, it is still getting cut off on the right am i putting it in the wrong place. Thanks for the help.

    Kevin

    January 6, 2018 at 12:11 am #893899
    Mike

    Hi,
    Ok, I have a Android, and the width is working good there, so I will ask a team member with a iPhone to review.
    Please post us your login credentials (in the “private data” field), so we can take a look at your backend and adjust the code.

    1. Install and activate ” Temporary Login Without Password “.
    2. Go to ” Users > Temporary Logins ” on the left-side menu.
    3. Click ” Create New “.
    4. Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
      ( do be sure that we have enough time to debug ).
    5. Click ” Submit “.
    6. You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.

    When your issue is fixed, you can always remove the plugin!
    If you prefer to not use the plugin, you can manually create a admin user and post the login credentials in the “private data” field.

    Best regards,
    Mike

    January 8, 2018 at 6:44 pm #894834
    Kevinmve

    Hello,

    Here it is, thank you for your help.

    Kevin

    January 9, 2018 at 11:28 am #895182
    Mike

    Hi,
    Sorry the login doesn’t seem to be working, please check. I notice that the WordPress login page says that it has been disabled, perhaps that is the conflict?

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.