Jump to content

How to change form input font size

Go to solution Solved by CoorlasArchitecture,

Recommended Posts

Site URL: https://www.coorlasarch.com/contact

I found the CSS code to change the form input text size, but it does not work for the First and Last name input fields

 

/* Form Block */
.form-wrapper .field-list .field .field-element {
  font-size: 1.2rem;
}

 

Any idea how to include those name fields? I'm not extremely CSS savvy.

Thanks in advance,
Stephen 

Edited by CoorlasArchitecture
Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

30 minutes ago, CoorlasArchitecture said:

Site URL: https://www.coorlasarch.com/contact

I found the CSS code to change the form input text size, but it does not work for the First and Last name input fields

 

/* Form Block */
.form-wrapper .field-list .field .field-element {
  font-size: 1.2rem;
}

 

Any idea how to include those name fields? I'm not extremely CSS savvy.

Thanks in advance,
Stephen 

Hi Stephen, 

Please go to design>custom CSS and paste the following code
sqs-block-form .field-list .caption {
    color: #000;
    font-size: 1.2rem !important;
}
Please let me know how it goes, and ask for help if it does not work. Please mark the answer as correct if it works as it will help others in the community with same question. Thanks!
 

Edited by TheSquareSpacer

Get Our MultiCurrency Extension for Your Site (7.0 & 7.1)

Feel free to reach out for help and projects!

The Squarespacer Limited

Link to comment
30 minutes ago, TheSquareSpacer said:

Hi Stephen, 

Please go to design>custom CSS and paste the following code
sqs-block-form .field-list .caption {
    color: #000;
    font-size: 1.2rem !important;
}
Please let me know how it goes, and ask for help if it does not work. Please mark the answer as correct if it works as it will help others in the community with same question. Thanks!
 

Hello - unfortunately this does not seem to change anything when entered in the CSS. I deleted my previous CSS and entered yours, and it did not work. I also tried to keep both, and that did not work for the First and/or Last name fields.

Link to comment

I found a longer CSS code with more modifiers such as font style and color,  and manipulated it to only change the font for all fields including the First and Last Name:

 

.form-wrapper .field-list {
 .field {
   .caption {
     /* Captions of fields (eg First Name, Last Name) */
     font-size: 1.2rem;
     .field-element {
       /* Text in the field boxes (First Name, Last Name) */
       font-size: 1.2rem;
     }
   }
   .field-element {
     /* Text in the field boxes (inc placeholder text) */
     font-size: 1.2rem;
   }
 }  
}

 

Not sure if this can be paired down further. When I eliminate the "Captions of fields" section it stops working on the First Name, Last Name fields. I'm not sure of that's because the name fields are hosted in that Captions of fields bracketing?

Can this CSS code be more efficient?

Link to comment
9 hours ago, CoorlasArchitecture said:

I found a longer CSS code with more modifiers such as font style and color,  and manipulated it to only change the font for all fields including the First and Last Name:

 

.form-wrapper .field-list {
 .field {
   .caption {
     /* Captions of fields (eg First Name, Last Name) */
     font-size: 1.2rem;
     .field-element {
       /* Text in the field boxes (First Name, Last Name) */
       font-size: 1.2rem;
     }
   }
   .field-element {
     /* Text in the field boxes (inc placeholder text) */
     font-size: 1.2rem;
   }
 }  
}

 

Not sure if this can be paired down further. When I eliminate the "Captions of fields" section it stops working on the First Name, Last Name fields. I'm not sure of that's because the name fields are hosted in that Captions of fields bracketing?

Can this CSS code be more efficient?

Did you solve or still need help?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • Solution
10 hours ago, CoorlasArchitecture said:

.form-wrapper .field-list {
 .field {
   .caption {
     /* Captions of fields (eg First Name, Last Name) */
     font-size: 1.2rem;
     .field-element {
       /* Text in the field boxes (First Name, Last Name) */
       font-size: 1.2rem;
     }
   }
   .field-element {
     /* Text in the field boxes (inc placeholder text) */
     font-size: 1.2rem;
   }
 }  
}

This code seems to have solved the issue. 

Link to comment

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.