I know its not Jotform but.....

  • Profile Image
    ipbr21054
    Asked on October 11, 2013 at 09:22 AM

    It would be kind if you can give me any advice.

     

    My web page in question below works fine on pc, iphone & ipad

    http://www.theremotedoctor.co.uk/skype.html

     

    The logo in the bottom right hand corner was added to the page with this code shown below.

    <div style="position: relative; left: 725px"><img src="images/remotedrlogo.png" width="206" height="227" alt="remote logo" /></div>

    Since having added the logo its not the same on the ipad,in respect that its smaller.

     

    Below are before and after screen shots of the page on the ipad.

    http://i670.photobucket.com/albums/vv62/ipbr21054/FORUM%20POSTS/ipadbefore.png

    http://i670.photobucket.com/albums/vv62/ipbr21054/FORUM%20POSTS/ipadafter.png

     

    When viewing on pc & iphone is untouched and the same size.

  • Profile Image
    guilledutra
    Answered on October 11, 2013 at 09:37 AM

    Hi,

    I'm not usre if it will work, but could you try with this code?

    <div style="position: absolute; left: 69%; top: 70%;"><img src="images/remotedrlogo.png" width="206" height="227" alt="remote logo"></div>

    Thanks

  • Profile Image
    ipbr21054
    Answered on October 11, 2013 at 09:47 AM

    That keeps putting the logo below the bottom black line.

  • Profile Image
    guilledutra
    Answered on October 11, 2013 at 10:08 AM

    Hi,

    you will need to adjust the position of the image according to the device using  css mediaqueries.

    First you will need to change the image container by giving it a class name instead of adding the style directly at the tag:

    Example:

    <div class="bottom_image"><img src="images/remotedrlogo.png" width="206" height="227" alt="remote logo"></div>

    Then you will need to add to your site css file the corresponding mediaqueries, for example:

    /* iPads (portrait and landscape) ----------- */

    @media only screen 

    and (min-device-width : 768px) 

    and (max-device-width : 1024px) {

    .bottom_image { 

    position: absolute;

    left: 69%;

    top: 70%;

    }

    }

    /* Desktops and laptops ----------- */

    @media only screen 

    and (min-width : 1224px) {

    .bottom_image { 

    position: absolute;

    left: 69%;

    top: 70%;

    }

    }

    Change the left: and top:  value  for each mediaquerie and test it until you find the right position.

    I recommend you to dig in css mediaqueries, it is quite useful when trying to make your site look good at any device

    Mediaqueries listed by device:

    http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Useful doc:

    http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

    Hope it helps

    Thanks

  • Profile Image
    ipbr21054
    Answered on October 11, 2013 at 10:45 AM

    Thanks

  • Profile Image
    guilledutra
    Answered on October 11, 2013 at 10:46 AM

    You are welcome.

    Thanks!