Ziggy

Try this adjustment of your code: //columns number dance group (new)- desktop section[data-section-id="6265da30a06e8a480cbe78d2"] .blog-basic-grid { grid-template-columns: repeat(8, 1fr) !important; } //columns number dance group (new) - mobile @media only screen and (max-width:768px) { section[data-section-id="6265da30a06e8a480cbe78d2"] #gridThumbs { grid-template-columns: 1fr 1fr !important; } } Please let me know if this works (or not), and upvote if it does!

Yes, you need to target your homepage either by adding the collection ID in CSS or in the page header injection, but I think you need this in your Custom CSS: #collection-5f1049435db09b32638d151e { .Header-branding-logo, .Mobile-bar-branding-logo { -webkit-filter: invert(100%); filter: invert(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(invert='1'); } } Please upvote if this has helped you, cheers!

Fantastic, glad I could help, can you upvote my answer if you get a moment? Thanks!

This thread should help you:

You're targeting the desktop logo, but you also need to target the mobile logo with this class: .Mobile-bar-branding-logo something like this: .Header-branding-logo, .Mobile-bar-branding-logo { -webkit-filter: invert(100%); filter: invert(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(invert='1'); } Make sure to keep the page targeting that you've already worked out. Hope this helps!

Hi @ajwtaylor, can you try adding this to the Custom CSS on your website: #collection-5c90f4a40cf57db23ae74c6c { .BlogList { pointer-events:none !important; } .BlogList-item-readmore { display:none !important; } } Please let me know if this works!

Try this thread: https://forum.squarespace.com/topic/154773-form-blocks-multiple-columns/?do=findComment&comment=385136

Hi JakeLake, try this to make the text size responsive to the browser width when on mobile. Add to the Custom CSS. @media only screen and (max-width:640px) { [data-section-id="61e99335f5b8f86607fd6963"] .gallery-grid-item .gallery-caption .gallery-caption-wrapper p.gallery-caption-content { font-size: 3vw !important; } }

This probably isn't the best fix, but the first link is missing a top padding of 6px, and this should correct that: .products.collection-content-wrapper .nested-category-tree-wrapper .category-link { padding-top:6px !important; }

Hi KatieQ can you try adding this code that I've slightly adapted from https://www.rebeccagracedesigns.com/blog/summary-two-columns-mobile @media only screen and (max-width: 640px) { .summary-item-list:not(.sqs-gallery-design-carousel) { display: flex; flex-wrap: wrap; } .summary-item:not(.sqs-gallery-design-carousel) { width: 45% !important; margin: 4vw 2vw !important; } } I've add a :not that should exclude the carousel from this code. If you want the code just to apply to post in that blog, you can put the CSS into the Post Blog Item Code Injection in the Blog Advanced Settings, just remember to put it within <style></style>. Please let me know if this works and upvote, thanks!

You're right, that won't work for a code block. But you should be able to set the image to fill the <div> and hence the code block and that should fix the bottom alignment. Alternatively finding a way to use an image block with the hover effect might work better.

The padding on this page is set to 8vw, so the wider the screen the bigger that padding will be. It's a pretty easy fix. Add this Custom CSS: .blog-item-wrapper article.entry { padding-top:40px; padding-bottom:40px; padding-left:4vw; padding-right:4vw; } You can adjust the values to your liking.

Hi! You shouldn't need to use CSS given that you're using Fluid Engine. Go into the settings for the image and for the button, and in the Design tab, set both to Fill instead of Fit. This will mean that they both take up all the space in the grid and line up. At the moment the image is not filling the grid and therefore is not aligned in the same way as the button. Let me know if this helps!

If you can contact me via my website, and give me access, I can help you get this installed and working. https://squarefortytwo.com/

