gcart

I was wonder the same

Hi @drunkbeetle, welcome to the forum!
While you could technically use code to have 2 different sets of design, it's not a good idea for your site's health or for SEO. Sometimes it makes sense to hide 1 section and show another on mobile but that's on a small scale.
There are things you can change on mobile view that don't impact the desktop design:
Button size Layout of items (text, images, etc.) Image size Text block size However, you can't change the below without it modifying on desktop:
Image alignment Text alignment or color Settings to list items Basically, you can move items and change the boundary box without it altering your desktop design -- these changes are more about where items go. However, changing the content or styling of a text box, image, etc. will appear on both desktop and mobile. 
💡 If you're designing on a monitor, your settings and window size may modify the mobile preview. I'd highly recommend updating a section and then checking on your phone to see if the two versions are close. If they aren't, you may need to adjust your set up. 
There is CSS that can be applied to modify list carousels, text styling, and more. If there are specific places where you're struggling, post your issue with a screenshot, link, and password (if your site isn't launched yet, you'll need to go to Settings > Site Visibility > Password Protected and set a password). 😊
 

My biggest issue is that you have to do a lot of tweaking to the mobile design with positioning and spacing. On platforms like WordPress with Divi, it intelligently lays out the responsive flow and still allows you to tweak it. This is a much faster approach that how Squarespace currently handles it.
On the current site I am building in SS I need to tighten up massive gaps between column content on mobile. Just a lot of extra steps per section per page.

This is an interesting site with a sidebar.
You can scroll down to the images and/or click on an image and a column of thumbnails opens up between the sidebar and the images. Pretty slick but possibly confusing with the scroll or click for the sidebar.
 
https://www.emmawebster.com/paintings

You mean
When users is on landing page >> automatic play music?
This is possible but it will annoy the user
 

Thank you. If its a matter of code, then I shall approach it with a different perspective. I appreciate the help, thank you for your time!

Hello does anyone know how to implement this menu /header with css? https://www.stasstemplate.com

I am looking for the same thing.
 

I believe I am on the right track trying to use variants as "add-ons" to a service. But I think that the drop down menus are not fluid for the customer experience as the add-on could just be a quick clickable box.  Is there anyway to achieve this in squarespace commerce? Below is an example of a website that functions the way I would like mine to function.
 
https://www.audioanimals.co.uk/shop/studio-services/mastering

Ridiculous that I can't adjust the transition speed for a gallery in 7.1!. Seems so basic. The fade transition is so fast that it's hardly noticeable. If it's a full screen slider, this is highly annoying – too abrupt! Just contacted help and it's not possible. Every free JS slider plugin out there has that option. Really? 

Has anyone found a free or low-cost GDPR-compliance solution that works with a small Squarespace site, that is actually compliant with GDPR legal requirements?
After spending the afternoon reading, it doesn't appear that the [cookie banner] GDPR solution that Squarespace makes available to its own customers is compliant. Interestingly, it is also not the one they use for their own corporate website(s). 
A cookie banner alone does not meet GDPR requirements. There must be valid, documented, reversible and renewable consent. Consent must be obtained prior to processing, and be transparent and customizable by the site visitor (i.e. necessary cookies, other cookies listed by type). Someone who gave consent must be able to revoke consent. "Documentation" means a secure consent repository/database so that we, as site operators, can provide proof that consent was obtained. The database needs to store a record of each user's consent, including how they consented, exactly what they consented to, and the date/time they gave their consent.  
Another issue is that a GDPR-compliant site's privacy policy needs to be transparent. Something as basic as the data collected on a Squarespace form - where and how is it stored and processed? If someone who submitted a form wants their data deleted - how does one do that? 
Since I am not an expert in GDPR, there may be other requirements that I missed. My "solution" for the past 3 years has been to turn off all cookies and explicitly state that the site is not intended for site visitors from the EU. This goes against the purpose of the website, and is not a satisfactory solution by any measure.

