Caroline_Smith

I think this would be possible using custom coded forms in addition to the default signup forms squarespace offers. Of course you would need a developer to write the code for you because this is an advanced function that is not native to the platform.

No Problem!

I don't think you would need code to do this. You can change the focal point of a background image and when the page resizes, it will recenter the image around the focal point. So you could place the focal point (the open white circle) over the couple walking, and on mobile, that's what will be shown. Is this the answer you needed?

It sounds like you need to use the URL mappings feature in Squarespace to redirect each portfolio page to the new page from your site. I have a blog post about a similar issue dealing with Squarespace store pages, but you can easily repurpose the instructions for portfolio pages.

You could try using the "#page" selector instead. This will cover all links in the main content area, i.e. not the header and footer links. #page a:hover { font-style: italic; color:#990000!important; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-decoration-color: #990000 !important; }

If you are using a Mega Menu in Squarespace 7.1, chances are it is not web-accessible/keyboard accessible. What makes a mega menu meet web accessibility requirements? Accessible mega menus should open on mouse-click or delayed mouse-hover, include proper ARIA and role attributes for screen readers, and use conventional keyboard triggers that make them easily accessible to people with disabilities. To learn more, read my blog post How to Make Mega Menus Web-Accessible.

With the Free Comparison Table Generator, you can create as many comparison tables for your Squarespace 7.0 or 7.1 website without having to write your own code. Whether you want to compare products, services, hotel resorts, dogs, or anything else, you can easily generate comparison table HTML and CSS with customization colors, optional images, links, and pricing.

What is your website URL?

I think you could achieve this without code. Since the rest of your site pages are white, you could just make the header theme white in general, and it will have the same affect while also making it white on the home page. But, if you still think you need the CSS code, you can add this to the Page Header code injection of the home page. <style> #header { background-color: #ffffff; } </style>

Is this for a Squarespace 7.0 or 7.1 site?

The best way I have found so far is to give the list items container a negative margin-bottom and margin-top to lessen the space. Replace the max-height rule with this, and you'll need to change the margin-bottom and margin-top property to a negative value that works for you on mobile: @media screen and (max-width: 575px) { .user-items-list-banner-slideshow .slide-content { margin-bottom: -149px; margin-top: -149px; } }

Here is a code snippet that will accomplish that on mobile. However, I think it would be more beneficial to change the text to black in general since the background is very light all around (on all devices). //Start: Make text in Homepag ehero black on mobile @media(max-width: 550px) { [data-section-id="6339b4b3a8b2184f09f0f518"] { h1, h2, h3, h4, h5, h6, p, span { color: black; } } } //End: Make text in Homepag ehero black on mobile

It's not that it moves it to the bottom of the page; it has to do with how the arrows are positioned within the page section. Here is my best attempt at explaining it: The arrows are positioned with "position: absolute;" Elements that are positioned with "absolute" are removed from the natural document flow, and therefore no actual space is created for the element in the page layout. This allows us to place an element with absolute position in the exact place we want it in the document instead of where it would normally be placed. So this means that if the page section has the property "max-height: 825px", it will not account for the space that the arrows would take up if they were positioned normally with the document flow, so it essentially just ignores the arrows and that makes them overlap in the footer.

Have you tried clearing your cache?

I would try reuploading the fonts. I can't think of what else could be happening. I have noticed recently that the images uploaded using "Manage Custom Files" have been changing randomly, causing me to have to change my CSS. I don't know why.

When using DevTools, I was not able to see any HTML element with the class name ".custom-shape-divider-top-1666204514" Is there maybe an HTML code snippet that is supposed to go with it? If not, I found this blog post explaining how to achieve slanted sections in Squarespace 7.1 seems to have good reviews: https://www.rebeccagracedesigns.com/blog/slanted-sections-squarespace-7-1

You could use the class selector to select .site-tagline. This will ensure only the tagline is applying the CSS rule instead of all paragraphs, unless you wanted all paragraphs to have that font-family then you would just use your initial code snippet. .site-tagline { font-family: 'Hind' !important; }

