CoorlasArchitecture Posted May 20, 2022 Share Posted May 20, 2022 (edited) 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 May 20, 2022 by CoorlasArchitecture Link to comment
SQSPStarter Posted May 20, 2022 Share Posted May 20, 2022 (edited) 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 May 20, 2022 by TheSquareSpacer Become a contributor to the largest resource for Squarespace and gain recognition from thousands of visitors.Join us on this exciting journey. Ping us here!. Link to comment
CoorlasArchitecture Posted May 20, 2022 Author Share Posted May 20, 2022 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
CoorlasArchitecture Posted May 20, 2022 Author Share Posted May 20, 2022 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
tuanphan Posted May 21, 2022 Share Posted May 21, 2022 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 CoorlasArchitecture Posted May 21, 2022 Author Solution Share Posted May 21, 2022 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. Upshire 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment