Jump to content

Custom CSS Form not working on mobile

Recommended Posts

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

 2100359738_ScreenShot2021-12-21at3_35_25pm.thumb.png.4c747548390d685a5ea487bac7ab6c87.png how it's supposed to look, and how it previews when editing 

VS


IMG_6535.thumb.jpg.9a84feab4fff88f8df29877da404894e.jpghow 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;
}

 

Link to comment
  • Replies 1
  • Views 493
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.