Jump to content

Fonts Colour different in preview versus live site

Recommended Posts

Site URL: https://city-ants.squarespace.com

Hi everyone, 

I have the weird problem that the colours of body text in my live website look different then the ones in my building environment. I added a bit of custom code to change the form block and hide navigation, but when that code was added problem didn't occur, it only started later on. I added screenshots of both versions and added the piece of custom code. 

The problem also appears below (which it didn't do before). 

 

Custom code inserted:

(1) Custom CSS

.form-wrapper .field-list .field .caption {
  font-family: poppins;
  font-size: 4px;
  color: #FFFFFF;
  letter-spacing: .em;
}

.form-wrapper {
    border: 2px solid #FFA400;
    padding: 20px;
    background: #FFFFFF;
}

.form-wrapper .field-list .field .field-element {
  background-color: #FFFFF;
  border: none;
  border-radius: 4;
}

.form-wrapper input[type=submit] {
  transition: all .6s ease 0s !important;
}
.form-wrapper input[type=submit]:hover {
  background-color: #FFA400;
}

 

(2) Header CSS 

<style>
  .header-nav, .burger-box {
    visibility: hidden;
}
  
/* First name */
.field.first-name .caption-text {
    visibility: hidden;
}
.field.first-name .caption-text:before {
    visibility: visible;
    content: "Voornaam";
}
/* last name */
.field.last-name .caption-text {
    visibility: hidden;
}
.field.last-name .caption-text:before {
    visibility: visible;
    content: "Naam";
}

 

 

We're in the newspaper tomorrow and this happened only after a couple of days of working on it, appreciate all the help! 

 

Kindest regards, 

 

Oberon

 

 

Screenshot 2021-04-28 at 20.48.55.png

Screenshot 2021-04-28 at 20.49.06.png

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.