Search the Community

Site URL: https://www.ivpr.co/contact I'm looking to custom code the contact page on this site to resemble a fill in the blank questionnaire. My client referenced this site as a contact form to emulate. I'm using the Brine template. I've figured out how to adjust some of the css using this guide, but can't figure out how to align the text and blanks on the same line and be responsive to screen sizes. Can anyone help me figure this out? If it's helpful, the css that I could find for the reference site can be found below, but it is not complete, and the form was built using Cognito Forms, and I would love to use the Squarespace contact form block and edit it from there. .cognito form { font-size: 16px; } .cognito:not(.c-forms-actionBar){ max-width: 890px; margin: 0 auto; } .c-public-form .cognito { max-width: 890px; } .cognito .c-forms-form { background-color: rgba(255,255,255,1);} .cognito .c-forms-form .c-dropdown select{padding-right:26px;} .cognito.c-ie .c-forms-form .c-dropdown select{padding-right:6px;} .cognito-background { background-image: ; background-size: cover; background-attachment:fixed; background-repeat: repeat; background-color: rgba(204,204,204,1); } .cognito .c-forms-form .c-forms-heading {background-color:rgba(0, 0, 0, 0);} .cognito .c-forms-form .c-forms-form-title h2 { font-family: 'Open Sans Condensed',Helvetica,sans-serif; font-weight: bold; font-size: 1.5em; color:#000000; line-height:1.15em; } .cognito .c-forms-form .c-forms-description{color:#000000;font-family:Arial,Helvetica,sans-serif;font-size:0.8125em;} .cognito .c-forms-form .dropdown-menu > li > a {font-family:Arial,Helvetica,sans-serif;font-size:100%;} .cognito .c-forms-form .c-helptext{font-family:Arial,Helvetica,sans-serif;color:#000000;font-size:calc(0.8125em * .9);} .cognito .c-forms-form h1, .cognito .c-forms-form h2,.cognito .c-forms-form h3, .cognito .c-forms-form h4, .cognito .c-forms-form h5, .cognito .c-forms-form h6{font-family: 'Open Sans Condensed',Helvetica,sans-serif; font-weight: bold; color:#000000;line-height:1.2em;} .cognito .c-forms-form h1,.cognito .c-forms-form h2,.cognito .c-forms-form h3{font-size: 1.25em;} .cognito .c-forms-form h4{font-size: calc(1.25em * .9);} .cognito .c-forms-form h5{font-size: calc(1.25em * .9 * .9);} .cognito .c-forms-form h6{font-size: calc(1.25em * .9 * .9 * .9);} .cognito .c-forms-form .c-html h1{font-size: calc(1.25em / 0.813);} .cognito .c-forms-form .c-html h2{font-size: calc(1.25em * .9 / 0.813);} .cognito .c-forms-form .c-html h3{font-size: calc(1.25em * .9 * .9 / 0.813);} .cognito .c-forms-form .c-html h4{font-size: calc(1.25em * .9 * .9 * .9 / 0.813);} .cognito .c-forms-form .c-html h5{font-size: calc(1.25em * .9 * .9 * .9 * .9 / 0.813);} .cognito .c-forms-form .c-html h6{font-size: calc(1.25em * .9 * .9 * .9 * .9 * .9 / 0.813);} .cognito .c-forms-form :not(.c-question) > .c-label{ font-family: 'Open Sans Condensed',Helvetica,sans-serif; font-weight: bold; font-size: 0.875em; color:#000000;line-height:1.3em; } .cognito .c-forms-form .c-editor-date-icon,.cognito .c-forms-form .c-editor-time-icon, .cognito .c-forms-form .c-remove-item, .cognito .c-forms-form .c-save-resume-close{color:#000000;} .cognito .c-forms-form .c-remove-item{ padding-top: .1em; font-size: 100%; } .cognito .remove-icon circle{ fill: #C24B23; stroke: #AE431F; } .cognito .remove-icon line { stroke: #FFFFFF; } .cognito .c-forms-form #c-save-resume-email-link{font-size:100%;} .cognito .c-forms-form .c-email-sent-message{font-family:Arial,Helvetica,sans-serif;font-size:0.8125em;} .cognito .c-forms-form .c-table-section:not(.c-responsive) select, .cognito.c-med .c-forms-form .c-table-section.c-responsive select, .cognito.c-lrg .c-forms-form .c-table-section.c-responsive select {font-size:1em} .cognito .c-forms-form .c-table-section:not(.c-responsive)>*:not(.c-table-header)>*>*, .cognito.c-med .c-forms-form .c-table-section.c-responsive>*:not(.c-table-header)>*>*, .cognito.c-lrg .c-forms-form .c-table-section.c-responsive>*:not(.c-table-header)>*>* {font-size:0.8125em;} .cognito .c-forms-form .c-table-section:not(.c-responsive)>*>*>* .c-editor, .cognito.c-med .c-forms-form .c-table-section.c-responsive>*>*>* .c-editor, .cognito.c-lrg .c-forms-form .c-table-section.c-responsive>*>*>* .c-editor {font-size:1em} .cognito.c-sml .c-forms-form .c-table.c-table-section.c-responsive .c-repeating-section-group > .c-repeating-section-item{padding-left: calc(2em * 0.813 - 8px)} .cognito.c-sml .c-forms-form .c-table.c-table-section.c-responsive .c-repeating-section-group>.c-repeating-section-item .c-repeating-section-item-title{margin-left: calc(-2em * 0.813 + 8px)} /* Override the indentation for readonly responsive tables */ .cognito.c-sml .c-forms-form .c-table.c-table-section.c-responsive.c-readonly .c-repeating-section-group > .c-repeating-section-item, .cognito.c-sml .c-forms-form [class*="c-readonly"] .c-table.c-table-section.c-responsive .c-repeating-section-group > .c-repeating-section-item{ padding-left: 0 !important; } .cognito.c-sml .c-forms-form .c-table.c-table-section.c-responsive.c-readonly .c-repeating-section-group>.c-repeating-section-item .c-repeating-section-item-title, .cognito.c-sml .c-forms-form [class*="c-readonly"] .c-table.c-table-section.c-responsive .c-repeating-section-group>.c-repeating-section-item .c-repeating-section-item-title{ margin-left: 0 !important; } /* Above styles shouldn't apply to readonly table section */ .cognito.c-sml .c-forms-form .c-section.c-readonly-always .c-table .c-repeating-section-group>.c-repeating-section-item .c-repeating-section-item-title{ margin-left: 0 !important;} .cognito .c-table-section:not(.c-responsive)+.c-validation, .cognito.c-med .c-table-section.c-responsive+.c-validation, .cognito.c-lrg .c-table-section.c-responsive+.c-validation {margin-left: calc(2em / 0.813)} /* Override previous */ .cognito .c-readonly-always .c-table.c-table-section+.c-validation {margin-left: 11px; } .cognito .c-forms-form .c-table-section:not(.c-responsive)~.c-repeating-section-add, .cognito.c-med .c-forms-form .c-table-section.c-responsive~.c-repeating-section-add, .cognito.c-lrg .c-forms-form .c-table-section.c-responsive~.c-repeating-section-add{font-size:0.8125em} .cognito :not(.c-responsive).c-table-section ~ .c-repeating-section-add .c-add-item, .cognito.c-med .c-table-section.c-responsive ~ .c-repeating-section-add .c-add-item, .cognito.c-lrg .c-table-section.c-responsive ~ .c-repeating-section-add .c-add-item {font-size:calc(0.875em / 0.813)} .cognito .c-forms-form{ background-color: rgba(255,255,255,1); } .cognito .c-forms-form .c-rating-scale .c-choice-option .c-label{ font-family:Arial,Helvetica,sans-serif; font-weight: normal; font-size: 0.8125em; color: #000000; } .cognito .c-forms-form .c-editor, .cognito .c-forms-form .c-rating-scale-questions{ font-family:Arial,Helvetica,sans-serif; font-weight: normal; font-size: 0.8125em; color: #000000; } .cognito .c-forms-form select, .cognito .c-forms-form input[type=text], .cognito .c-forms-form input[type=password], .cognito .c-forms-form input[type=email], .cognito .c-forms-form input[type=tel], .cognito .c-forms-form input[type=url], .cognito .c-forms-form textarea { font-family:Arial,Helvetica,sans-serif; font-weight: normal;} .cognito .c-editor .c-choice-option label, .cognito .c-editor label.c-yesno-radio, .cognito .c-editor.c-yesno-checkbox label {font-weight: normal;} .cognito .c-forms-form input::-webkit-input-placeholder{color: #cccccc;} .cognito .c-forms-form input:-ms-input-placeholder {color: #cccccc;} .cognito .c-forms-form input::-webkit-input-placeholder {color: #cccccc;} .cognito .c-forms-form input:-moz-placeholder {color: #cccccc;} .cognito .c-forms-form input::-moz-placeholder {color: #cccccc;} .cognito .c-forms-form .c-placeholder-text-styled, .cognito .c-forms-form .c-placeholder-text-styled select {color: #cccccc;} .cognito select option[value=""] { color: #cccccc; } .cognito .c-forms-form textarea::-webkit-input-placeholder{color: #cccccc;} .cognito .c-forms-form textarea:-ms-input-placeholder {color: #cccccc;} .cognito .c-forms-form textarea::-webkit-input-placeholder {color: #cccccc;} .cognito .c-forms-form textarea:-moz-placeholder {color: #cccccc;} .cognito .c-forms-form textarea::-moz-placeholder {color: #cccccc;} .cognito .c-forms-form a{ color: #C24B23;font-family: 'Open Sans Condensed',Helvetica,sans-serif; font-weight: normal; } /* Override link attributes in tables because they look dumb otherwise */ .cognito .c-table-section:not(.c-responsive) .c-table-body a, .cognito:not(.c-sml) > :not([id="c-forms-publish"]) .c-table-body a { font-family: Arial,Helvetica,sans-serif; font-weight: normal; font-size: 1em; } .cognito .c-forms-form .c-fileupload-download i,.cognito .c-forms-form .c-fileupload-delete i{text-decoration:none;color: #000000;} .cognito .c-forms-form button:not(.c-icon-button) {padding: .5em 1.25em; } .cognito .c-forms-form .c-add-item{padding:.5em;} .cognito .c-forms-form button:not(.c-icon-button),.cognito .c-forms-form .c-add-item, .cognito .c-forms-form input[type=button],.cognito .c-forms-form .c-fileupload-dropzone .c-upload-button button { background-color: #C24B23; border-color: #AE431F; color: #FFFFFF; font-family: 'Open Sans Condensed',Helvetica,sans-serif; font-weight: normal; font-size: 0.875em; border-radius:4px; } .cognito .c-forms-form .c-fileupload-dropzone .c-upload-button { font-size: inherit; } .cognito .c-forms-form button:not(.c-icon-button):hover, .cognito .c-forms-form input[type=button]:hover,.cognito .c-forms-form .c-add-item:hover, .cognito .c-forms-form .c-fileupload-dropzone .c-upload-button button:hover { background-color: #AE431F;} /* Alternating bg color */ .cognito .c-forms-form .c-repeating-section-group > div:not(.c-table-row):nth-child(odd){background:rgba(0,0,0,0.04);} .cognito.c-sml .c-forms-form .c-responsive .c-repeating-section-group > div.c-table-row:nth-child(odd){background:rgba(0,0,0,0.04);} .cognito .c-forms-form .c-repeating-section-group > div:last-child{border-bottom-color:rgba(0,0,0,0.04);} .cognito .c-forms-form .c-rating-scale tbody:nth-child(even){background:rgba(0,0,0,0.04);} .c-forms-form-admin-readonly .c-table-body.c-repeating-section-group > div:nth-child(odd) .c-field .c-editor, .c-repeating-section-container:not(.c-table-row):nth-child(odd), .c-rating-scale .c-rating-scale-questions > div:nth-child(odd), .c-rating-scale tbody:nth-child(even), .cognito .c-table-section:not(.c-responsive).c-readonly .c-table-body .c-table-row:nth-child(odd) .c-editor, .cognito .c-table-section:not(.c-responsive) [class*="c-readonly"].c-section .c-table-body .c-table-row:nth…

