Search the Community

Site URL: https://www.mcbrydeandco.com/acreditations2 Hi all, Doing some edits to a clients existing 7.0 site and looking to implement a Carousel Gallery Block to house their awards. I'm looking for some help on 2 bits of custom CSS;- 1) Styling Arrows to match the above ones using Will Myers Index Carousel 2) Adding a Title underneath each image Is anyone able to offer any advice and support on these 2x issues? Link - https://www.mcbrydeandco.com/acreditations2 (Currently building on a non-linked page) Thanks, Jonathan

Site URL: https://lime-kumquat-d247.squarespace.com/ Hello! On my client's website, the desktop view looks like this: But the mobile view looks like this: How do I make the mobile view image maintain the same proportions as the desktop version? The password is bap for the website.

Site URL: http://vitamincolor.com/order-box Hey there, I have two questions regarding my site: Website: www.vitamincolor.com Password: vitamincolor1989 1. I'm trying to create a carousel on the product page (not linked) and in the product block (ORDER PAGE in the main navigation). For now only one image shows on the product block and images on the product page are stacked. 2. I would like to deactivate the link that enables users to click on when they hover the product block and redirects them to the product page. I want that the only action possible for them is to add to cart in order to avoid confusion. Thank you in advance for your help, Best, Eleonore

Site URL: https://www.llanonewhomes.com/new-homes Is there a way to add lightbox to carousel images? The floor plans on this website are currently displayed using Squarespace's new auto-sections, but I'm not seeing a lightbox option anywhere. Thanks in advance!

Site URL: https://www.venturacoach.com/why-coaching I have a card carousel section in several pages on my website and they display fine on desktop but when I go to mobile I have to click an arrow to scroll through them and I want the cards to be displayed when I scroll down (vertically) instead of having to click an arrow. Does anyone have code for this? I've seen some code for blog posts but not for carousels. Thanks!

Site URL: http://www.matthiasmievis.be Hi I collect reviews through another platform and can use a <code> to display these reviews on my website. So far I am able to implement this code on my website so that it appears properly. However, is it possible to display these in a carousel on my website? In other words, can I create a carousel with a <code>? The intention would be that one review is visible and then a new review appears evere few seconds. Thanks in advance for your help. Matthias

I am looking to add a feature on my photos page that displays a diffrent image each day (This could be a photo carousel that transitions every 24 hours) Any ideas / solutions welcome! 🙂

Hi there, I'm curious as to how I would go about creating clickthrough URL's on the individual cards I created in Figma. I'm utilizing an image content section that is designed as a carousel and I uploaded hard designed/flattened "cards" as images in the carousel. I want to make each card it's own clickthrough link to that companies website. I have the option of creating buttons as clickthrough's that live beneath the cards, but I want the clickthrough to live directly on the individual card/image components themselves. Anyone have an idea on how to do this? (I'm proficient in coding so feel free to drop some ideas when it comes to DOM manipulation).

Site URL: https://hexaflexagon-beagle-y2r2.squarespace.com Hi @tuanphan I have a huge space between the title and temoignage carousel that I would like to reduce on mobile version. Can you help me ? Thank you ! Here is the code : //Témoignages - Game Changer// section[data-section-id="61bc5a05a27d2613355219a5"]{ .user-items-list .list-section-title p { font-family: ivypresto-display, serif!important; font-weight: 100; font-style: normal; text-transform: uppercase; }} .user-items-list-item-container[data-section-id="61bc5a05a27d2613355219a5"] .list-item-content__title{ font-family: roc-grotesk-wide,sans-serif; font-weight: 400; font-style: normal; text-transform: uppercase; font-size: 20px!important; color: #684B51!important } .user-items-list-item-container[data-section-id="61bc5a05a27d2613355219a5"] .list-item-content__description{ font-size: 16px!important; } section[data-section-id="61bc5a05a27d2613355219a5"]{.list-section-button{ font-family: roc-grotesk-wide,sans-serif; text-transform: uppercase; font-size: 15px; line-height: 22px; background: #684B51 }} section[data-section-id="61bc5a05a27d2613355219a5"]{.user-items-list-banner-slideshow__arrow-icon-background-area{ background: #684B51!important; opacity: 1!important }} section[data-section-id="61bc5a05a27d2613355219a5"]{.user-items-list:hover .user-items-list-banner-slideshow__arrow-button{ opacity: 80%!important }} https://hexaflexagon-beagle-y2r2.squarespace.com/game-changer Pass : Jennifer

Site URL: https://fennel-dog-saf6.squarespace.com/ Hi, is there any way I can replace the left / right arrows of my carousel to a set of buttons (similar to the photo attached), on both browser and mobile? (Squarespace 7.1.)

