unavolta

@tuanphan Any ideas for this one? Thank you for looking

@tuanphan Slightly more complex - I have a pointed divider that was added with Squarespace's new section divider styling (see screenshots). I have applied it to the bottom section on all pages including the blog list. I also want it to appear on the blog post detail pages but there's no option in the design menu for this (I have already sent a support ticket to Squarespace to add in this feature). I want the pointed edge to appear below pagination on ALL blog post pages and also work with the footer reveal coding added in so the footer reveals behind the divider on scroll (See other pages for proper functionality). I was able to add the design to the bottom of the footer to pull the coding from if needed but there is no option to add the design to the top of the footer. https://housestudios.squarespace.com/ pw: house

Thanks @tuanphan Would this work with a footer reveal too? How do I add the divider to the top of the footer? I only see how to add to the bottom of a section? I've added to the bottom for testing here: https://housestudios.squarespace.com/ pw: house

@tuanphan @bryncmorg I am also looking for a similar solution to this - I've utilized Squarespace's new section dividers to create a unique divider at the bottom (before footer reveal) of all pages for a client's site and the exception is that I am unable to get it work on blog post pages because I cannot add a section below the blog post. https://housestudios.squarespace.com/ pw: house

@nadiamcleod88 Not yet!

@ZiggyWe are using iOS and it's specifically the pagination links to nav between portfolios - requiring a double click when trying to navigate on mobile. Works fine with single-click on desktop. No code for hover effects, although site animations are turned on.

Post updated Site: https://ocelot-tomato-8d52.squarespace.com/portfolio1?password=ginger

Hello - I am trying to solve for the double-click links on mobile that is happening when trying to navigate portfolios on mobile. The pagination links require clicking twice to actually navigate. This post says it may be the site animation but how can I turn off site navigation for pagination on mobile only? or on the mobile site as a whole on mobile only? Is there a better way to solve for the double-clicking of links on mobile to make it single-click? Site: https://ocelot-tomato-8d52.squarespace.com/portfolio1?password=ginger

@paul2009 Running into this problem too, except I am using Fluid Engine to create an overlapping moodboard with captions, thus unable to go back to classic editor without a bunch of messy CSS to get the images how I like. The caption locations are not resizing appropriately for tablet or mobile or smaller screens (mobile I can adjust manually but not tablet or smaller screen sizes). Has there been an image caption solve for this yet? Site: https://www.alisonspada.com/work-iii-kc-copy/

Logo placement looks good now but when you scroll down, the header still cuts the bottom of the logo above the tagline "Creative Direction + Brand Strategy" which in this case is embedded in the logo file. See screenshot. I want the header to cut below the logo tagline so you can still read it while scrolling (ie. more bottom padding).

@tuanphan It is working but slightly buggy and the logo is not appearing at first when I load the site, only after I downsize the window and then make it larger again. and then when it is appearing, it cuts it horizontally when it scrolls down. Can you take a look? Screenshots: Thank you,

@tuanphanDone, thank you. https://alisonspada.com/

@tuanphan Any luck here? Running into the same issue on another site. I added the above code but the logo is off-center https://www.alisonspada.com/ Looking for Logo (Center) and Navigation (Right)