Site URL: https://avarrow.com/ Hi all! I am having some issues with my website in mobile view... The nav bar is getting cut off on all non-home pages. I have tried to reduce the spacing on the main content but it did not work... Thank you in advance!!!

Just what the title says I'm about to throw my laptop out the window. It shouldn't be this hard to fix a problem that everyone has. - How do I turn off the parallax on the mobile version of my website. No, I do not know HTML or anything alike, hence why I am making a website on SquareSpace?!

Site URL: https://avarrow.com/ Hello! I am trying to figure out how to display my navigation bar on all of my pages, and not just the homepage. I have already uploaded a CSS code to add a background to the bottom header, which is where I have the nav buttons displayed so that it looks like they have a background bar. I added some code to reduce the margin top on my other pages and the nav buttons display, but no background... I also noticed that the text is black, and with the background, I would prefer for them to be white. Please advise!!! I have included pictures of one of the child pages showing the nav buttons with no background and a picture of my homepage with the desired nav buttons featuring a colored background. Thank you in advance! (Site password is 8520)

Site URL: https://www.no-frames.com/photo-test Hi, I am using the tagcoud filter block and would like to be able to indicate what tag has been clicked on/currently viewing. Is this possible?

Site URL: https://www.emilykeatingsnyder.com/ Does anyone know how - or have custom CSS code - to add in a footer middle block? I thought all Brine family templates had top, middle and bottom footer blocks, but I'm in Clay and do not see a middle option. I would like to add a newsletter block to my footer and have it appear next to the footer navigation. Any tips or hacks would be great! Would like it to look like footer in image. Thanks!

