What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    I know its not Jotform but.....

    Asked by ipbr21054 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.

    JotForm style size height ipad
  • Profile Image
    JotForm Support

    Answered by guilledutra 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

    Answered by ipbr21054 on October 11, 2013 at 09:47 AM

    That keeps putting the logo below the bottom black line.

  • Profile Image
    JotForm Support

    Answered by guilledutra 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

    Answered by ipbr21054 on October 11, 2013 at 10:45 AM

    Thanks

  • Profile Image
    JotForm Support

    Answered by guilledutra on October 11, 2013 at 10:46 AM

    You are welcome.

    Thanks!