Hi I am also searching for a solution. This is not a feature nice to have. From 01.01.2022 on the new requirements for extended cookie banner takes place in the EU.
Try to implement "Cookiebot". They provide a script that has be loaded at first directly after the <head> tag. I take this code and placed it via code injection. So far no problems. But I open the website the new cookie dialog does not appear!
Hier e the code I Inject:
<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="ecd23f64-c412-40fd-8b9e-3091b3641c29" data-blockingmode="auto" type="text/javascript"></script>
Needless to say, if these requirements are not met, a fine can be levied or the website can be warned off.
Actually, I would expect Squarespace to provide their own DSGVO compliant solution here.
Does anyone know why the inserted code is not displayed? Or has someone used another tool and knows how to implement it.
I am grateful for help.
Cheers
Stefan

So far no, I've asked to square space several times for almost more than a year and the answer has always been the same "use our cookies banner" or something that implies that ,but  as you and I know that isn't enough

First, I added Gallery Section with 6 images, enter caption
Next, add a Form Block with Email Field + 6 Hidden Fields

Label: Image 1, Image 2,...
Value: leave default

then I added this code to Page Header
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $(document).ready(function(){ $('figure').click(function(){ $(this).addClass('red-dot'); }) $('figure:nth-child(1)').click(function(){ $('[name="SQF_IMAGE_1"]').attr('value','Yes. I am interested'); }) $('figure:nth-child(2)').click(function(){ $('[name="SQF_IMAGE_2"]').attr('value','Yes. I am interested'); }) $('figure:nth-child(3)').click(function(){ $('[name="SQF_IMAGE_3"]').attr('value','Yes. I am interested'); }) $('figure:nth-child(4)').click(function(){ $('[name="SQF_IMAGE_4"]').attr('value','Yes. I am interested'); }) $('figure:nth-child(5)').click(function(){ $('[name="SQF_IMAGE_5"]').attr('value','Yes. I am interested'); }) $('figure:nth-child(6)').click(function(){ $('[name="SQF_IMAGE_6"]').attr('value','Yes. I am interested'); }) }); </script> <style> .gallery-grid:before { margin-bottom: 40px; content: "Click on each image. It will add to form. Then enter your email and click Submit"; display: block; } .red-dot:before { content: ""; background-color: red; position: absolute; right: 10px; top: 10px; width: 20px; height: 20px; border-radius: 50%; z-index: 99999; } figure { position: relative; } </style> This code will add red dot


When clicking on image 1, code will change default value of Image 1 to Yes. I am interested

Similar for image 2, 3, 4

This is quite manual, I believe there is a better way with someone good at JavaScript. It can be just a Hidden Field or a single Text/Textarea Field, when someone clicks on the image, the code will add the caption of that image to the Hidden/Text Field. Clicking on the second image will add a second caption, separated by commas and so on.

Site URL: https://atsuko-healing-practice.squarespace.com
Hello, Please does anyone know the code for changing my navigation text color, on just one page?
I want to change it on the home page only, not globally.
Thanks for any help. 
ALS