I tried many attempts to have the previous and the next button straight. Currently the PREVIOUS button is above the NEXT button. I tried adjusting the line height to zero in site style but it's still not aligned. It would be greatly appreciated if anybody knows how to solve this and makes them straight. Link is https://www.lexta.co/lookbook/boon-sofa-ideas-1

Site URL: https://www.wendelinematson.com/ I would like the title/caption of the image to show on mobile view, not the white dot. I don't think the white dot is intuitive enough.

Site URL: https://parrotfish-asparagus-tyfd.squarespace.com/config/pages Hi all, First time poster here. I have forced the hamburger for desktop display, but don't want the menu to overlay the entire desktop screen. Do you have any suggestions for code to reduce the overlay on desktop to ~50%? Thanks

Site URL: https://www.paveyourway.com/pave-challenge-evergreen Hi There, Anyone know what commands I can use to add strikethrough text on a button (see attached example from my Squarespace website, so I know it's possible)? I was able to do it a couple of years ago and forgot how. As you'll see from the URL I've supplied, I was able to cross off the number $1497 on several buttons (scroll to the lower part of the page). I'm trying to do the same thing to the buttons up top and cannot figure it out. If I mess with the lower buttons, I'll loose the strikethrough text, so I don't want to mess with them. I've tried to open a few up to investigate and then I lost the strikethrough text. I'm pretty sure I used some sort of command on my keyboard before. Anyone have any ideas? THANK YOU SO MUCH! nina

