I'm using Squarespace for the first time with 7.1 Fluid engine. As far as I can see, almost everything between desktop and mobile is dependent with the exception of block placement within a section and row count. So, you can't switch the order/placement of an actual section within mobile without it affecting desktop. You can't hide a section within mobile without it affecting desktop and vice versa, although I've heard I might be able to do that with custom CSS. You can't set the gaps within a section grid to be different between mobile and desktop. To be honest, if Classic editor was a worse experience for editing mobile, then it must have been terrible. Because the fluid engine is severely limited as far as I can tell.
EXACTLY. I'm having such a difficult time with editing the mobile site without changing the desktop version that I've already perfected. Extremely frustrating.
Hey! Yes, with Classic Editor, you literally couldn't change anything on mobile, unless you used custom code. Yes you're correct, you can't change any of those things. I can't say I've needed any of those features, though, I suppose for some cases they would be helpful. I think Hide/Show for section and blocks for mobile VS desktop would be great. Maybe if you build out multiple "sections" into just 1 section instead of splitting them up into individual sections, then you'll find it easier to move things into the order you need on mobile. Also you can can hide/show sections and blocks on mobile VS desktop pretty easily with custom code.
Fluid engine is helpful and not quite worked out yet! Can I add a block to just the mobile section? Or can I delete a block on one version and not the other? That is a pretty essential feature.
I agree with that! There's lots of room for improvement. That's not possible yet, but surely in the pipeline. For a workaround you can hide it with CSS or just hide it behind another block.
In this video we cover how to design on mobile which is separate from desktop, some of the things are the same (eg the elements/blocks) but you can create a different layout from desktop. So if you move things on desktop they won't move on mobile. Not exactly sure what you're asking :)
It's better to avoid overlapping blocks usually as they don't always resize well/the way you would want to on smaller screens (especially tablet size!). If you do choose to use some overlap, make sure to double check the responsiveness!
Thank you so much for your fab, straight forward videos! I wonder if any of my questions would be video-worthy?! If images can’t be resized separately on mobile than desktop - I think maybe full width background images - is the only option still to code in a different shaped image for mobile with hide and show, or does Fluid change that please? My background images are wide and shallow on mobile and seemingly can’t change the height separately from desktop. If you insert an image into a section and drag it out to be full width, does it change status from being an image to being a background image please? I’m not sure I’ve been able to place an inserted image edge to edge like a full width one though. I’m very confused about the difference between background images and inserted images, though I know they are coded differently. 😊
Hey Diane! They can be resized different on mobile VS desktop. They can't be a different "shape". Eg if set to FIT or FILL or SHAPE, this will stay the same over mobile and desktop. But you can position and resize separately. Though I don't understand the rest of your question, sorry! Not sure what you mean by full width background images/different shape/hide and show. Background images are connected to a section so if you want to change the size of your background image you increase/decrease the size of your section height (by changing Rows). Rows can be changed independently mobile vs desktop. Section Banner images are added via editing the section settings and uploading a banner/background images. You can also add a Image Block image and send that image to the back. Both could be considered images in the background but both behave quite differently. Section Banner images are full-width by nature. Image Blocks can go wherever you want and you can pull them right to the edge so they are full width also
Does Fluid engine allow for having different font sizes on mobile vs desktop? I have been trying it out but I can't understand if font sizes+styles are independent or not.
Unfortunately they aren't independent. Everything inside the text box is the same mobile + desktop. Though you'll notice some automatic resizing (eg everything is a bit smaller on mobile) but this is the same as it has always been. If you want different sizes, you'll need to custom code it.
Hey Garrett, I don't understand what you're asking or what trouble you're having, probably best to reach out to Squarespace support directly squarespace.com/support :)
Mobile font scaling was completley broken, I opted out and the still remaining Fluid Engine pages now look fine in mobile preview, when you kick off a site and then roll it back you get left with fluid engine layers and can only get legacy layers with new ones, but why is the Fluid Engine mobile text scaling broken?
Hey Matthew! If you see something is broken I recommend reaching out to Squarespace support and submitting a ticket so they can prioritize fixing it :) Yes, if you upgrade sections to FE you cannot revert them back to Classic Editor.
It sadly isn't completely fluid between them. My video banner for example looks terrible on mobile, When i try and edit it across platforms it then looks worse on a desktop... and don't even get me started when it comes to Ipad. Squarespace are delivering on the new drag and drop, but not on the fluidity, which shouldn't be an issue in this day and age.
Yeah, I unfortunately agree with you there! Some of it is awesome, compared to the way it used to be. But they are failing on some basics! They have already made a ton of improvements though, so fingers crossed they keep coming.
Not remotely separate as I've experienced. Everything is connected and affects my desktop site. I've had several glitches with the desktop site as it is but found some workarounds . . .until I looked at the mobile version. Totally unworkable and unfixable. Now I need to start over with something extremely simple and basic. **Update** So I deleted everything and started over. I'm essentially designing it based on the mobile version. This places limits on your desktop design but it is what it is. Seems to be doing ok now.
Sorry to hear that you're having frustrations! Where you place elements is definitely separate, so if it's moving on both, I would reach out to Squarespace. Although there are some limitations to this and some improvements that can be made, compared to Squarespace's mobile adaptation before this update, this is a huge improvement.
If you're trying to DIY a website, it's going to be really hard to do so on mobile, I wouldn't really recommend it! Squarespace is designed to be used on desktop, as are most web builders.
Super useful, thanks a lot, great content, especially since I am currently myself in the process of building my own Squarespace page. Cheers, Kai.
Wonderful, thank you!
Insightful. Thank you for taking the time to share.
I'm using Squarespace for the first time with 7.1 Fluid engine. As far as I can see, almost everything between desktop and mobile is dependent with the exception of block placement within a section and row count. So, you can't switch the order/placement of an actual section within mobile without it affecting desktop. You can't hide a section within mobile without it affecting desktop and vice versa, although I've heard I might be able to do that with custom CSS. You can't set the gaps within a section grid to be different between mobile and desktop. To be honest, if Classic editor was a worse experience for editing mobile, then it must have been terrible. Because the fluid engine is severely limited as far as I can tell.
EXACTLY. I'm having such a difficult time with editing the mobile site without changing the desktop version that I've already perfected. Extremely frustrating.
Hey! Yes, with Classic Editor, you literally couldn't change anything on mobile, unless you used custom code.
Yes you're correct, you can't change any of those things. I can't say I've needed any of those features, though, I suppose for some cases they would be helpful. I think Hide/Show for section and blocks for mobile VS desktop would be great.
Maybe if you build out multiple "sections" into just 1 section instead of splitting them up into individual sections, then you'll find it easier to move things into the order you need on mobile.
Also you can can hide/show sections and blocks on mobile VS desktop pretty easily with custom code.
Fluid engine is helpful and not quite worked out yet! Can I add a block to just the mobile section? Or can I delete a block on one version and not the other? That is a pretty essential feature.
I agree with that! There's lots of room for improvement. That's not possible yet, but surely in the pipeline. For a workaround you can hide it with CSS or just hide it behind another block.
Would love to see how to make a different layout from desktop. How would that work?
In this video we cover how to design on mobile which is separate from desktop, some of the things are the same (eg the elements/blocks) but you can create a different layout from desktop. So if you move things on desktop they won't move on mobile. Not exactly sure what you're asking :)
Is over lapping bad on desk top as well?
It's better to avoid overlapping blocks usually as they don't always resize well/the way you would want to on smaller screens (especially tablet size!). If you do choose to use some overlap, make sure to double check the responsiveness!
Thanks for the great video, but is there a way to activate zoom on gallery images on mobile settings ? I have 7.1 version
I don't believe this is a built-in function, but it might be something that someone could custom code for you!
Thank you so much for your fab, straight forward videos! I wonder if any of my questions would be video-worthy?!
If images can’t be resized separately on mobile than desktop - I think maybe full width background images - is the only option still to code in a different shaped image for mobile with hide and show, or does Fluid change that please?
My background images are wide and shallow on mobile and seemingly can’t change the height separately from desktop.
If you insert an image into a section and drag it out to be full width, does it change status from being an image to being a background image please? I’m not sure I’ve been able to place an inserted image edge to edge like a full width one though.
I’m very confused about the difference between background images and inserted images, though I know they are coded differently.
😊
Hey Diane!
They can be resized different on mobile VS desktop. They can't be a different "shape". Eg if set to FIT or FILL or SHAPE, this will stay the same over mobile and desktop. But you can position and resize separately. Though I don't understand the rest of your question, sorry! Not sure what you mean by full width background images/different shape/hide and show.
Background images are connected to a section so if you want to change the size of your background image you increase/decrease the size of your section height (by changing Rows). Rows can be changed independently mobile vs desktop.
Section Banner images are added via editing the section settings and uploading a banner/background images. You can also add a Image Block image and send that image to the back. Both could be considered images in the background but both behave quite differently. Section Banner images are full-width by nature. Image Blocks can go wherever you want and you can pull them right to the edge so they are full width also
Hi Do you have Tutorials for editing layout of Mobile Menu (Overlay Menu) in Squarespace?
Hey! We have this one, is that what you're after? ua-cam.com/video/GZHaQa-dstU/v-deo.html
Does Fluid engine allow for having different font sizes on mobile vs desktop? I have been trying it out but I can't understand if font sizes+styles are independent or not.
Unfortunately they aren't independent. Everything inside the text box is the same mobile + desktop. Though you'll notice some automatic resizing (eg everything is a bit smaller on mobile) but this is the same as it has always been. If you want different sizes, you'll need to custom code it.
The image flashed and then went away. I thought it was no-repeat in the code, but it doesn't stay there my video comes back on mobile
Hey Garrett, I don't understand what you're asking or what trouble you're having, probably best to reach out to Squarespace support directly squarespace.com/support :)
Mobile font scaling was completley broken, I opted out and the still remaining Fluid Engine pages now look fine in mobile preview, when you kick off a site and then roll it back you get left with fluid engine layers and can only get legacy layers with new ones, but why is the Fluid Engine mobile text scaling broken?
Hey Matthew! If you see something is broken I recommend reaching out to Squarespace support and submitting a ticket so they can prioritize fixing it :)
Yes, if you upgrade sections to FE you cannot revert them back to Classic Editor.
It sadly isn't completely fluid between them. My video banner for example looks terrible on mobile, When i try and edit it across platforms it then looks worse on a desktop... and don't even get me started when it comes to Ipad. Squarespace are delivering on the new drag and drop, but not on the fluidity, which shouldn't be an issue in this day and age.
Yeah, I unfortunately agree with you there! Some of it is awesome, compared to the way it used to be. But they are failing on some basics! They have already made a ton of improvements though, so fingers crossed they keep coming.
Not remotely separate as I've experienced. Everything is connected and affects my desktop site. I've had several glitches with the desktop site as it is but found some workarounds . . .until I looked at the mobile version. Totally unworkable and unfixable. Now I need to start over with something extremely simple and basic. **Update** So I deleted everything and started over. I'm essentially designing it based on the mobile version. This places limits on your desktop design but it is what it is. Seems to be doing ok now.
Sorry to hear that you're having frustrations! Where you place elements is definitely separate, so if it's moving on both, I would reach out to Squarespace. Although there are some limitations to this and some improvements that can be made, compared to Squarespace's mobile adaptation before this update, this is a huge improvement.
I only use mobile, I currently do not have a desk top.
If you're trying to DIY a website, it's going to be really hard to do so on mobile, I wouldn't really recommend it! Squarespace is designed to be used on desktop, as are most web builders.
Fluid engine is not ready for prime time. It does not allow you to make easy versions for tablets. I reverted back. Frustrating.
Mmm the tablet editing is frustrating, it's definitely a bit off. Make sure you message through to them and let them know your thoughts!