-
minemetitiriAsked on January 21, 2016 at 3:52 PM
Hi,
I want to center my logos on my form. Nothing I have tried works.
I made my form wider but now I can't center my logos.
How can I do that.
Page URL: https://form.jotform.com/60038432878157 -
Chriistian Jotform SupportReplied on January 21, 2016 at 9:22 PM
Hi,
You can inject this code to align the logos to the center:
li#id_23 {
margin-left: 70px;
}
li#id_22{
padding-left: 0px!important;
}
li#id_21 {
padding-right: 22px;
}
@media screen and (max-width: 480px){
li#id_23 {
margin-left:0px!important;
}
}
Here's how you can inject css: How to Inject Custom CSS Codes
Do let us know if you need further assistance,
Regards. -
minemetitiriReplied on January 26, 2016 at 11:35 AM
Hi,
I made a change to one of the logos and noticed the alignment also changed. I injected to code above but it is now not working. I tried to modify the code within the injector box, but that did not help to make the adjustment I needed. Help, please.
https://form.jotform.com/60038432878157
-
victorReplied on January 26, 2016 at 2:47 PM
After reviewing your form I noticed an error in your CSS code
the field #input_36 is used correctly. The fields has a starting { but does not have an ending. I also noticed that the CSS code provided was not inserted. Can you please remove this tag and add the provided CSS, by my colleague.
Please let us know if this helps.
-
minemetitiriReplied on January 27, 2016 at 4:47 PM
Hello, I removed the tag, and injected the code. The logos are still not centered. I need them to move right a little bit more. Where in the code can I address this? Am I just tweaking each photo individually in the code?
-
victorReplied on January 27, 2016 at 6:10 PM
To adjust the image to the right or left you just need to change the margin-left attribute of the li#id_23 field
li#id_23 {
margin-left: 70px; /*you can increase to move right or decrease it to move it left*/
}
li#id_22{
padding-left: 0px!important;
}
li#id_21 {
padding-right: 22px;
}
@media screen and (max-width: 480px){
li#id_23 {
margin-left:0px!important;
}
}
Please let us know if you require additional assistance.