Business Plan will be easier to achieve this. With Personal Plan, will require a lot of code
First, edit Section > Enable Gallery Caption
Next, add some caption for images
Next, Try editing Site Footer > Add a Markdown Block > Paste this code
<script> /** * Add descriptions/captions to galleries in Squarespace 7.1. * JavaScript * © @brandon (Squarespace Forum User) * This software is provided "as is", without warranty of any kind, express or implied. */ document.addEventListener("DOMContentLoaded", function() { addGalleryItemDescriptions(); function addGalleryItemDescriptions(gs, gdzs) { var a=['querySelectorAll','section.gallery-section,\x20.gallery-lightbox','length','[class*=\x27-item\x27]:not([class*=\x27item-\x27])','getElementsByTagName','img','alt','trim','createElement','div','className','gallery-item-description','textContent','appendChild'];var b=function(c,d){c=c-0x0;var e=a[c];return e;};(function(c,d){var e,f,g,h,i,j,k;e=document[b('0x0')](c?c:b('0x1'));i=e[b('0x2')];while(i--){f=e[i][b('0x0')](d?d:b('0x3'));j=f[b('0x2')];while(j--){g=f[j][b('0x4')](b('0x5'))[0x0][b('0x6')][b('0x7')]();if(g){h=document[b('0x8')](b('0x9'));h[b('0xa')]=b('0xb');h[b('0xc')]=g;f[j][b('0xd')](h);}}}}(gs,gdzs)); } }); </script> Next, add this to Design > Custom CSS
/** * Add descriptions/captions to galleries in Squarespace 7.1. * CSS * © @brandon (Squarespace Forum User) * This software is provided "as is", without warranty of any kind, express or implied. */ body { width: 100%; } section.gallery-section [class*='-item']:not([class*='-item-']):not([class*='-reel']):not([class*='-slideshow']) { position: relative; } .gallery-item-description { font-family: "Roboto", sans-serif; font-size: 16px; color: black; } .gallery-grid, .gallery-strips, .gallery-masonry, .gallery-reel, .gallery-fullscreen-slideshow { .gallery-item-description { position: absolute; width: 100%; bottom: 0; background-color: rgba(255, 255, 255, 0.7); padding: 2% 6%; box-sizing: border-box; } } .gallery-slideshow, .gallery-fullscreen-slideshow, .gallery-reel { .gallery-item-description { padding: 10px 25px; opacity: 1; transition: opacity 0.2s; } .gallery-slideshow-item:not([data-in="true"]), .gallery-fullscreen-slideshow-item:not([data-in="true"]), figure[style*="-9999"] { .gallery-item-description { opacity: 0; } } } .gallery-slideshow { .gallery-slideshow-list { position: static; } .gallery-slideshow-item-wrapper, .gallery-item-description { flex: 1 1 auto; } } .gallery-reel { .gallery-item-description { text-align: center; left: 50%; transform: translateX(-50%); } &[data-width="inset"], &[data-width="inset"] { .gallery-item-description { max-width: 88vw; } } &[data-width="full-bleed"] { .gallery-item-description { max-width: 100vw; } } } .gallery-lightbox .gallery-item-description { margin-top: 1em; padding: 1em 2em; background-color: rgba(225, 225, 225, 1); transition: opacity 0.1s ease-out; } .gallery-lightbox-item[data-in=false] .gallery-item-description { opacity: 0; }  

Site URL: https://www.magnusriise.no/illustration
Hi, I'm trying to change the color behind the picture/illustration when using a light box, in my gallery. It doesn't look good when you can see the other illustrations in the background.
I found this code, that helped with the opacity: 
.yui3-lightbox2 .sqs-lightbox-overlay {
  opacity: 1 !important;
}
.gallery-lightbox-background {
    opacity: 1 !important;
}
It would look much better with solid white, so the white background in my illustration doesn't show. Anyone know what I can do?

.gallery-lightbox-background { background-color: #fffeaf; opacity: 1.0; } Try that, hope it helps.
 

This was a life saver for me. I'm pretty done wih the dark and light lightbox backgrounds. This is much better.
Thanks,
George Cartwrtight

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.

Hi, Do you still need help?

I'm having the same problem! So weird it's not an option in the color styles!!

I made my logo with Pixelmator using a screenshot from one of my banner images, made an oval, and scrawled my name. I like how the signature goes off the background
I do like it but am just about ready for a change.
 
Best Wishes,
George Cartwright

Hi,
Edit page > Click Mobile icon on top right > Then you can adjust its position. This won't affect desktop

Here is the answer! I asked SQUARESPACE HELP and they got back to ASAP. 
"To disable Fluid Engine on your site, visit the Settings > Circle Labs panel, check Disable Fluid Engine, then click Save."
Phew.