Try adding this code to the Custom CSS on your website: .gallery-lightbox-background { background-color: #ffffff; opacity: 1.0; } Adjust the opacity (currently 1.0, to between 0.0 and 1.0), and you can change the color if you want as well.

The line breaks are responsive to the width of the device that you're looking on as well as the scaling on your phone, so this can be challenging to make look identical to everyone. You could adjust the heading font size just on mobile in that section using a vw property rather than rem or px, that would make the font size vary depending on the width of the device, and would do a better job of keeping the text on three lines as you want it. Can you share the password for the website? I can provide you with a little custom CSS that should achieve this look for you.

Did you read through and add the footer injection code suggested here: https://sf.digital/squarespace-solutions/make-squarespace-list-items-clickable

Hi, try this CSS, you can adjust the filter type and brightness, as well as the transition speed to your liking: .eventlist-column-thumbnail img { transition:ease-in-out 500ms; } .eventlist-column-thumbnail:hover img { -webkit-filter: brightness(0.8); filter: brightness(0.8); }

It looks like the navigation bar at the top is a "secondary navigation" using this plugin: https://www.will-myers.com/products/p/secondary-navigation-for-squarespace-71 I'm not specifically familiar with this myself, but from the thumbnail images it does appear to have the functionality to convert the last link into a button with CSS. I would reach out to whoever installed this or ask in the support for the plugin. Hope that helps!

You can use a media query to hide and display different image blocks on mobile/desktop, something like this: // Blocks to hide on desktop @media only screen and (min-width:750px) { #block-yui_3_17_2_1_1662597656415_29097 { display:none; } } // Blocks to hide on mobile @media only screen and (max-width:750px) { #block-yui_3_17_2_1_1661988335368_69640 { display:none; } } Add new block IDs separated with commas as you need more instances.

In codepen it's written in HTML pug and SASS rather than HTML and CSS that you need for Squarespace. not too tricky to convert, try this in a code block: <div class="container"><input id="start" name="controls" type="radio" /><input id="stop" name="controls" type="radio" /><input id="reset" name="controls" type="radio" /> <div class="timer"> <div class="cell"> <div class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell"> <div class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell divider"> <div class="numbers">:</div> </div> <div class="cell"> <div class="numbers tenminute movesix">0 1 2 3 4 5 6</div> </div> <div class="cell"> <div class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell divider"> <div class="numbers">:</div> </div> <div class="cell"> <div class="numbers tensecond movesix">0 1 2 3 4 5 6</div> </div> <div class="cell"> <div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell divider"> <div class="numbers">.</div> </div> <div class="cell"> <div class="numbers millisecond moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell"> <div class="numbers tenmillisecond moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell"> <div class="numbers hundredmillisecond moveten">0 1 2 3 4 5 6 7 8 9</div> </div> </div> <div class="timer-controls"><label for="start"> <i class="fa fa-play"></i></label><label for="stop"><i class="fa fa-pause"></i></label><label for="reset"><i class="fa fa-refresh"></i></label></div> </div> and put this into the Custom CSS: .container { padding: 20px; display: inline-block; text-align: center; position: relative; left: 50%; top: 30%; transform: translate(-50%, -50%); } input { display: none; } .timer { padding: 10px; overflow: hidden; display: inline-block; } .timer .cell { width: 0.6em; height: 60px; font-size: 50px; overflow: hidden; position: relative; float: left; color: #555; } .timer .cell .numbers { width: 0.6em; line-height: 60px; font-family: "Roboto Mono"; text-align: center; position: absolute; top: 0; left: 0; } .timer-controls { margin-top: 10px; } .timer-controls label { cursor: pointer; margin: 0 20px; font-size: 20px; border-radius: 50%; color: white; display: inline-flex; width: 70px; height: 70px; justify-content: center; align-items: center; } .timer-controls label:nth-child(1) { background-color: #4caf50; } .timer-controls label:nth-child(1):hover { background-color: #81c784; } .timer-controls label:nth-child(2) { background-color: #f44336; } .timer-controls label:nth-child(2):hover { background-color: #e57373; } .timer-controls label:nth-child(3) { background-color: #2196f3; } .timer-controls label:nth-child(3):hover { background-color: #64b5f6; } #stop:checked ~ .timer .numbers { animation-play-state: paused; } #start:checked ~ .timer .numbers { animation-play-state: running; } #reset:checked ~ .timer .numbers { animation: none; } @keyframes moveten { 0% { top: 0; } 100% { top: -600px; } } @keyframes movesix { 0% { top: 0; } 100% { top: -360px; } } .moveten { animation: moveten 1s steps(10, end) infinite; animation-play-state: paused; } .movesix { animation: movesix 1s steps(6, end) infinite; animation-play-state: paused; } .tenhour { animation-duration: 360000s; } .hour { animation-duration: 36000s; } .tenminute { animation-duration: 3600s; } .minute { animation-duration: 600s; } .tensecond { animation-duration: 60s; } .second { animation-duration: 10s; } .millisecond { animation-duration: 1s; } .tenmillisecond { animation-duration: 0.1s; } .hundredmillisecond { animation-duration: 0.01s; } Finally, I would recommend targeting the CSS to the Code Block ID, as it has some rather general classes that would likely affect other parts of your website negatively.

If you can contact me via my website I'll see what I can do to help you with this, I'll need access to the dashboard to effectively get this working: https://squarefortytwo.com/

Add the HTML in a code block in place of the two text blocks. You'll have to replace the placeholder text with your text and links. HTML: <div class="grid2"> <div class="grid2-item"> <p class="preFade fadeIn">Column One</p> <p class="preFade fadeIn">Column One</p> <p class="preFade fadeIn">Column One</p> </div> <div class="grid2-item"> <p class="preFade fadeIn">Column Two</p> <p class="preFade fadeIn">Column Two</p> <p class="preFade fadeIn">Column Two</p> </div> </div> Add this to your Custom CSS: .grid2 { display: grid; grid-template-columns: 1fr 1fr; padding: 10px; gap:20px; } .grid2-item { text-align: left; }

Hi, try this code, it should work for just the homepage, I think that the colour is correct, but you can adjust the #HEX if needed. #collection-63169d1b2a89ee474abc6b88 { .header { background: #2B2A29; } #header a { color: #ffffff !important; } #footer-sections .section-background { background: #2B2A29; } }