Hi friends, I am trying to trigger my navigation to change color after scrolling past the hero. Is there a way I can trigger the change by div or pixel? I currently have my nav as a sticky nav and want to keep that. this is what I'm working with. /*sticky nav https://forum.squarespace.com/topic/142732-brinekeene-sticky-navigation/#comment-184292*/ Header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; } // fix mobile nav .Mobile-bar--top { position: fixed; top: 0; left: 0; right: 0; background: #173d56; } .Mobile-bar { position: fixed; z-index: 99999; } // move mobile overlay down .Mobile-overlay-menu-main { padding-top: 80px; } any help would be GREATLY APPRECIATED link to site

Site URL: https://www.prsnlhb.com/view-all Site URL: https://www.prsnlhb.com/view-all/phb-essential-logo-t-shirt-black Hi everyone, Is there a way to position the related products pricing to the left side on mobile only? @tuanphan

Site URL: https://ashleyguicecreative.com/ I have implemented a "typewriter text" effect with javascript on my client's site. However, I only want this function enabled on desktop/tablet view only, not on smaller mobile screens. See the section I am referring to here: Screen Recording 2022-09-12 at 12.26.12 PM.mov I'm not familiar enough with javascript itself to implement a media query that would allow this, so any help on how to write this would be greatly appreciated!! Thank you!

