CODE SETTINGS
This template includes additional CSS for simple design tweaks. These design tweaks have been added to Design > Custom CSS.
Everything else will be related to Squarespace and its settings.
FOOTER BORDER STYLE
This code is what creates the border at the top of the border section that delineates from the rest of the content on each page.
To change the thickness > edit “1px” to your desired thickness
To change the color > edit the #ececec to the color of your choice
If you would like to remove this…
Website > Custom CSS > Delete the Code to the Right
// FOOTER - Border Style //
footer {
border-top: 1px solid #ececec !important;
}
//END FOOTER
TESTIMONIAL THUMBNAIL PHOTO SIZE
This code makes the images in the testimonial list section on the homepage smaller.
If you would like to remove this…
Website > Custom CSS > Delete the Code to the Right
// AUTO LIST - IMAGE (LOGO) - Smaller Image Size //
.user-items-list-carousel__media-container {
max-width: 80px;
}
//END AUTO LIST
MOBILE MENU LINK & BUTTON FONT SIZE
This code makes the mobile menu navigation link and button font smaller.
If you would like to remove this…
Website > Custom CSS > Delete the Code to the Right
// MOBILE MENU - Link and Button Font Size //
@media screen and (max-width: 800px) {
.header-menu-nav-item a, .header--menu-open .header-menu .header-menu-cta a {
font-size: 18px !important;
}
}
//END MOBILE MENU
NEWSLETTER BLOCK/BUTTON FULL WIDTH ON MOBILE
This code makes the newsletter block and button full-width on mobile devices.
If you would like to remove this…
Website > Custom CSS > Delete the Code to the Right
// NEWSLETTER BLOCK - Full Width Field and Button On Mobile //
@media only screen and (max-width: 640px) { .newsletter-block .newsletter-form-button-wrapper, .newsletter-block .newsletter-form-button, .newsletter-block .newsletter-form-fields-wrapper, .newsletter-block .newsletter-form-field-wrapper, .newsletter-block .newsletter-form-wrapper--layoutStack .newsletter-form-field-wrapper, .newsletter-block .newsletter-form-name-fieldset {
width: 100% !important;
max-width: 100% !important;
display: block !important;
margin: 0px !important;
}}
//END NEWSLETTER BLOCK
HEADER NAVIGATION FOLDERS
This code creates the background color, border, and rounding for any dropdown menus in the main navigation.
To change the border thickness > edit “border: 1px” to your desired thickness
To change the border color > edit the “background-color: #ececec” to the color of your choice
To change the border rounding > edit the “border-radius: 10px” to your designer thickness
If you would like to remove this…
Website > Custom CSS > Delete the Code to the Right
//HEADER NAVIGATION FOLDERS
.header-nav-folder-content {background-color: white !important; border: 1px solid #ececec; border-radius: 10px !important;}
.header-nav-folder-content {
transition: all 0.4s ease-in-out !important;
}
//END HEADER NAVIGATION FOLDER