Site URL: https://radamweds.com/rsvp
I added custom css to change the font in my form and it previews fine in the mobile view but when I actually go to the website on my phone it doesn't show up. Some of the css does work - the colours and the hover on the bottom - but the font just isn't working. I would love any advice/tips on how to make it work
how it's supposed to look, and how it previews when editing
VS
how it's actually looking on my phone
My css is below:
.form-wrapper .field-list .field {font-family: Futura PT!important;
letter-spacing: .15em;
font-size: 14px;
color: #fb3576;
text-transform: uppercase;
}
.form-wrapper .field-list .title { font-family: Futura PT;
font-size: ;
color: #3b3a3a;
letter-spacing: .15em;
text-transform:capitalize ;
}
.form-wrapper .field-list .field .caption {
font-family: Futura PT;
font-size: 9px;
color: #fb3576;
letter-spacing: .25em;
text-transform: uppercase;
}
.form-wrapper .field-list .field .field-element {
font-family: Futura PT;
background-color: #fefefe;
border: 1px solid #fb3576;
border-radius: 0;
}
.form-wrapper input[type=submit] {
font-family: Futura PT;
letter-spacing: .25em;
color: #fefefe;
text-transform: uppercase;
transition: all .6s ease 0s!important;
}
.form-wrapper input[type="submit"] {
display: block;
background: #3b3a3a;
color: #fefefe;
border: none;
padding: 10px 20px;
cursor: pointer;
}
.form-wrapper input[type=submit]:hover {
color: #fefefe !important;
background-color: #eac2de !important;
}