No problem, glad I could help!

Try this code and see if it works. I removed the CSS rule that hides the header action buttons, which includes the shopping cart. // Move Over Button // .sqs-block-button .sqs-block-button-element--medium { -webkit-transition: ease-in-out 0.5s !important; -moz-transition: ease-in-out 0.5s !important; -ms-transition: ease-in-out 0.5s !important; -o-transition: ease-in-out 0.5s !important; transition: ease-in-out 0.5s !important; } .sqs-block-button .sqs-block-button-element--medium:hover { margin-left: 50px; -webkit-transition: ease-in-out 0.5s !important; -moz-transition: ease-in-out 0.5s !important; -ms-transition: ease-in-out 0.5s !important; -o-transition: ease-in-out 0.5s !important; transition: ease-in-out 0.5s !important; } // Move Over Button // .sqs-block-button .sqs-block-button-element--medium { -webkit-transition: ease-in-out 0.5s !important; -moz-transition: ease-in-out 0.5s !important; -ms-transition: ease-in-out 0.5s !important; -o-transition: ease-in-out 0.5s !important; transition: ease-in-out 0.5s !important; } .sqs-block-button .sqs-block-button-element--medium:hover { margin-left: 50px; -webkit-transition: ease-in-out 0.5s !important; -moz-transition: ease-in-out 0.5s !important; -ms-transition: ease-in-out 0.5s !important; -o-transition: ease-in-out 0.5s !important; transition: ease-in-out 0.5s !important; } // Move Over Hyperlinks // p a { -webkit-transition: ease-in-out 0.5s !important; -moz-transition: ease-in-out 0.5s !important; -ms-transition: ease-in-out 0.5s !important; -o-transition: ease-in-out 0.5s !important; transition: ease-in-out 0.5s !important; } p a:hover { margin-left: 20px; -webkit-transition: ease-in-out 0.5s !important; -moz-transition: ease-in-out 0.5s !important; -ms-transition: ease-in-out 0.5s !important; -o-transition: ease-in-out 0.5s !important; transition: ease-in-out 0.5s !important; } // Remove Hyphens // p, h1, h2, h3 { -webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; hyphens: manual !important; } /* Medium Button Styling */ .sqs-block-button-element--medium { width: 70% !important; } /* Read More Blog Link */ .blog-more-link { padding: 20px 20px; background: #b0824d; /*background color */ color: white !important; /*font color*/ } .blog-more-link:hover{ background: #b99973; /*background colour on hover */ } .blog-more-link:after { content: b0824d !important; } /***********************/ /* Testimonials Slider */ /***********************/ #block-yui_3_17_2_1_1635624735293_33184 .summary-thumbnail { overflow: visible !important; border: none; } #block-yui_3_17_2_1_1635624735293_33184 .summary-item-list { pointer-events: none; } #block-yui_3_17_2_1_1635624735293_33184 .summary-thumbnail-outer-container { height: 150px !important; width: 150px !important; margin: 0 auto; } #block-yui_3_17_2_1_1635624735293_33184 .summary-title { margin-top: 30px !important; font-size: 1rem !important; font-family: poppins; text-align: center !important; pointer-events: none; } #block-yui_3_17_2_1_1635624735293_33184 .summary-excerpt { margin-top: 30px !important; } #block-yui_3_17_2_1_1635624735293_33184 .summary-excerpt p { font-size: 24px !important; line-height: 1.6em !important; text-align: center !important; } #block-yui_3_17_2_1_1635624735293_33184 .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { color: #A36830 !important; font-weight: 700 !important; font-size: 1.5rem !important; } #block-yui_3_17_2_1_1635624735293_33184 .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-weight: 700 !important; font-size: 1.5rem !important; } #block-yui_3_17_2_1_1635624735293_33184 .sqs-gallery-design-carousel .sqs-gallery-controls { width: 100%; padding-right: 30px; } /* Testimonials Slider */ /***********************/ #block-c1452639f1ecbd178bd5 .summary-thumbnail { overflow: visible !important; border: none; } #block-c1452639f1ecbd178bd5 .summary-item-list { pointer-events: none; } #block-c1452639f1ecbd178bd5 .summary-thumbnail-outer-container { height: 150px !important; width: 150px !important; margin: 0 auto; } #block-c1452639f1ecbd178bd5 .summary-title { margin-top: 30px !important; font-size: 1rem !important; font-family: poppins; text-align: center !important; pointer-events: none; } #block-c1452639f1ecbd178bd5 .summary-excerpt { margin-top: 30px !important; } #block-c1452639f1ecbd178bd5 .summary-excerpt p { font-size: 24px !important; line-height: 1.6em !important; text-align: center !important; } #block-c1452639f1ecbd178bd5 .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { color: #A36830 !important; font-weight: 700 !important; font-size: 1.5rem !important; } #block-c1452639f1ecbd178bd5 .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-weight: 700 !important; font-size: 1.5rem !important; } #block-c1452639f1ecbd178bd5 .sqs-gallery-design-carousel .sqs-gallery-controls { width: 100%; padding-right: 30px; } // Solid Underline Form // .field-list .field-element{ border-color: #cdd4cc !important; border-bottom: solid 1px #a36830 !important; border-left: none !important; border-right: none !important; border-top: none !important; background-color: #ffffff !important; } .field-list select:focus{ outline-color: #cdd4cc !important; } .field-list .section{ border-color: #cdd4cc !important; } /* 768 for tablet - desktop - 992 for desktop */ @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none; } /* show burger */ .header-burger { display: flex; margin-left: 20px; } /* Show overlay mobile menu */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } } @font-face { font-family: 'script'; src: url('https://static1.squarespace.com/static/61a48696766fd36658dc8003/t/61aba729d189d475b3cd7db2/1638639402020/Reman.ttf'); } h4 {font-family: 'script';} // 3 Images Per Row On Mobile - 7.1 Version // @media only screen and (max-width: 640px) { .sqs-layout .sqs-gallery-design-grid-slide { width: 33.3% !important; } }

