Ziggy

@Violinmaker If you have an image block edit the page, then click the pencil arrow to edit the image settings, in the pop-up click on the Design tab and you should see a lightbox toggle option that you can turn on. https://support.squarespace.com/hc/en-us/articles/205812708-Setting-images-to-open-in-a-lightbox

Hi @Venera, try this adjustment to your code: <a href="#top" class="t-top"><span class="arrow"></span>Back to top</a> <style> /* Back to Top */ .t-top { text-align: center; display: block; font-family: 'VeneraUtopia' !important; font-size: 1.2em; } .t-top .arrow:before { font-family: 'VeneraUtopia' !important; content: "*"; text-align: center; display: block; font-size: 2.5em; line-height: 0.5em; margin-top: 0.3em; } .t-top .arrow {display:inline;} html {scroll-behavior: smooth;} </style> adjust these lines to exactly how close you want the * to the text below and the section edge above: line-height: 0.5em; margin-top: 0.3em; I also added this line to scroll smoothly back to the top instead of jumping, remove if you don't want it. Please let me know if this worked, and upvote if this was helpful!

Hi @SarahCrewe can you share the password for your website?

For a scroll down arrow, refer to this helpful forum posting:

Hi @throughthenoise To get the section to be full height you need to set the section settings to L or 100, this sets the page to be minimum 100vh (100% of the viewport height).

Hi , try this edit to your CSS: .header-nav-item:nth-child(5) a { background: #0092b3 !important; color: #FFFFFF !important; width: 160px; letter-spacing: 0.2em; font-weight: 700 !important; border-radius: 0px; text-align: center !important; transition:ease-in-out 300ms; &:hover { background: #000000 !important; } } .header-nav-item:nth-child(6) a { background: #0092b3 !important; color: #FFFFFF !important; width: 160px; letter-spacing: 0.2em; font-weight: 700 !important; border-radius: 0px; text-align: center !important; transition:ease-in-out 300ms; &:hover { background: #000000 !important; } } Adjust the background color and transition time to suit your design and preference. You can also add an new property within the &:hover{} if you want to have more transition changes to the button style. Please let me know if this worked, and upvote if this was helpful!

Hi @ShuiFeng, you should be able to do this without code. In Fluid Engine, you control the design on mobile separately to on desktop, so if you edit the page, then click on the mobile icon (top-right of screen), scroll down to the section and drag the scroll-block width to the left edge and then right edge, and it should now appear scrolling edge-to-edge on mobile. Please let me know if this worked, and upvote if this was helpful!

Hi @Nikitaly, with most 7.0 templates you can add blocks into the intro section at the top of the page when editing, but it looks like on your website you can only put in a title and description via the page settings. If that's correct you may only be able to add an image via a snippet of code. Would you be willing to share an invite to your website so that I can check and potentially help you do this?

Hi @SimonFr, this code is simply running every time the page loads, I'm not sure if you're going to be able to add anything to it to recognize that it's played before, you would need quite a different approach probably involving cookies to track when a user had visited previously to prevent it playing every time they go to the homepage. Sorry I can't be more useful with my answer!

Hi @Maksymrewko, despite the background colour of the blog defaulting to the same as the section background on the main page, you should be able to update the individual blog colour backgrounds when editing the page. You could do it with CSS so the default is white, but it's best to avoid CSS when you can. Hope this helps!

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.