Site URL: https://www.casegoods.in/ Good morning, password to reach the site : CaseGoods_C3 I'm trying my best to make a landing page with a relatively complex layout (with the help of spacers that would work well on all devices (screen, tablet, phone) but I'm not very happy of a few texts columns that are nice and wide on the screen version but become to narrow on the tablet version. The phone version automatically resize everything for the screen width so no issues with that version mostly. Therefore I would like to try making the tablet version exactly like the phone version with all blocks rearranged one after another to see if it's visually better. I tried messing a little bit the "mobile breakpoint" parameter in the Site Styles but it only affects the Header, not the content of the page. Attached images of the current 3 versions of the landing page. Is there a simple way to make this trial via the custom CSS ? I'm working with the Brine template.

Site URL: https://www.stampdesignco.com Hello, I'm desperately needing some help. I've managed to Invert my logo colour on my homepage only (so it now displays as white), but it's still displaying as Black when viewed on Mobile and Tablet. Can anyone help at all? Thanks so much, Emma

Site URL: https://www.prsnlhb.com/view-all/nlt82a0v7ai136xxx613j8xrnhqoep Hi everyone, Is there a way to move pricing under the title in mobile (centered)

Site URL: https://www.prsnlhb.com/view-all Hi Everyone, Is there a way to move the X button to the right side? Thank you!

Site URL: http://www.susannasarts.com Hi, using a Brine family template (Jaunt) and need to remove the footer top blocks from specific pages. I've been trying variations on this and it isnt working: <style>.Footer-top-blocks{display:none !important; }</style> I tried using chrome dev tools to figure out what that specific element is called but it appears to simply be part of the body when looking at dev tools so Im not sure how to call it out. halp!

Site URL: https://www.andykerrphotography.com/gallery I have a 7.0 site using the Basil template, part of the Brine family. I want the gallery to show in Carousel mode when viewed on desktop, but in Stacked mode when viewed on mobile. Does anyone know of a way to achieve this please? Many thanks in advance for your help, Andy

I'm looking to adjust the style of the arrows on the carousel gallery block in the Brine template. Right now they are a transparent square with grey arrow. I'd ideally like: 1. No arrows and have the gallery scrollable by scrolling finger down on mouse (as you would to scroll down a page) but in this case it would be across the carousel (example: https://www.the7thmember.xyz/) 2. If not possible (without paying for a plugin), remove the transparent square and just have white/black arrows. (I'd also like to ask if it's possible to add padding within the carousel block between images?) Thank you in advance!

Site URL: https://www.twowanderingsoles.com/blog/top-things-to-do-in-new-york-city Hello! I would like to insert an affiliate disclosure line of text stating "This page may contain affiliate links" above the body of every blog post body and below the page title. The text line could be below the author's name and published date (like in the screenshot attached) or below the social share icons. I know I could manually insert the text line to every blog post, but I have over 600 posts and would prefer a simpler solution. Any help is greatly appreciated. Thank you.

Site URL: http://hiawathabible.org I switched from 7.0 to 7.1 and was told that I can not use templates like in 7.0. Here is a link to a site: https://www.lwbc.org/#welcome that is using 7.0 Brine with this effect. Is there a way to get this effect using 7.1?

Site URL: https://thehouseofagness.squarespace.com/ Hi, I am new to this and I am using 7.0 brine template. I would like to move the Contact us link beside the shopping cart, how can I do this? Right now the link is on the secondary nav menu. pass: 220821 Thanks 🙂

Site URL: https://thehouseofagness.squarespace.com/ Hi, I am new to this and I am using 7.0 brine template. I would like to move the Contact us link beside the shopping cart, how can I do this? Right now the link is on the secondary nav menu. pass: 220821 Thanks 🙂

I'm trying to remove the overlay color of the banner section of one of the Index Pages on my site.... The option in the Style Editor will remove it from all pages... Any idea?