customize form using CSS

I have a form which is very critical to launch of our upcoming brand new website. It essentially serves as a product page which feeds to our upload-to-print on demand photo service. I've nailed down every bit of the form's functionality, but my VP/Design team are unhappy with a few visual elements of the form, and I'm feeling completely stuck on how to fix. Attached/below is a PDF which shows the little fixes I need to get made. My problem is I am terrified to ever touch anything related to CSS. Are these fixes something you're able to inject for me? I'm at a bit of a hold up, because I have 3 more forms identical to this one, but w/ different sets of dropdowns applicable to other mediums. I'm not wanting to have to repeat the CSS work, so I would like to get this first one dialed in perfectly from aesthetic side, then clone/revise for other mediums. 

Please help! Thank you, so much appreciated. 

I have checked your form and can you please share the font and size that you want to use with your text element?

May we know if your form is embedded to your web page?

Can you please share to us the web page URL?

Looking forward for your response.

Yes for sure! The font is Arial for all. The size is 28pt for the header 'Canvas Prints' then 14 for the text in body. Price can remain sizes as is. 

The form is embedded on this page: https://shop.hallofframes.com/canvas-prints

The product pages the form emulates, here is the live example: https://shop.hallofframes.com/bennet-frame

I really appreciate you looking at the form. The only other thing I am stuck on, that I forgot to mention above; is the call to action bar, where we have the image that says, "Head to our Image Uploader"....could you show me how to format the image I am trying to use in place of the native button? You can still see the edges of the native button around the image file I want to use. 

You may use this custom CSS code:

For the header,

#header_1{
font-size:28pt;
}

Guide:https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

For the text element, you would have to edit the source code and edit the font-size.

Go to your text element and click on the <> icon to open the source code.

Then edit the font-size

You may change your submit button style to mach your uploaded button image.

Please give it a try and let us know if you need further assistance.

Thanks so much!! I was able to get those to work...mostly. 

I'm still running into issues w/ my button image not fully replacing the native button. 

It is weird because I can still see on the bottom and left, remnants of a native button, but I believe I have it set up properly in back end. 

Also, could you please have a look at these remaining padding issues? Would I do these via CSS in the Design screen, or via HTML/CSS in the fields? 

You may add this custom CSS to adjust the padding,

#id_8{
margin-top: -19px;
}

This would reduce the padding between the paragraph and canvas depth

#cid_22{
    margin-top: -20px;

}

This will reduce the padding between price.

Regarding your button, it is showing correctly at my end.

Please give it a try and let us know how it goes.

Thanks Richie! I'll get on those CSS fixes now! This is making more and more sense as we go! So the #cid_22 and #id8....are those what you are tagging in the form-wide CSS inject sheet, to narrow the tag to only that field? I love this stuff....actually find it fun! 

Hey...sorry to be a bug on that button....but it is still showing a sliver of something below the button. I can see it even in your screenshot. See the little line below? It's not the end of the world if we can't make that go away. 

Thanks a ton!