-
zoiglobalAsked on July 22, 2018 at 8:22 PM
Hello,
Can someone please help me as I have 2 images on my form that my CSS statements appear to be being ignored. I DO NOT want these two images to enlarge on rollover and have specific CSS instructing this behavior. I am able to keep every other one that I DO NOT want to enlarge from doing so with CSS.
Specifically, the 2 additional CID's that I DO NOT want to enlarge are:
#cid_325 and #cid_509
Kindly, advise.
Denise
Page URL: https://form.jotform.com/82024486618157 -
Kiran Support Team LeadReplied on July 23, 2018 at 2:59 AM
In order to make the images to display correctly on the form, please try adding the following CSS code to the elements #id_325 img, #id_509 img as shown below:
width: 100%;
height: auto;
Also, please remove the following code from the element #id_509 img.
margin-left: 7%!important;
Please get back to us if you need any further assistance. We will be happy to help.
-
zoiglobalReplied on July 23, 2018 at 6:49 PM
How can I move the expanding image down a bit because as it enlarges, the top part is hidden? Can I specify exactly where I want the image placed.
See the form on my website to see what I'm saying:
http://myvirtualsponsor.net/commissions-calculator
Denise
-
JanReplied on July 23, 2018 at 9:22 PM
I was able to replicate the issue you are referring to. Please try injecting this custom CSS code:
li[data-type="control_image"] img:hover {
margin-top: 150px !important;
}Here's the result:
The problem with this is that the fields below will move as well. If you want to reduce that behavior, please use this code instead:
li[data-type="control_image"] img:hover {
padding-top: 70px !important;
}Here's the result:
Hope that helps. Thank you.