jgraphiccom Posted January 20 Share Posted January 20 Hi! I want to increase the size of the fields on my contact form on my website jgraphiccom.com/connect. Specifically under where it says "What Are You Interested In". The text for the options there is a little small. How can I code a larger text size for it? Link to comment
Solution creedon Posted January 20 Solution Share Posted January 20 Add the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection. <style> Â .form-wrapper .field-list .field .option { Â Â Â Â font-size : large; Â Â Â Â Â } Â Â Â Â </style> Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
kentbateman1 Posted January 31 Share Posted January 31 This is perfect. How would you accomplish the same thing for the "Description" text @creedon? Link to comment
creedon Posted February 1 Share Posted February 1 15 hours ago, kentbateman1 said: How would you accomplish the same thing for the "Description" text Please post the URL for a page on your site where we can see your issue. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/. Please set up a site-wide password, if your site is not public and you've not already done so. Post the password here. Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the site-wide password and how to share a link documentation to understand how they work. We can then take a look at your issue. You may find How to post a forum question post useful. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
kentbateman1 Posted February 3 Share Posted February 3 Hi @creedon. The page in question is citychurchknox.com/groups. Link to comment
creedon Posted February 3 Share Posted February 3 On 1/31/2023 at 5:41 AM, kentbateman1 said: How would you accomplish the same thing for the "Description" text Add the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection. <style> .form-wrapper .field-list .description {  font-size : large;  } </style> Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
kentbateman1 Posted February 4 Share Posted February 4 @creedon that's perfect, thank you! Is the best way to change it site-wide to put it in Design > Custom CSS? Link to comment
creedon Posted February 4 Share Posted February 4 (edited) On 2/3/2023 at 6:43 PM, kentbateman1 said: Is the best way to change it site-wide to put it in Design > Custom CSS? Yes. When adding code to Custom CSS be sure to remove the <style> and </style> if the code has them. Edited February 6 by creedon Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
jgraphiccom Posted February 6 Author Share Posted February 6 That first reply with the code worked! Thank you Creedon! creedon 1 Link to comment
curlybirdie21 Posted March 31 Share Posted March 31 (edited) Hey Creedon - I am trying to increase the wording for First Name and Last Name; see attached. I tried by adding your code: to the header on code injection but it did nothing to the First Name and Surname - any other ideas? Â <style> .form-wrapper .field-list .description { Â font-size : large; Â } </style> Edited March 31 by curlybirdie21 Link to comment
creedon Posted April 1 Share Posted April 1 14 hours ago, curlybirdie21 said: I am trying to increase the wording for First Name and Last Name Please post the URL for a page on your site where we can see your issue. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/. Please set up a site-wide password, if your site is not public and you've not already done so. Post the password here. Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the site-wide password and how to share a link documentation to understand how they work. We can then take a look at your issue. You may find How to post a forum question post useful. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
curlybirdie21 Posted April 3 Share Posted April 3 https://lysaght.squarespace.com/contact Site-wide password: Homepage Link to comment
creedon Posted April 3 Share Posted April 3 (edited) On 3/31/2023 at 2:34 AM, curlybirdie21 said: I tried by adding your code: to the header on code injection but it did nothing Descriptions are a bit different than the field captions. Add the following to Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection. <style> @media screen and ( min-width : 768px ), screen and ( max-width : calc( 1908px - 1px ) ) and ( orientation : landscape ) Â { Â Â Â Â .sqs-block-form .field-list .caption { Â Â Â Â Â Â font-size : large !important; /* default : calc( ( 0.8 - 1 ) * 1.2vw + 1rem ) */ Â Â Â Â Â Â Â } Â Â Â Â Â Â } </style> Let us know how it goes. Edited April 6 by creedon Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
curlybirdie21 Posted April 4 Share Posted April 4 Hey Creedon, that worked! Thanks so, so much! What should I do if I want to reduce the font size slightly as the First Name and Last Name are actually now bigger than the field name = "Name" Link to comment
curlybirdie21 Posted April 4 Share Posted April 4 Okay Creedon When I added that code to the Header, the strangest thing has since happened. I have a coloured shape that features on my bio pages - see https://lysaght.squarespace.com/bio/richard-stilwell (see attached) The block remained when I added your code, but the colour changed to white. Nothing changed, even when I went into the shape to edit the colour to turquoise. I removed the code, and the block returned! Any ideas? I've removed your code for now, so you can see what I mean. Link to comment
creedon Posted April 4 Share Posted April 4 14 hours ago, curlybirdie21 said: What should I do if I want to reduce the font size slightly as the First Name and Last Name are actually now bigger than the field name = "Name" Use a px size. For example 16px. You can change the number to any number you want. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
creedon Posted April 4 Share Posted April 4 14 hours ago, curlybirdie21 said: When I added that code to the Header, the strangest thing has since happened. I have a coloured shape that features on my bio pages If the code was added to the code injection for the Contact page then there is no way it could affect the bio pages if everything is working on SS's end. 14 hours ago, curlybirdie21 said: The block remained when I added your code, but the colour changed to white. Did you add my code to Design > Custom CSS? If so that would mess things up. The code is HTML and only CSS can go in Custom CSS. If you want to install the code in Custom CSS instead of Code Injection for the Contact page then remove the style tag ( <style> and </style> ). Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
curlybirdie21 Posted April 6 Share Posted April 6 Ah, okay, I know what I did wrong - I added the code to settings/advanced/code injection when I should have just added it to the specific page. I'll try that now. Can I use this code on the country page too? I want this to apply to all the small text, i.e. anywhere with additional guidance, like here for - see attached. The code you supplied me only makes the First Name and Last name bigger, not the other small bits of text. Can you also explain exactly what I do to the code to make the small text slightly smaller - you say to change it to 16px, but I don't know where you suggest I add it - sorry, I am not any code at code - just copying and pasting it into the necessary pages! Could you advise on all of the above? thanks so much! Link to comment
tuanphan Posted April 8 Share Posted April 8 On 4/6/2023 at 4:45 PM, curlybirdie21 said: Ah, okay, I know what I did wrong - I added the code to settings/advanced/code injection when I should have just added it to the specific page. I'll try that now. Can I use this code on the country page too? I want this to apply to all the small text, i.e. anywhere with additional guidance, like here for - see attached. The code you supplied me only makes the First Name and Last name bigger, not the other small bits of text. Can you also explain exactly what I do to the code to make the small text slightly smaller - you say to change it to 16px, but I don't know where you suggest I add it - sorry, I am not any code at code - just copying and pasting it into the necessary pages! Could you advise on all of the above? thanks so much! Add to Design > Custom CSS span.caption-text { font-size: 14px !important; } input.field-element, input.field-element::placeholder { font-size: 14px !important; }  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
curlybirdie21 Posted April 10 Share Posted April 10 My thanks Tuanphan - that has worked a treat! Any chance you could reply to my other thread we have running atm? 🙂 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