Images are bigger on one of my forms when viewing on mobile devices

I have two forms with the same pictures, exactly the same size. However when i view the forms on mobile on one of the forms the pictures are bigger then the other form.

Why is this and how do i fix it? 

URL of Form one where pictures are appearing at correct size: https://form.jotform.co/70601965055859

URL of form two where pictures are appearing larger (although set as same size as above pictures: https://form.jotform.co/70208426775863

As far as I could see it, all forms are doing the same. They are both non-responsive on mobile devices. It's because of the width override in the custom CSS codes area. I've fixed it for you by removing this override. Please check now. 

@JOHNASIMSBLKONX1COM: I have created a new thread for your inquiry. You can find it here: https://www.jotform.com/answers/1089199. 

Thank you for your help.

The problem now is both images are too large. (on mobile devices).

This is how the form looks on the website, using a laptop: http://www.predictwrestling.com/predict (the correct size)

As you can see the images are smaller then when visiting the page on mobile.

How do i get them the same size as they are when viewing the form on a laptop?

Also how do i fix this 'overide' to make my other forms mobile responsive? What CSS code to i need to delete? Thank you!

I inspected your form on iPhone emulator and this is how your from looks like.

Embedded form:

Standalone form:

As you can see image is responsive. 

Are they not responsive on your end? If so, please provide us a screenshot of how the form looks on your end. Also please tell us which phone are you using. 

Inside of this guide you can find how to make your form responsive:

https://www.jotform.com/help/322-How-to-make-mobile-friendly-forms-on-JotForm 

Thanks a lot for your help i really appreciate it!

So, using a laptop computer the form (on my website) looks like this:

Now when i view the same page on my mobile (I'm using a Samsung device) it looks like this:

As you can see the image in the form is bigger when viewing on mobile which i do not want. I would like the image to be the same size as when viewing it on computers (smaller).

Hope this makes sense!

If I understood you correctly you want to increase the width of your images, when form is viewed on a laptop/computer.

To achieve this you will need to increase size of you image inside of Form Builder. You can set width of you image to 626 px.

After that your form will look like this on a laptop/computer.

Hope this will help. Let us know if you need further assistance. 

The image size is the correct size when viewing the form on my laptop computer however it is too big when viewing on mobile devices. How do i change it so that when viewing on mobile devices the image will be the same size as it is when viewing on computers?

I am still not able to replicate the issue for site http://www.predictwrestling.com/predict on mobile device.

It looks proportional when viewed on mobile device

This is how it appears to me on smaller screen

When viewing the webpage on laptop the images appear larger then when viewing on mobile. Is there any way this can be changed so that the images are the same size on mobile as they are on a computer?

Hi,

Can you please try to inject this custom CSS on your form?

@media screen 

  and (device-width: 320px) 

  and (device-height: 640px) 

  and (-webkit-device-pixel-ratio: 3) {

img.form-image {

    width: 50%;

}

}

@media screen 

  and (device-width: 360px) 

  and (device-height: 640px) 

  and (-webkit-device-pixel-ratio: 3) {

img.form-image {

    width: 50%;

}

}

@media screen 

  and (device-width: 360px) 

  and (device-height: 640px) 

  and (-webkit-device-pixel-ratio: 3) {

img.form-image {

    width: 50%;

}

Result:

Thank you so much that's so much better!

One other question, how would i make the single choice questions (eg. 'Who will be the winner of this match?' and the text (eg. 'Brock Lesnar Vs. Goldberg Singles Match) smaller on mobile devices? Its perfect when viewing on a computer but when viewing on a mobile it is too big. 

Looking forward to your reply :-)

Hello,

You can replace the CSS code you have used from Christian's recommendation from the previews response to this code:

@media screen
  and (device-width: 320px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3) {

img.form-image {
   width: 50%;
}
.form-radio-item {
   font-size: 11px;
}
}

@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3) {
img.form-image {
   width: 50%;
}
.form-radio-item {
   font-size: 11px;
}
}

@media screen
  and (device-width: 360px)
  and (device-height: 640px)
  and (-webkit-device-pixel-ratio: 3) {
img.form-image {
   width: 50%;
}
.form-radio-item {
   font-size: 11px;
}
}

You will notice that it's just the same as Christian's CSS except that I inserted the font-size for the form-radio-item class.

You can adjust the numeric value of the font size to your desire.

Please get back to us if you have questions.

I replaced the code however there are no changes no matter what font size i change it to.

For the radio button labels, inject the following custom CSS codes:

.form-label {

    font-size: 11px !important;

}

For the radio button options:

.form-radio-item label {

   font-size: 11px !important;

}

For the header in Text field:

.form-html p, .form-html span {

    font-size: 11px !important;

}

Change 11px to your preferred size. 

Thanks, i have tried all three and still no changes whatsoever. 

I've fixed it for you by replacing the media query to the following:

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

img.form-image {

width: 70%;

}

.form-html p, .form-html span {

font-size: 12px !important;

}

}

Simply add the radio button label/option CSS inside to adjust its font sizes. 

Perfect! Thank you! Is there a way to adjust the line spacing for when viewing on mobile devices also?

Also, i decided not to go with changing the text as i wanted the heading and the text below it different sizes. I was wondering if using a header would be a better way to go. If i was to do this, is it possible to change the size of the header and subheader when viewing on mobile devices? (i wouldn't want both the header and subheader the same size)

You can use the Header field on your form so that the header and the sub-header have different sizes when viewing it on mobile.

Mobile View:

Yes, you can adjust the font-size of both the header and sub-header when viewing on mobile. You just put this code inside the @media only screen.   Just change the font-size to your preference size.

For example:

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

img.form-image {

width: 70%;

}

/* font-size for the header */

h2#header_108 {

    font-size: 15px;

}

 /* font-size for the sub-header */

div#subHeader_108 {

    font-size: 11px;

}

}

For vertical line spacing of the form, you can use the line-height, for example:

line-height: 20px;

Just change 20px to your preference size.

Regards.

That doesn't seem to be working.

What i mean is i only want the line spacing adjusted when viewing the form on mobile, not on desktop. What is the code and where do i put it in the CSS section?

If you want the line-spacing adjusted when viewing the form on mobile, just add the line-height: 20px; inside the @media only screen. Just change 20px to your preference size.

Example:

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

img.form-image {

width: 70%;

}

/* line-height for the header */

h2#header_108 {

    line-height: 20px;

}

 /* line-height for the sub-header */

div#subHeader_108 {

    line-height: 20px; 

}

}