Site URL: https://kale-penguin-3t5z.squarespace.com/ Hi all, I'm designing a new website using the new Auto-Layout section in a carousel layout as a testimonial slider. However, I don't like how the mobile arrows are so far down, on the very bottom of the section (and therefore underneath the testimonial). I've tried to move them up with CSS, but the actual container itself won't seem to budge. Would love to get these towards the top, on either side of the photos. Any help would be appreciated! Website: https://kale-penguin-3t5z.squarespace.com/ Password: danacoaching Section in question: testimonials on homepage towards the bottom of the page Thank you! Best, -Scott

Site URL: https://koi-wombat-6mrh.squarespace.com/ Hello - There is a very large space between the title and the content in the image block I am using on the 'Abundant Living' page on my website. Does anyone have CSS to reduce the space between the title and the carousel?

Site URL: https://something-blog.squarespace.com/ Question for mobile optimization on Headline Carousel Section: ON MOBILE, I am trying to center align the content of Headline Carousel Section (.user-items-list-carousel) and show adjacent slides with .5 opacity. the carousel is center aligned on desktop, but on mobile, i was only able to get it to span full width of viewport. I don't know what the name for ACTIVE SLIDE IN VIEW so please can someone help? Please, refer to attached mockup of the UX I'm trying to achieve. Thank you so much! Website: ---> https://something-blog.squarespace.com/ Password: ---> demo

Site URL: https://pepper-blenny-nxk3.squarespace.com/config/design/custom-css Hi - does anyone know how to change the background colour of the image card in a carousel? https://pepper-blenny-nxk3.squarespace.com/config/design/custom-css Password; Pauline123

Site URL: https://pepper-blenny-nxk3.squarespace.com/config/design Hi, I can't figure out how to change the colour of the card background in the carousel. I want it a darker grey to stand out more. Any help would be much appreciated!

Site URL: https://darylsmotors.squarespace.com/?password=pearler Could anyone help to get the carousel images for the Instagram gallery feed a bit bigger on mobile? Current code: @media screen and (max-width: 640px) { section[data-section-id="61a97df776e17365441fb3d6"] { .sqs-gallery-design-strip-slide { height: 25vh !important; overflow: scroll !important; } .sqs-gallery-design-strip { height: 250% !important; } } } thanks!

Site URL: https://cyan-sailfish-ljdz.squarespace.com/ Hey there, I'm trying to add watercolor background images into the caption text box of my carousel. Please see current one vs what I'm trying to achieve in the attachments (photoshopped). I cannot code at all so would really appreciate the help! Thanks, Red

Site URL: https://cosmotemplate.squarespace.com/?password=pearler Wondering why this Instagram slider carousel is appearing cut off on some devices?

Site URL: https://www.samadamssculpture.co.uk/projects I am trying to edit the style of the index pages on my site. The default in the Forte Template is for full bleed background images that run in a slideshow: https://www.samadamssculpture.co.uk/projects https://www.samadamssculpture.co.uk/bespoke-builds However I would like to change the image format to a carousel, like the one used on the gallery plages of the template: https://www.samadamssculpture.co.uk/gallery-display-desk Is there a way that I can do this in the custom CSS? Thank you!

Site URL: https://www.testvalleypkg.co.uk Hi I was hoping someone can help me change the carousel that is on the home page (image attached) so that on mobile you see multiple images in the list next to each other, rather than just one image and navigation buttons quite far below. Thanks

Site URL: https://wolverine-ocelot-sszh.squarespace.com I've been trying to find a way to make my logo and navigation transparent and sit over the top of my carousel header. Would anyone be able to help with this please? I'm using Squarespace 7.1 I also have another question. Is there a way to make the carousel on my website play automatically? Thank you so much 🙂

Attached is the desktop vs mobile. I’m trying to get mobile to show 3 rows across too. (Ignore the repeat of images, I just haven’t inputted all of them yet)

In this page of my site: https://www.unswaseanconference.com/about-asean-2021 I want to make the caption of each image in my list carousel to only appear on the centre of the image and also only appear when the image is hovered. Any help on this will be greatly appreciated. My idea is for it to be like the one discussed on this post: However, that post only works for summary. When I tried applying it to my code, it didn't work

Site URL: https://shop.jonathan-gallagher.com I have a gallery carousel, Brine, that changes the number of images visible depending on the screen width. I'd like one image to always be on the carousel when first viewed. It would be simple enough if this was always the first image, on the left of page, however that's not the case here. For example, I'd like it to be at position 6 out of 6 on desktop, and going down to position 3 out of 3 on phones. I was planning to use a reorder css, and have tried to find a "child" parameter in the inspect css, but no luck. e.g .carousel image:nth-of-type(6) { order: 3; } Any help greatly appreciated

Site URL: https://lobster-ray-g42d.squarespace.com/who-we-are Hello! I am trying, without success, to change the title font (which is the names of the people) in the carousel. Does anyone have any code to help me with this? This is what I tried: .user-items-list-title { font-family: 'BreweryProLight' !important; font-size: 25px !important; letter-spacing: 4px; } Thank you!