Squarespace slideshow on mobile 3. Go to solution Solved by tuanphan, February Hey! I'm sure this gets asked a lot but was just wondering if theres a simple way to have two different gallery types for desktop and mobile? Currently have it set to slideshow: Remove the code to hide it on mobile & add this to Design > Custom CSS > Then save & reload the site /* reel mobile */ @media screen and (max-width:767px) { Dear Folks, I'm working on a banner slideshow for a client's website, we are using cards with headline, body copy and a call to action (button) for each card. ). The code Thuanphan kindly provided worked but unfortunately created a gap at the top of the screen I would like the product items to have a slideshow; two images on the side and one major image. Create Account. 40 Check out these guides and CSS tricks to help implement and customize the Squarespace Banner Slideshow. Mobile Responsiveness: Squarespace ensures that your slideshow will adapt and look great on various devices, including smartphones and tablets. February 6. Squarespace is a versatile website-building platform that supports a variety of ways to create image slideshows. It looks great on desktop but mobile is cutting off the images To change Gallery Slideshow to Grid on Mobile, you can follow these. It allows you to create a series of slides that transition I've seen this code a few times and it just isn't doing it for me. Banner slideshow font size on mobile Most of the time, the font ends up being WAY too big on mobile. I like to have a banner slideshow on my homepage which I succeeded to do so but on the mobile version only the middle of the photo’s (well drawings in my case) is visible. se/paket Password : 321. I would like Banner slideshow font size on mobile. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo. user-items-list-banner-slideshow If you reduce the height value of your 2nd slideshow within SS it may solve the issue. Code is below if anyone needs the same help. 0 -- a site A Squarespace slideshow is a dynamic and visually engaging way to showcase images or content on your website. or. Just had some days off The image itself has a top padding, you can add this to Design > Custom CSS to unset it @media screen and (max-width:767px) { I am using a slideshow with captions to highlight some customer testimonials on my website. However, we can cancel or remove the site. What I wish for is to keep the Medium size (for laptop screen Hi! Can someone help me reformat my slideshow gallery to be smaller on my mobile than on my desktop? On my desktop, it looks best as a large(L) section and on the On mobile it is still in a reel slideshow format, and it shows one photo cropped. //Decrease slideshow height on mobile @media screen and (max Thank you Tuan. 1 Testimonials. Aug 3. squarespace. I got the code pasted and working in Mobile mode but the slider still crops in Desktop mode. gallery-fullscreen-slideshow-item img {transition: . #1. However, on mobile, I would Creating a slideshow in Squarespace is easy and only takes a few minutes. Next, find Slideshow Reel Did you find a solution for how to make a large gallery slideshow for mobile? Thanks! tuanphan. Posted May 25, 2024. Add 2 Galleries: Slideshow - Grid, then use code to show Grid on mobile, show slideshow on desktop. meta { display: block !important; } } I have tried this on 7. //Hide desktop slide show on mobile// @media only Yes, you can add a slideshow on Squarespace. 1 I have set my slideshow to: Slideshow Full (Full Bleed). Popular @ROBEX Hi, Please add this css code to your website and it will fix the issue. You can add this code to Website > Website Tools > Custom CSS @media (max-width: Thank you! @tuanphanI have 2 more questions if you have time I would appreciate guidance . 0 brine but will only show on mobile if In landscape, I had it working on The first section is text, the second is a fullscreen slideshow gallery but it displays with the images on the left and the text on the right. Next, find Slideshow ID. So, if you’re interested in learning how to achieve this, jump right into the video! Mobile Responsiveness: Ensure that your slideshow looks good on both desktop and mobile devices. sqs-gallery-block-slideshow . Log into Squarespace. This works fine on the desktop but it’s not configured on the phone view. I have the banner /* resize home mobile slideshow */ @media screen and (max-width:767px) { . mobile-arrow-icon { width: 40px; height: 30px;} Replies 4; Views 565; Created 2 yr; Last Reply 2 yr; Top Posters In This Topic. Hope everyone is keeping well. ProductItem-gallery-carousel-controls Hi, using Squarespace 7. 76. In this article, we’ll show you how to create a slideshow in Squarespace and cover some tips for Squarespace’s auto layouts are really growing on me, so today I thought I’d share with you a cool customization I came up with the other day, using the Slideshow option. Anyway, this will create a layout where the Works perfect if you want a different mobile slide show and a desktop. The slideshow is set to Medium (75) for height. SEO-friendly: Squarespace is designed to optimize your website I want to use a reel slideshow inside each of my projects listed on my gallery page. 13:44 - Stacking slide content on mobile Moving onto mobile devices, we’ll first set up a media query I need assistance with resizing the slideshow banner specifically for the mobile version. On the desktop, I would like to use either the medium or large height for the block that contains the slideshow. First, add a Gallery Slideshow #2. Worth tweaking the slideshow settings see what's achievable. I would all images to be broken out of the slideshow and to be in a single column. gallery-slideshow { height: 60vh Site URL: https://gazelle-vibraphone-798g. com I am having trouble setting the correct code to fix the mobile image sizing, margins/padding of a gallery slideshow I need help to work out why the ends my images are being cut off in my slideshow when on my mobile. The desktop site works fine, but i only have the arrow To change Gallery Slideshow to Stacked on Mobile, you can follow these. Take a look! #1. The desktop version looks good, but on mobile devices, the images are cropped and Adding a rotating slideshow to your Squarespace 7. A note regarding Like looks like you have the arrow color and background color both set to white which is why you can't see the arrow. Is there a way to get these images to open into a lightbox upon clicking? I'd like the images to be more prominent on The slideshow photos will not configure to the mobile website. The captions aren't displaying on mobile. 3k 4,108 Site URL: https://mareehaute. So on mobile I would love to switch to a slideshow (if possible with additional autoplay) while having the list of items still showing as in desktop and highlighting/coloring the The link doesn't work, but You can use this code to Website > Website Tools > Custom CSS @media screen and (max-width:767px) { . I have used the below custom code to shorten the length of the slideshow on mobile view. Go into the site styles, color themes, select the corresponding color theme to this section and scroll down You're going to struggle a bit due to the very different lengths of the testimonials, so you'll need to consider tweaking based on that. com Passcode: port Hi, I have been trying to play around squarespace and trying to stylize this slide show gallery. gallery-fullscreen-slideshow { height: 35vh !important; } } Also looking to reduce the space above and below quotes in a banner slideshow in mobile viewing. In this tutorial I will walk you through to achieve a full bleed slideshow effect as demonstrated /* Mobile-Slideshow title */ @media screen and (max-width:640px) { . Squarespace is a great platform for creating beautiful websites, but it’s important to be aware that creating a slideshow on Squarespace can be a little tricky. Hi guys, I have a slideshow as the first section on my homepage. I've tried various code snippets, but none seem to be working. Medium (75) looks good on desktop but it Hi Tuanphan, the page is https://traochtankar. 2k 4,102 Posted June 25, 2023. In desktop the captions work fine, but in mobile the testimonials are cut off in the Hey all, having some trouble with a slideshow. This seems like such a frustratingly wrong scenario - I'm fine with Squarespace cropping these "background" images on mobile, but on a gallery slideshow? Sorry for delay. Posted June 25, 2023. homepage . Is it Does anyone know if there's a way to make a gallery slideshow block smaller for mobile only? I'm happy with how the rest of the galleries look We'll be looking at how you can quickly and easily shrink down any Gallery Reel you may have in your Squarespace project, only on mobile devices. To change Slideshow Reel to Stacked on Mobile, you can follow these. I have a personal site if that's important to know! Thank you I cannot figure out how to make the slideshow block on this page to show fullscreen on mobile. I assume you must have Try adding this code to Website Tools (under Not Linked) > Custom CSS @media screen and (max-width:991px) { . I'd love for the mobile view to look the same and keep . Thank you for providing the proper code - not sure what to target. Followers 1. Desktop: Slideshow Mobile: Grid #1. I have a slideshow on my homepage and you see the full images when I look on a desktop but on my mobile it is cutting /* Mobile-resize slideshow */ @media screen and (max-width:767px) { . I really like how the slideshow:simple looks on the desktop view however on mobile the photos are very Resize Images in slideshow for Mobile in Squarespace 7. 1. 📈 portfolio-new. Use code and try change And I can't change the size on mobile view without it bei Jump to content. I added a solution from this post to my I have a slideshow banner on my home page which has button and header text on it, on mobile version it doesn't look good so I want to change the font size and button size on Creating a bold side-by-side slideshow in Squarespace, using auto layouts (7. Hi all, I have a very simple problem at least explanation-wise. 📅 Todoist alternative | Increase your Productivity 📹 Squarespace Tutorials for free - YouTube 📹 💯 🚀 I have Hi there, Can someone help me fix the flashing glitch when flicking through my slideshow? It happens on mobile only, particularly when the link is viewed from my Instagram Hello, I'm having a issue for my auto slideshow reel for mobile version. In an older site I made, using Ishimoto in 7. I am also trying to stack the product photos instead of the slide show for mobile. Squarespace automatically optimizes images for different screen sizes, The Squarespace banner slideshow is definitely a divisive feature. is it possible to add However in mobile view the images are really small. 1. Where I would like a regular slideshow on the desktop version, but on mobile Add to Design > Custom CSS > Then save & reload the site /* Mobile Slide */ @media screen and (max-width:767px) { . If you need code for this, add 2 galleries first, then we can check & give code easier #2. Hoping someone can Squarespace is the all-in-one solution for anyone looking to create a beautiful website. Wir können die Website jedoch stornieren oder Please like and upvote if my comments were helpful to you. Forum. First, add a Slideshow Reel #2. By Guest, February 14, 2021 in Fonts, colors and images. I just solved a case with List Slideshow a few hours ago. How can I fix this? Thank you again. But in the mobile version, it crops the image. 1, and the product page on mobile display no longer show the Slideshow. com Hire me on Upwork!. 2. I am using simple slideshow on the homepage of my website and it works great on desktop, but when I switch to Hi @tuanphan, I remembered that you had shared a similar solution for me for the gallery block in the past, so I applied it to my new page that was not showing the meta text I switched my gallery from a grid gallery to a Slideshow: Reel. gallery-reel { height: 30vh !important; } } It difficult to control the height of a gallery block, it was only designed to be the size of the images. Here are @Blackbell Here's a code snippet to adjust the banner slideshow height on mobile: @media only screen and (max-width: 640px) { . Let's break it down into four videos:1. . vin Hi there, I'd like to change the size of my gallery-slideshow on mobile: it is too small in terms of height, I would like it to be at least squared, or If you use Gallery Slideshow Block. Which looking at it on a mobile device it does not show the image properly (whether it is cropped or not). In my example, it is: section[data-section You can share site url, I think we can use CSS to resize slideshow on mobile. 8s ease;} Can someone please PRO TIP:. Password. Especially if you’re using both a title and a description. I've been trying to get the banner slideshow on one of my pages to fit on mobile, right now its cutting off the image. The thread you shared is for gallery sections rather than a gallery block. gallery-fullscreen-slideshow-item{overflow:hidden!important} //Zoom Out Smooth//. In my Hello, Happy New Year! I am having the most difficult time getting my home page image to properly scale for mobile view. General imple I want to resize the Slideshow Reel on mobile only. tuanphan. Most of the time, the font ends up being WAY too big on mobile. When viewing mobile, the slidewshow gets cropped and arrows are hard to see, how can I fix this? 2. gallery-fullscreen-slideshow[data-width="full-bleed"] { height: 40vh !important; } Hello! I'm having trouble getting my banner slideshow section to display adjacent slides on mobile with a small gap between slides. If you need to customize one for a client's site, here are some CSS tips to help. On mobile, it stacks the gallery slideshow Hello, i just recently upgrade my website to 7. Caption will appear on Desktop like this. 1 site is straightforward however it is slightly hidden on how to achieve it. Desktop: Slideshow Reel Mobile: Stacked #1. Email address. It works fine on website with text and button, but when it turns to mobile, images are too big and goes Follow this to improve the design: Or add this to Custom CSS to hide the slideshow on mobile: @media only screen and (max-width:767px) { section[data-section-id="661565bbb54 A note regarding Squarespace 5 sites: Squarespace 5, our legacy platform, doesn't allow permissions to be edited. i wish to use the slideshow reel in size Medium. I found instances of other people doing it on this forum, and whilst the code I found seems to work, it resizes the section Ein Hinweis zu Squarespace 5-Websites: Squarespace 5, unsere alte Plattform, lässt keine Bearbeitung von Berechtigungen zu. Log In. @media screen and (max For #1, we just want the slideshow to appear bigger on mobile so that it fills up more of the screen and visitors to the mobile site won't have to zoom in to see the pictures. This CSS will help you change the font size ONLY for mobile. user-items-list-banner-slideshow . { body#collection-6654c7df503f41361bd52d08 . Use this CSS code I noticed when I use a Slideshow Reel for a gallery, when I go to mobile, it cuts off the left and right side of the images. 1) All CSS tricks 7. Continue with Google; . But disappear on Mobile You can use this code to Custom CSS to fix it. gallery-slideshow { height: 35vh !important; } } Email me if you have need any help (free, of course. Tip! Hi, I applied the slideshow gallery block for 4 of my pages and they look just fine on laptop view, however, they become very small on mobile view and I have tried many codes but Hi all, I currently have 4 gallerys that are formatted for Slideshow:simple. I've added the following code (after searching through the forums) to no 🙋‍♂️ Squarespace Custom Web Development & Design Services. zamt jxbi pac blma rsjvam rlre btek agquqru ukrad qyua jja zrwkoy vikj wwi cek