Hello! To achieve this, you would need to have some basic understanding of HTML, and you'll also need to have at least a Squarespace business plan so that you can access code blocks. First, add a code block where you want to include the poem. Then, Copy and paste the below snippet as a template for the poem, and modify the text. Lastly, copy and paste the CSS code snippet in Custom CSS and change the line-height and margin-left properties as needed. The <br> elements are line breaks, so just add those wherever you want the line breaks to occur. You can add this code snippet to any code block on your site and it should fix the styling. HTML <p class="poem-excerpt"> Ah youth. Can you remember? <br> A time when our passion was so large <br> we thought that we could live on it, <br> as poor artists thrive on the dreams <br> they paint and live on winkles. </p> CSS //Start: Poem Excerpt Styling .poem-excerpt { line-height: 3; margin-left: 40px; } //End: Poem Excerpt Styling

By using DevTools, I was able to find that the image in the middle is larger than it's wrapper, so the CSS is being applied, but because it is larger than the container, it is just not showing. Instead of applying the bordering around the <img> element, apply the bordering CSS to it's parent element, ".summary-thumbnail img-wrapper". I pasted the CSS below: .summary-thumbnail img-wrapper { border: 2px solid !important; border-color: inherit !important; border-radius: 12px; }

Could you post a link to your site so that we can investigate the issue?

Hello! The mobile views for the slider are meant to be placed below the content on mobile (see first picture). After using DevTools to look at this issue on your site, it seems that you have some custom code that is setting a max-height property for that specific page section, and that is cutting off the arrows completely on mobile since they are at the bottom of the page section (see second attachment).

Hey there! Do you have a Squarespace 7.0 or 7.1 site? It would also help if you posted a link to the relevant page.

Is Google Chrome up-to-date? If not that, the only other thing I can think of is if you have custom JavaScript or plugins installed on your site, that can sometimes cause editing conflicts in edit mode. If that's the case, you can disable custom code while editing your site.