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 

  .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, 





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


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.