Get FREE access to my Private Facebook Group and a FREE eBook outlining the 5 steps you can accomplish right now to take your Squarespace Website to the next level 👉 www.rebeccagracedesigns.com/squarespace-tips-and-tricks
Amazing! Thank you so much. This solved a major problem in my site. We wanted to showcase products and have an inquiry form, rather than having a 'shop' and add to cart function. We added a form, and now it is exactly what we need.
Hi! This is super helpful thank you! I am running into the issue where my padding for the section is now off from how all of my other sections are on this page. Typically, I would just drag the section smaller, however the text box is doing something wonky where it won't let me size it down past a certain point, but it's massive compared to the amount of text in the box. Do you have any suggestions for how to adjust this? Appreciate your videos :) Thank you!
This video was incredibly helpful, thank you so much! But I have a question-how can I place an image gallery in the center and have text boxes on both sides? I'd really appreciate your help with this!
Hi there...I tried this with the new code and nothing happens when I add the collection ID and section numbers. I am using squarespace fluid engine so I'm not sure if that makes a difference. Any suggestions?
@RebeccaGraceDesigns Will this also work for an image block, instead of text? I'd like to have 2 static photos on either side of an automatic carousel gallery! Thanks!
This is great Rebecca ! Although if I use block number 1 as my slideshow and block number 2 as my text the top of these blocks wont align. The gallery block aligns to the bottom of the header and the text block stretches all the way up beneath the header to the top of the page. What could be done?
The code used in the video should center align both sections. Try making sure both sections have the same settings. Do you have other custom code on your site that may be effect either the slideshow or the text block?
thanks, just what I was looking for, it works perfect on one page but is there a way it can work on two different pages? When I do it on one page it changes back on the other page..
To add this code for direct injection (Page/Settings/Advanced) a slight modification is required, you no longer need the collection ID @media only screen and (min-width: 640px){ #page .page-section:nth-of-type(2) { width: 50%; min-height: 100vh; align-items: center; float: left; } #page .page-section:nth-of-type(3) { width: 50%; min-height: 100vh; align-items: center; } }
@@RebeccaGraceDesigns Follow up: do you know of a method to change the order of sections when switching to mobile view? I have seen and used the methods for switching blocks inside sections, but can find nothing on how to display, for example, section 2 before section 1 in mobile view (regardless of the side by side technique!) Thanks
Yes you can! You can use the same code as above. It will place two sections next to each other regardless of what the content is. To help them align, make sure that you have the settings the same for both sections. The height of the section will be determined by the height of the tallest image. So to perfectly align the sections make sure all your images are the same orientation and size.
Great guide and easy to follow. Quick question. When I enter everything into CSS everything lines up perfectly, text left, image right. However when I back out and go to view it the text is back on top and the image is below. Do you have any idea why it does this?
This code uses a media query so that it re-stacks on smaller screens. It is possible, you are viewing it from a smaller screen so it is re-stacking. Sometimes this can also happen if there is an error somewhere in your code. If that is the case, sometimes Squarespace doesn't render the CSS on the Live Site.
Rebecca, thank you so much for this! Only one issue, when I inspect- there's no 'collection' ID, only body ID=Item. Not sure if Squarespace has changed but does not work.
Hi Rebecca, how can you change padding on this so the text on the left flows further across the page and closer to the image on the right? I can't figure it out. Thanks for the video.
@@RebeccaGraceDesigns thanks! That definitely made it look a bit better, I had to increase the section width using the slider to compensate but seems to have worked!
Thanks Rebecca, great video! I'm building a portfolio site where I'll have dozens of pages setup identically with a gallery section beside a text section. Is there a way to create a list of section ID's, and have the rest of the code snippet reference that list and uniformly apply to every page in that list? It would also be great so that if I want to change the horizontal percentage, I'd have one global setting to modify, rather than updating each and every code instance.
Also, in the editor - changes to the section widths seem to update immediately just fine, but when I view the site live, no matter what I have set, the sections just split the page evenly 50/50.
Depending on what you are creating there may be a better way for you to get this look without using this code over and over for each section. I would be happy to discuss your options with you during a 1:1 Help Session. You can find out more and book a call time at www.rebeccagracedesigns.com/coaching
Yep! If it's on the same page you can use commas to minimize the code. For example, you can do... @media only screen and (min-width: 641px) { #COLLECTIONID { #page .page-section:nth-of-type(2), #page .page-section:nth-of-type(4) { /*second and forth section on the left*/ width: 50%; min-height: 80vh; align-items: center; float: left; } #page .page-section:nth-of-type(3), #page .page-section:nth-of-type(5) { /*third and fifth section on the right*/ width: 50%; min-height: 80vh; align-items: center; } #page .page-section:nth-of-type(6) { /* sixth section full width again */ clear: both; } } }
Thank you for sharing! One question: The text has become super long with big gap (over 200 lines between them) and I cannot seem to edit the text block after applying the CSS. I'm using the newest version of Squarespace with the Fluid Engine, i.e. grid blocks. Is there a way I can do it? I'm now just removing the CSS and editing the text again.
Thanks so much, super helpful! Is it possible to have different texts with each image, so that each text with each image slides together to the next one?
Hello! Not with the code provided in this video. You may be able to achieve this using a Summary Block and some custom code. I would be happy to show you some solutions during a 1: 1 Help Session. You can find out more and book a call time at www.rebeccagracedesigns.com/coaching
Hi Rebecca, Thank you for this! Is there anyway that we can move the same sections so that they are closer together i.e not to the left or right just on top to look like part of the same section?
@@RebeccaGraceDesigns thanks Rebecca that still didn't align to look like the same section so I added in some CSS to push them together. Thanks for replying to my comment!!
Thank you. When I do this, the content block below the desired text and gallery blocks also get's offset. Is there a way to fix this? I triple checked and it's not a code issue, and both blocks are set to the same height. The reason appears to be that my text is longer than the gallery (takes up more vertical space), so the block below set up inside with the gallery.
Yes! Thank you for pointing this out. It looks like the code did need to be updated. Try this out! @media only screen and (min-width: 641px) { #COLLECTIONID { #page .page-section:nth-of-type(2) { /*second second on the left*/ width: 50%; min-height: 80vh; align-items: center; float: left; } #page .page-section:nth-of-type(3) { /*third section on the right*/ width: 50%; min-height: 80vh; align-items: center; } #page .page-section:nth-of-type(4) { /* forth section full width again */ clear: both; } } }
To place text above the Gallery just add a section and make the height small. You can use some CSS to remove more padding if you like. If you want text on either side of the gallery I would suggest using a page that allows a Gallery Block instead of a Gallery Section.
Help! when I add this code it is across all pages so when I make a second page that I want to have the text and gallery next to each other the first one goes back to the original format. How do I do this to multiple pages please?
If the sections are in the same place, you can add in both collection ids with a comma in between. For example, @media only screen and (min-width: 641px) { #COLLECTIONID, #COLLECTIONID { #page .page-section:nth-of-type(2) { /*second second on the left*/ width: 50%; min-height: 80vh; align-items: center; float: left; } #page .page-section:nth-of-type(3) { /*third section on the right*/ width: 50%; min-height: 80vh; align-items: center; } #page .page-section:nth-of-type(4) { /* forth section full width again */ clear: both; } } }
Amazing! Thanks! little question - my background is white but I can see a little dark background shape underneath the text. any tips for turning into white or just fix it?
It is hard to know what is causing that without seeing the site. I would be happy to help you with this during a 1:1 Help Session. You can find out more and book a call time at www.rebeccagracedesigns.com/coaching
I had the same issue, I was getting black boxes under one of the sections. I fixed it by going to site styles...colors... then changed the Sitewide section background and Sitewide Background overlay to white for the first theme (I think Squarespace uses whatever your first theme is as the default for a new page).
To add text above or below, you can just add another section by clicking on the blue arrow. You can then set the section height to small or use CSS to remove any spacing.
Thanks so much! This is hugely helpful. That said though, once the two sections are next to one another I'd really like to have them aligned towards the center of the entire page (not just their respective sections) with a small space in between. I've tried to figure out a way to set that up but I've come up empty. Any insights?
Hmm.. that's a tricky one. I don't think there is a way to do this with code (not without something super complex anyways...). The best way to do this would just be to make sure the sections above and below are the same size. So set the header and footer to be the same size, etc.
Ok the more I play with this, the more I'm feeling it really doesn't work at all. Can you clarify? It appears that the way the two side-by-side blocks are displayed depend entirely on the size of the monitor and/or the browser window, such as if it's not maximized. The two blocks DO NOT remain consistent in size, and as such the next block below get's shifted all over the page (such as up and under the right side, not filling the width of the page). Am I missing something? Was there an update that made this obsolete? Squarespace really made such a simple task complicated eh?
Yes! Thank you for pointing this out. It looks like the code did need to be updated. Try this! @media only screen and (min-width: 641px) { #COLLECTIONID { #page .page-section:nth-of-type(2) { /*second second on the left*/ width: 50%; min-height: 80vh; align-items: center; float: left; } #page .page-section:nth-of-type(3) { /*third section on the right*/ width: 50%; min-height: 80vh; align-items: center; } #page .page-section:nth-of-type(4) { /* forth section full width again */ clear: both; } } }
Thank you for this, very helpful! One doubt: what should the code look like if I wanna add text INTO a full weight Gallery carousel? Great tutorial and well explained
This would vary depending on how your site is set up. Is there a reason you want it inside of the Gallery Section? There are ways to make it look like it is the same section without using code.
Yes, this method still works. As of right now, you cannot add text in a Gallery Section. If you are a Circle Member you have access to a Gallery Block on all pages which you can also use to get this effect. Otherwise, you need to use code.
@@RebeccaGraceDesigns The code is in custom css, but once the collection ID is pasted from inspect element and inspect element closes the changes do not save.
Hello. This would require a bit more custom code. I would be happy to help during a 1:1 Help Session. You can find out more and book a call time at www.rebeccagracedesigns.com/coaching
First, double check you are in Squarespace 7.1 and not 7.0. Then I would check that you have the correct collection id. If you are still having trouble, I would love to help you on a 1:1 Help Session. You can find out more and book a time at www.rebeccagracedesigns.com/coaching
It's hard to know for sure without seeing your site. I would be happy to work with you on this during a 1:1 Help Session. You can find out more and book a call time at www.rebeccagracedesigns.com/coaching
This is great but the problem is I can no longer edit the section on the left side because once I move my cursor away the edit section part goes away and I can only edit the right side. Thank you though Rebecca. This does work so nothing against all your hard work. I've used your hard work on other things and will continue to do so. This is a SS issue. I just can't wait until they take something else away. I think it's time I find a wordpress teacher 😂
As a workaround, you can "turn off" the code before you edit the sections and then turn it back on when you are done. To do this put a /* at the start of the code and then a */ at the end.
This is silly. Why does Squarespace not implement proper solutions to these things? Like it's so not flexible... I chose this website cause I can't code for shit. I paid for this service and now I have to do all this... This is very stupid. I already paid for this so I'll stick with Squarespace, but I feel like WordPress is a better choice. Thanks for the video btw, very useful stuff!
@@RebeccaGraceDesigns There are options, but there is no side by side options. I have set up this custom CSS and now it sort of looks alright, but still, annoying, because if I move a section or add new one, then I have to change indexes so that correct sections are affected by the custom CSS code. Also, you can't configure section content margins, you can set the width, but it is also limited, so you have to write even more CSS... I don't hate Squarespace, just wish it was more flexible, for this price I am paying.
![BLACK BAG - Official Trailer [HD] - Only in Theaters March 14](http://i.ytimg.com/vi/Du0Xp8WX_7I/mqdefault.jpg)
Get FREE access to my Private Facebook Group and a FREE eBook outlining the 5 steps you can accomplish right now to take your Squarespace Website to the next level 👉 www.rebeccagracedesigns.com/squarespace-tips-and-tricks
This is EXACTLY what I was looking for! I hunted through so many videos for hours and almost gave up before I found this. Thank you!
No problem!
Why do I not have this little 'plus' sign on the bottom of the text block where you add a gallery at 1:54??
Amazing! Thank you so much. This solved a major problem in my site. We wanted to showcase products and have an inquiry form, rather than having a 'shop' and add to cart function. We added a form, and now it is exactly what we need.
Glad it helped!
Hi! This is super helpful thank you! I am running into the issue where my padding for the section is now off from how all of my other sections are on this page. Typically, I would just drag the section smaller, however the text box is doing something wonky where it won't let me size it down past a certain point, but it's massive compared to the amount of text in the box. Do you have any suggestions for how to adjust this? Appreciate your videos :) Thank you!
This video was incredibly helpful, thank you so much! But I have a question-how can I place an image gallery in the center and have text boxes on both sides? I'd really appreciate your help with this!
Terrific! Thanks so much for the code and the workaround. It works!! :)
Much appreciated.
Hi there...I tried this with the new code and nothing happens when I add the collection ID and section numbers. I am using squarespace fluid engine so I'm not sure if that makes a difference. Any suggestions?
Same here… I was so excited to try it out, but nothing happened. I would be grateful for any suggestions as well.
Sooo good. EXACTLY what I was looking for. Excellent instructor. So thorough, clear to understand and your cadence is perfect
So glad it was helpful! Thank you for the kind words.
@RebeccaGraceDesigns Will this also work for an image block, instead of text? I'd like to have 2 static photos on either side of an automatic carousel gallery! Thanks!
Yes. It is essentially adding two sections beside each other. So you could put whatever blocks in that section as you would like.
This is great Rebecca ! Although if I use block number 1 as my slideshow and block number 2 as my text the top of these blocks wont align. The gallery block aligns to the bottom of the header and the text block stretches all the way up beneath the header to the top of the page. What could be done?
The code used in the video should center align both sections. Try making sure both sections have the same settings. Do you have other custom code on your site that may be effect either the slideshow or the text block?
Thank you for this, I searched everywhere and yours was the only explanation I could find. Great tutorial and easy to follow :)
Great to hear!
This is so amazingly convoluted!
Where did you get stuck?
thanks, just what I was looking for, it works perfect on one page but is there a way it can work on two different pages? When I do it on one page it changes back on the other page..
You would need to have the code twice; one for each page.
@@RebeccaGraceDesigns thanks a lot, it works fine. It was a great help!
This was an absolute LIFESAVER thanks you soooooo much
You're welcome!
Thankyou, I have been looking for this for two days :)
To add this code for direct injection (Page/Settings/Advanced) a slight modification is required, you no longer need the collection ID
@media only screen and (min-width: 640px){
#page .page-section:nth-of-type(2) {
width: 50%;
min-height: 100vh;
align-items: center;
float: left;
}
#page .page-section:nth-of-type(3) {
width: 50%;
min-height: 100vh;
align-items: center;
}
}
Glad I could help!
@@RebeccaGraceDesigns Follow up: do you know of a method to change the order of sections when switching to mobile view? I have seen and used the methods for switching blocks inside sections, but can find nothing on how to display, for example, section 2 before section 1 in mobile view (regardless of the side by side technique!) Thanks
this is great! thanks so so much, is there a way of adding two galleries next to each other? i'm trying but they won't align
Yes you can! You can use the same code as above. It will place two sections next to each other regardless of what the content is. To help them align, make sure that you have the settings the same for both sections. The height of the section will be determined by the height of the tallest image. So to perfectly align the sections make sure all your images are the same orientation and size.
@@RebeccaGraceDesigns thank you!!
Great guide and easy to follow. Quick question. When I enter everything into CSS everything lines up perfectly, text left, image right. However when I back out and go to view it the text is back on top and the image is below. Do you have any idea why it does this?
This code uses a media query so that it re-stacks on smaller screens. It is possible, you are viewing it from a smaller screen so it is re-stacking. Sometimes this can also happen if there is an error somewhere in your code. If that is the case, sometimes Squarespace doesn't render the CSS on the Live Site.
@@RebeccaGraceDesigns the smaller screen was causing it, thank you for the reply. Love all your videos.
Rebecca, thank you so much for this! Only one issue, when I inspect- there's no 'collection' ID, only body ID=Item. Not sure if Squarespace has changed but does not work.
It sounds like you have the Gallery on a Blog, Event, or Product Page. If you do, you can use a Gallery Block and do not need to use code.
Hi Rebecca, how can you change padding on this so the text on the left flows further across the page and closer to the image on the right? I can't figure it out. Thanks for the video.
You can change the settings inside the section to have the content to the right instead of centered.
@@RebeccaGraceDesigns thanks! That definitely made it look a bit better, I had to increase the section width using the slider to compensate but seems to have worked!
Had a couple of issues along the way but just had to make some minor adjustments. Thank you for your help.
Great to hear!
Thanks Rebecca, great video! I'm building a portfolio site where I'll have dozens of pages setup identically with a gallery section beside a text section. Is there a way to create a list of section ID's, and have the rest of the code snippet reference that list and uniformly apply to every page in that list? It would also be great so that if I want to change the horizontal percentage, I'd have one global setting to modify, rather than updating each and every code instance.
Also, in the editor - changes to the section widths seem to update immediately just fine, but when I view the site live, no matter what I have set, the sections just split the page evenly 50/50.
Depending on what you are creating there may be a better way for you to get this look without using this code over and over for each section. I would be happy to discuss your options with you during a 1:1 Help Session. You can find out more and book a call time at www.rebeccagracedesigns.com/coaching
Ok mine is messing up. I used the updated code. But when i refresh and scroll down i got a blank white section?😢
Would you copy and paste the code you provided on your site a second time if you wished to create another gallery with text on the same page?
Yep! If it's on the same page you can use commas to minimize the code. For example, you can do...
@media only screen and (min-width: 641px) {
#COLLECTIONID {
#page .page-section:nth-of-type(2), #page .page-section:nth-of-type(4) { /*second and forth section on the left*/
width: 50%;
min-height: 80vh;
align-items: center;
float: left;
}
#page .page-section:nth-of-type(3), #page .page-section:nth-of-type(5) { /*third and fifth section on the right*/
width: 50%;
min-height: 80vh;
align-items: center;
}
#page .page-section:nth-of-type(6) { /* sixth section full width again */
clear: both;
}
}
}
Thank you for sharing! One question: The text has become super long with big gap (over 200 lines between them) and I cannot seem to edit the text block after applying the CSS. I'm using the newest version of Squarespace with the Fluid Engine, i.e. grid blocks. Is there a way I can do it? I'm now just removing the CSS and editing the text again.
Moving the sections around or changing their widths, messes with the Fluid Engine editor view. I have not found a way around this yet.
@@RebeccaGraceDesigns Thanks. I hope Squarespace fix it somehow.
You have such a great teaching style! Perfect pacing and way of explaining things, thank you for this!
Thank you for those kind words. You're very welcome!
Thanks so much, super helpful! Is it possible to have different texts with each image, so that each text with each image slides together to the next one?
Hello! Not with the code provided in this video. You may be able to achieve this using a Summary Block and some custom code. I would be happy to show you some solutions during a 1: 1 Help Session. You can find out more and book a call time at www.rebeccagracedesigns.com/coaching
Hi Rebecca, Thank you for this! Is there anyway that we can move the same sections so that they are closer together i.e not to the left or right just on top to look like part of the same section?
Hello Lee. If you would like one on top of the other, than just set the sections to have a small height and align the content to the top or bottom.
@@RebeccaGraceDesigns thanks Rebecca that still didn't align to look like the same section so I added in some CSS to push them together. Thanks for replying to my comment!!
Does this still work if the text section is a Fluid Engine section?
Yes, it should!
You saved me from having a meltdown, thank you. Squarespace if you are reading this can't you make this feature a little easier for goodness sake?
Glad to help! Hopefully they will bring back Gallery Blocks for us!
Great simple video that exactly fixed my issue. Thanks.
Glad it helped!
Thank you. When I do this, the content block below the desired text and gallery blocks also get's offset. Is there a way to fix this?
I triple checked and it's not a code issue, and both blocks are set to the same height. The reason appears to be that my text is longer than the gallery (takes up more vertical space), so the block below set up inside with the gallery.
Yes! Thank you for pointing this out. It looks like the code did need to be updated. Try this out!
@media only screen and (min-width: 641px) {
#COLLECTIONID {
#page .page-section:nth-of-type(2) { /*second second on the left*/
width: 50%;
min-height: 80vh;
align-items: center;
float: left;
}
#page .page-section:nth-of-type(3) { /*third section on the right*/
width: 50%;
min-height: 80vh;
align-items: center;
}
#page .page-section:nth-of-type(4) { /* forth section full width again */
clear: both;
}
}
}
Hi Rebecca, what should I do if I want to place a link LEFT of the gallery, a link RIGHT of the gallery and a H1 ABOVE the gallery?
To place text above the Gallery just add a section and make the height small. You can use some CSS to remove more padding if you like. If you want text on either side of the gallery I would suggest using a page that allows a Gallery Block instead of a Gallery Section.
This is so solid! Thank you for your help! A huge sense of relief came over me now.
Great to hear!
Help! when I add this code it is across all pages so when I make a second page that I want to have the text and gallery next to each other the first one goes back to the original format. How do I do this to multiple pages please?
If the sections are in the same place, you can add in both collection ids with a comma in between. For example,
@media only screen and (min-width: 641px) {
#COLLECTIONID, #COLLECTIONID {
#page .page-section:nth-of-type(2) { /*second second on the left*/
width: 50%;
min-height: 80vh;
align-items: center;
float: left;
}
#page .page-section:nth-of-type(3) { /*third section on the right*/
width: 50%;
min-height: 80vh;
align-items: center;
}
#page .page-section:nth-of-type(4) { /* forth section full width again */
clear: both;
}
}
}
@@RebeccaGraceDesigns thank you. : )
Amazing! Thanks! little question - my background is white but I can see a little dark background shape underneath the text. any tips for turning into white or just fix it?
It is hard to know what is causing that without seeing the site. I would be happy to help you with this during a 1:1 Help Session. You can find out more and book a call time at www.rebeccagracedesigns.com/coaching
Mine too
I had the same issue, I was getting black boxes under one of the sections. I fixed it by going to site styles...colors... then changed the Sitewide section background and Sitewide Background overlay to white for the first theme (I think Squarespace uses whatever your first theme is as the default for a new page).
can you do the samething to put the text on top or below the gallery??
To add text above or below, you can just add another section by clicking on the blue arrow. You can then set the section height to small or use CSS to remove any spacing.
This is great Rebecca, exactly what I wanted. How do I target a specific page rather than a collection ID?
Hello Alistair. The collection id will help you target a specific page.
Thanks so much! This is hugely helpful. That said though, once the two sections are next to one another I'd really like to have them aligned towards the center of the entire page (not just their respective sections) with a small space in between. I've tried to figure out a way to set that up but I've come up empty. Any insights?
Hmm.. that's a tricky one. I don't think there is a way to do this with code (not without something super complex anyways...). The best way to do this would just be to make sure the sections above and below are the same size. So set the header and footer to be the same size, etc.
Ok the more I play with this, the more I'm feeling it really doesn't work at all.
Can you clarify?
It appears that the way the two side-by-side blocks are displayed depend entirely on the size of the monitor and/or the browser window, such as if it's not maximized. The two blocks DO NOT remain consistent in size, and as such the next block below get's shifted all over the page (such as up and under the right side, not filling the width of the page).
Am I missing something? Was there an update that made this obsolete? Squarespace really made such a simple task complicated eh?
Yes! Thank you for pointing this out. It looks like the code did need to be updated. Try this!
@media only screen and (min-width: 641px) {
#COLLECTIONID {
#page .page-section:nth-of-type(2) { /*second second on the left*/
width: 50%;
min-height: 80vh;
align-items: center;
float: left;
}
#page .page-section:nth-of-type(3) { /*third section on the right*/
width: 50%;
min-height: 80vh;
align-items: center;
}
#page .page-section:nth-of-type(4) { /* forth section full width again */
clear: both;
}
}
}
@@RebeccaGraceDesigns That seems to have done it!
Thank you so much, this is great!
Thank you for this, very helpful! One doubt: what should the code look like if I wanna add text INTO a full weight Gallery carousel? Great tutorial and well explained
This would vary depending on how your site is set up. Is there a reason you want it inside of the Gallery Section? There are ways to make it look like it is the same section without using code.
This is EXACTLY the design I need. At the time of my message, it is October 2023. Is this method still relevant? Are there any new codes?
Yes, this method still works. As of right now, you cannot add text in a Gallery Section. If you are a Circle Member you have access to a Gallery Block on all pages which you can also use to get this effect. Otherwise, you need to use code.
Mine adds white space under the newly combined sections
You can change the minimum height to adjust to the size of your sections.
I cannot find my collection ID when I click inspect :(
The Squarespace Collection Block Identifier Chrome Extension is a great tool to help!
@@RebeccaGraceDesigns you're amazing!!!!
The changes work when I have inspect element open, but once it is closed the changes undo.
Make sure you are adding the code inside of Squarespace Design > Custom CSS and not in the chrom inspect tool.
@@RebeccaGraceDesigns The code is in custom css, but once the collection ID is pasted from inspect element and inspect element closes the changes do not save.
This could be because there is an error somewhere in your code. It could also be a Squarespace glitch. I would reach out to Squarespace first.
this is exactly what i was looking for.
Glad I could help!
it's gotten the best of me! but haven't given up yet …maybe my section count is off but I'm determined.
I would be happy to help on a 1:1 Help Session. You can find out more and book a call at www.rebeccagracedesigns.com/coaching
This is amazing and EXACTLY what I was looking for, after so much searching, i've found it! Thank you!
Glad I could help!
Is there a way to use this and then have one of the columns scroll and the other be pinned? I'm going crazy looking for a solution
Hello. This would require a bit more custom code. I would be happy to help during a 1:1 Help Session. You can find out more and book a call time at www.rebeccagracedesigns.com/coaching
Nothing changed for me... anyone know why? Thanks for the video even though I couldn't make it work!
First, double check you are in Squarespace 7.1 and not 7.0. Then I would check that you have the correct collection id. If you are still having trouble, I would love to help you on a 1:1 Help Session. You can find out more and book a time at www.rebeccagracedesigns.com/coaching
@@RebeccaGraceDesigns wow, that's so great to know, thank you!
I cannot get this to work. It makes the gallery 1/2 size, but doesn't bring the text down. Not sure what I'm doing incorrectly.
It's hard to know for sure without seeing your site. I would be happy to work with you on this during a 1:1 Help Session. You can find out more and book a call time at www.rebeccagracedesigns.com/coaching
This is great but the problem is I can no longer edit the section on the left side because once I move my cursor away the edit section part goes away and I can only edit the right side. Thank you though Rebecca. This does work so nothing against all your hard work. I've used your hard work on other things and will continue to do so. This is a SS issue. I just can't wait until they take something else away. I think it's time I find a wordpress teacher 😂
As a workaround, you can "turn off" the code before you edit the sections and then turn it back on when you are done. To do this put a /* at the start of the code and then a */ at the end.
ty!
You're welcome!
Thanks for the tip. 1 less reason not to go to 7.1
You're welcome!
This is silly. Why does Squarespace not implement proper solutions to these things? Like it's so not flexible... I chose this website cause I can't code for shit. I paid for this service and now I have to do all this... This is very stupid. I already paid for this so I'll stick with Squarespace, but I feel like WordPress is a better choice. Thanks for the video btw, very useful stuff!
Squarespace has added Gallery Blocks back in. Those may be a better option for you.
@@RebeccaGraceDesigns There are options, but there is no side by side options. I have set up this custom CSS and now it sort of looks alright, but still, annoying, because if I move a section or add new one, then I have to change indexes so that correct sections are affected by the custom CSS code. Also, you can't configure section content margins, you can set the width, but it is also limited, so you have to write even more CSS... I don't hate Squarespace, just wish it was more flexible, for this price I am paying.