@tuanphanI figured it out 🙂 and got it to work in header on the specific pages I wanted with this code in the page header code injection: <style> .header-actions-action a[href*="substack"] { background-image: url(https://static1.squarespace.com/static/61e7443d8270c01ce2239916/t/6240b25db51f1159dbbe011b/1648407133383/substack2_blue.png); } </style> and on the social icon list in a specific block with this code in custom CSS: div #block-bf044cab69af258d3349 { .sqs-svg-icon--list a:nth-of-type(3){ background-image: url(https://static1.squarespace.com/static/61e7443d8270c01ce2239916/t/6240b25db51f1159dbbe011b/1648407133383/substack2_blue.png); } }

@tuanphan Close here - this code stacks the full event info into two columns like this: This code also only works on true mobile, not when I size my screen down to mobile on desktop - I'd like to see this here too. but i want to achieve different pairings side by side so it's: column one next to column two then column three next to column four + decrease spacing between these two rows so they look like they belong together then the next row (leave larger padding here to distinguish the next event) column one next to column two then column three next to column four and so on

@tuanphanThanks! Close - Part 1) I got it to work to #15284C on the mobile menu by removing the body.header section and changing the URL to a new .PNG of the #15284C file Code: //substack color on mobile menu only// @media screen and (max-width:767px) { header#header a.icon[href*="substack"] svg { display: none; } header#header a.icon[href*="substack"] { background-image: url(https://static1.squarespace.com/static/61e7443d8270c01ce2239916/t/6240b25db51f1159dbbe011b/1648407133383/substack2_blue.png); background-size: 100%; background-repeat: no-repeat; }} Part 2) but in the header on light mode on certain pages like Book I want it to be the color #15284C, not black. I tried adjusting a few filters but can't get the right color or change the direct URL of the icon like for the mobile menu. #15284C URL: https://static1.squarespace.com/static/61e7443d8270c01ce2239916/t/6240b25db51f1159dbbe011b/1648407133383/substack2_blue.png

@tuanphan Also looking to do this for adding a Substack logo the social icons. I have been able to add it in in one color but I want it to shift from white to blue based on light or dark setting. & in mobile popup menu dark theme: https://www.melinahammer.com/ light theme: https://www.melinahammer.com/book pw: melina Want it as-is (White) here: Want it to be blue here:

@tuanphan Done. https://www.melinahammer.com/book pw: melina Thank you for looking!

@tuanphan Thank you for this thread! I have a similar request here. I am close but just need help with the text alignment and padding between rows on mobile. melinahammer.com/book pw: melina In the Upcoming Events section, I am looking to keep it as-is on desktop and pair two text blocks next to each other in mobile view. I'd like to align "Date" and "Event Title" next to each other and then "Location" and "TBD/Get Tickets" Section on the next row and next to each other. I also want the text to appear all center aligned - some is a bit wonky if the title is longer. See below "Now Serving LA - In Conversation with Julia Turshen" is misaligned I'd also like to decrease spacing between these two rows on mobile so it's clearer which info goes together and leave a bigger gap before the next listed event. Mobile View: My code so far: @media screen and (max-width:767px) { div#page-section-61f08b5a70fb144f88181a2b .sqs-col-1.span-1 { width: 40% !important; float: left !important; align: center !important; } .sqs-col-2.span-2 { width: 50% !important; float: left !important; text-align: center !important; } }

@tuanphan I am trying to do this same thing having three buttons appear side by side on mobile instead of stacked. I updated your code above with my page section ID but to no avail. Can you take a look? Thank you as always! https://tuna-avocado-cgfe.squarespace.com/test-home pw: test /* 3 buttons side by side */ @media screen and (max-width:767px) { div#page-section-6171ac076dfa283371c5eb31 .span-10>.row:nth-child(3) .col { width: calc(~"33.3333% - 20px") !important; float: center !important; margin: 10px !important; } div#page-section-6171ac076dfa283371c5eb31 .span-10>.row:nth-child(3) .col * { font-size: 12px; } div#page-section-6171ac076dfa283371c5eb31 .span-10>.row:nth-child(3) .col .button-block { padding: 0 !important; } }

Site URL: https://chartreuse-porcupine.squarespace.com/ https://chartreuse-porcupine.squarespace.com/ pw: xina At the bottom of each of my individual project pages, ex: https://chartreuse-porcupine.squarespace.com/fashion-1/rag-bone there used to live pagination to navigate to previous or next project. I just realized it disappeared. Any insight on how to get it back? Here is the custom CSS I have on the site: //static1.squarespace.com/static/59398e67e3df28736be0d30a/t/596b9804ebbd1adaead85938/1500223492127/Suave+Regular.otf @font-face { font-family: 'Suave'; src: url('//static1.squarespace.com/static/61159858f0f2a610ca811169/t/6161fc93c5fb4846c3e41123/1633811603115/Suave-Regularv2.woff22') format('woff2'), url('//static1.squarespace.com/static/61159858f0f2a610ca811169/t/6161fc93c5fb4846c3e41123/1633811603115/Suave-Regularv2.woff2') format('woff'); font-weight: normal; font-style: normal; } h2, { font-family: 'Suave'; font-weight: 400; font-size: 40px; } h3, { font-family: 'Suave'; font-weight: 400; font-size: 30px; } .newsletter-block { .newsletter-form-header-title { font-size: 18px } .newsletter-form-wrapper { padding: 0 1px; } input { height: 0.1em; max-width: 20em; } .newsletter-form-button-wrapper { margin: 0; } .newsletter-form-button { padding: 6px; text-transform: none; font-size: 0.9em; } } .header-nav *, nav.header-menu-nav-list * { font-family: Suave; font-weight: 500; letter-spacing:2px } header-nav *, a:hover { font-family: 'suavebold' !important } .header-menu-nav-item a { font-size: 40px; } @font-face { font-family: 'suavebold'; src: url('//static1.squarespace.com/static/61159858f0f2a610ca811169/t/612428ffe16be149a6f18427/1629759743065/suave_bold-webfont.woff2') format('woff2'), url('https://static1.squarespace.com/static/61159858f0f2a610ca811169/t/61242661c1401a255da8087c/1629759073909/suave_bold-webfont.woff') format('woff'); font-weight: bold; font-style: normal; } .portfolio-hover-item-content { font-family: 'suavebold' ; transition: all 0.5s; } span.portfolio-hover-item-content:hover { color: black ; transition: all 0.5s; } .portfolio-title { font-family: 'suave' !important; } footer.sections a { font-family: 'suave' !important; } footer.sections * { text-decoration: none; background-image: none !important; } footer.sections a:hover { font-family: 'suavebold' !important } p.gallery-caption-content { font-family: suave !important; font-size: 24px !important; } .gallery-grid-item-wrapper:hover img { opacity: 0.8; } /*MOBILE PADDING BETWEEN IMAGES*/ @media screen and (max-width:767px) { .gallery-masonry-item-wrapper { height: auto !important; padding: .5em; box-sizing: border-box; }}

Removed. Thank you for your help here. https://shallot-leopard-twxs.squarespace.com/ pw: carden

The site is currently on trial but will be on the Personal plan. Thank you

@Agha_WaqasThat worked thank you!

Site URL: https://shallot-leopard-twxs.squarespace.com/ Hello - I am seeking a way to stack my image blocks earlier than mobile. When I size my screen down on desktop, two of my sections look wonky with too much space below the image and text not resizing but on mobile version, they look great. https://shallot-leopard-twxs.squarespace.com/ pw: carden I do not want them to look like this: Instead, I want them to auto adjust to look like the mobile version, stacked and images full width I do have the following CSS to force these two sections full width: // Full Width Image Card - Page Section // [data-section-id="607a55e6300cc60f862fb6d4"] { overflow-x: hidden !important; overflow-y: hidden !important; .content-wrapper { padding: 0px !important; margin: 0px auto; display: contents; } .sqs-layout .sqs-row .sqs-block { padding-bottom: 0px !important; padding-top: 0px !important; }} // Full Width Image Card - Text Padding // .image-card-wrapper .sqs-dynamic-text-container { padding: 40px !important; } // Full Width Image Card - Page Section // [data-section-id="607d9cfc2ad03b5b77542454"] { overflow-x: hidden !important; overflow-y: hidden !important; .content-wrapper { padding: 0px !important; margin: 0px auto; display: contents; } .sqs-layout .sqs-row .sqs-block { padding-bottom: 0px !important; padding-top: 0px !important; }} // Full Width Image Card - Text Padding // .image-card-wrapper .sqs-dynamic-text-container { padding: 40px !important; } Thank you! Kayla