Fixing the Spacing Problem in Tablet View for Fluid Engine

Подписаться 4,5 тыс.

Просмотров 4,1 тыс.

50% 1

Fluid Engine makes a bunch of new layouts possible in Squarespace. However, there is a major spacing problem when viewing a website in tablet mode. Let’s take a quick look at what’s causing it and how to fix it.
Timestamps
Intro: 0:00
What's causing the Issue: 0:30
Fixing The Issue: 3:55
The Issue
Text blocks can't be sized smaller than the amount of text in the block. This makes sense. Except on larger devices, the text remains the same size, but the available space for the text to fill increases, creating large gaps.
The Solution
Use the below code to adjust the "Mobile View" of your Squarespace website to be wider, and edit your text blocks using that view. Reducing the text block to its smallest possible size, removing all extra space. The design on mobile will still stay the same.
Code: www.will-myers.com/articles/f...
Buy Me A Coffee: www.buymeacoffee.com/willmyers
Plugin Store: www.will-myers.com/products

Наука

Опубликовано:

7 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 25

@will-myers Год назад

Hey everyone, I've just created a fix for the drag handle not being accessible. Grab the most updated version of the on my website, version 1.1. When you replace that , the drag handle should be accessible again. Thanks.

@austinmartin837 Год назад

Thanks so much for the help here, Will! It was exactly the fix I was looking for. However, I'm still missing the horizontal drag handles. The vertical handles are there though. Any ideas? Edit: I just double checked and it seems that the probably actually only happens when I'm working on my external monitor (in "extend these displays" mode). If I drag the window over to my laptop screen, the handles are there in both Firefox and Chrome, so it's not a browser specific issue it seems. So strange.

@rolandvandenhout 2 года назад

You cracked it! Tried it on the site I shared with you, and that is now solved! Enjoy those cups of coffee Will. Hopefully, Squarespace releases an update so we won't be needing this...

@will-myers 2 года назад

Huzzah! I was just taking a look at that one you sent me now

@cckeibler 2 года назад

Thanks Will. I was just having this problem yesterday, and now I've got a solution! I love your tutorials and especially your CSS for Squarespace class. Your explanations have just the right level of detail so I can really understand how things are working without feeling overwhelmed. I always look forward to consuming your content because I always learn something.

@will-myers 2 года назад

Glad to hear, and glad it helped! Thanks for the Super!

@brandon.hendrickson 2 года назад

This is an excellent video, with one proviso - why are we pretending to be not be furious about this change? Squarespace is forcing us to use a new editing interface that requires we tinker with CSS just to make it look okay on a phone... and we're okay with this? I had come to this video hoping that it would tell me what I'm doing wrong in FluidEngine. It's convinced me that Squarespace just ruined their product's fundamental functionality... and that the community is willing to roll with it.

@creativityworkoutsforartan6951 11 месяцев назад

You are a lifesaver! I must have lost an hour trying to do this with css - obviously impossible.

@ilse5293 2 года назад

Thank you Will! Appreciate your genius!

@martindady4197 2 года назад

Thanks. Very helpful

@TheVarzel Год назад

Thanks!

@abi-at-WillMyersSupport Год назад

Glad it was helpful!

@dylansneed4974 2 года назад

this is so helpful! just bought you a coffee 👍

@will-myers 2 года назад

Thanks Dylan!

@luckyloop7503 5 месяцев назад

So funny that the squarespace mutli million dollar team cant provide a solution like that. Thanks Will!

@nathalierickebacher617 Год назад

This is great, thank you so much. I am however running into an issue - as soon as I click edit in mobile view, it defaults back to actual mobile size. So I can view the tablet breakpoint for a moment, but not edit in it. Any hot tips for this? Kind Regards

@will-myers Год назад

Hey Nathalie, my latest update to this code fixes that issue.

@nathalierickebacher617 Год назад

@@will-myers amazing, thank you so much

@annalarasigron7137 2 месяца назад

Hi, I have a related question about my auto-scaling text that just splits akwardly in the middle of the word and then puts one letter on a new line. The problem occures on different devices. Anybody knows how to fix this ord has a link to another video?

@will-myers 2 месяца назад

Hey Anna, if you'd like to reach out to our Support Team we'd be able to take a little look at this for you. will-myers.com/support

@vlad.k22 8 месяцев назад

It's a shame that Squarespace (one of the major players) doesn't have a Tablet Viewport that you can adjust and edit. My buttons and layout look horrible and unprofessional on tablet.

@SurfTampa813 5 месяцев назад

Hi Will. I'm was having an issue in Squarespace mobile where, when I want my images were not expanding to full frame when I went from portrait to landscape. This code helped fix that issue when I designed it with your code fix. However, my new issue is that the text is now non-responsive. So while the image now fills the space in portrait/landscape, the text is only correct in landscape and shows a huge gap in portrait. Is there any fix for this? Feel like I'm running in circles with what should be an easy fix. Thanks!

@will-myers 4 месяца назад

Hey, unfortunately we're unable to fully troubleshoot in the comments. If you shoot over a link to your site to our Support Page on our website we can take a look.

@andynonimuss6298 10 месяцев назад

Great video man, but please remove the volume puffs from your microphone. It breaks my attention when I'm watching and trying to learn. The correct breakpoint for tablets is not 749 px, it is 768 px.