Tablet view with Fluid Engine

Is there no tablet view with fluid engine? How are we supposed to design for this format? Good lord. 

Currently Fluid Engine support Desktop - Mobile view edit only.

If you need to adjust tablet, you can post problem, we can help with custom code

I just rebuilt my website it Fluid Engine to get the hang of it before implementing it on client sites. And the tablet view looks terrible. Is there an easy fix for this, or a way to have the site look like mobile but on a tablet? I'm super concerned with creating client sites that aren't truly responsive. Ugh. Thanks for your advice!

Came here to report the same as @MColeman. Between 500 and 800 pixels, there are huge gaps between elements that cannot be closed up, even after tweaking on both mobile and desktop. I've attached an example. I've tried to play with it, changing all settings and alignments. I've attached a video of this responsive issue.

9 hours ago, MColeman said:

I just rebuilt my website it Fluid Engine to get the hang of it before implementing it on client sites. And the tablet view looks terrible. Is there an easy fix for this, or a way to have the site look like mobile but on a tablet? I'm super concerned with creating client sites that aren't truly responsive. Ugh. Thanks for your advice!

You can share link to page where you have problem, we can help easier

@tuanphan I really feel like the whole site is problematic. Is there any CSS to take each page of my site and at the tablet size have it respond like mobile size? Or can you really only call out certain sections and adjust them? Thanks.

13 hours ago, MColeman said:

@tuanphan I really feel like the whole site is problematic. Is there any CSS to take each page of my site and at the tablet size have it respond like mobile size? Or can you really only call out certain sections and adjust them? Thanks.

Depend on. In some cases, it is possible to use code to adjust the whole page so that the tablet is similar to the mobile phone. Others, need to adjust each section.

Site URL: https://www.shroomtown.co/contact

I've been working on a contacts page for our website, I have come to notice an issue with the alignment on the contacts page. As you can see in the attachments the image and the map become unaligned once the screen size becomes smaller, and the smaller it gets before hitting the threshold for mobile view, the more unaligned these two elements become.

How can I fix this issue? so that everything is resized to stay aligned with one another?

Image of the site when the elements are aligned at full screen size:

Smaller dimensions:

23 hours ago, Sepehr said:

Site URL: https://www.shroomtown.co/contact

I've been working on a contacts page for our website, I have come to notice an issue with the alignment on the contacts page. As you can see in the attachments the image and the map become unaligned once the screen size becomes smaller, and the smaller it gets before hitting the threshold for mobile view, the more unaligned these two elements become.

How can I fix this issue? so that everything is resized to stay aligned with one another?

Image of the site when the elements are aligned at full screen size:

 

Smaller dimensions:

You need to recreate layout to adjust some thing

First, add text, form

Next, add 1 Line Block here

Next, add Map, Image

Next, remove Line Block

Then check again

@tuanphan

Here is a site whereby me flipping my iPhone to landscape a massive gap appears between Services and the Image: https://devkntdir.squarespace.com/?password=sneakpeek

Is that solvable with CSS?

13 hours ago, RolandFuseHub said:

@tuanphan

Here is a site whereby me flipping my iPhone to landscape a massive gap appears between Services and the Image: https://devkntdir.squarespace.com/?password=sneakpeek

Is that solvable with CSS?

It looks like you solved it?

6 hours ago, tuanphan said:

It looks like you solved it?

Not really. If you use an ACTUAL phone, not a simulator, and flip it to landscape, the spacing under Services is still there.

I have been told by Support that it a top priority and they are working on a solution. If you have one, I happily take it. 🙏🏽

Will Myers just posted a solution to the tablet spacing problem! He is offering it for free! https://www.will-myers.com/articles/fixing-the-tablet-spacing-problem-in-squarespace-fluid-engine

Yooo, everyone, please submit a ticket with Squarespace customer support requesting that their next big project be adding a tablet view to their fluid engine. LETS UNIONIZE THIS MF & GET 'ER DONE!

big hat off to Will Myers.

meanwhile, squarespace you truly suck for not supporting viewing on the inconsequential number of 1.28 billion tablets. get your act together, and add a banner to your frontpage declaring this...

Just wanted to follow up and say that Will's script saved the day. Thanks Will!

And comon' Squarespace. I know tablets aren't widely used in general, but if you're building sites that are targeted towards older adults who have a high tablet use rate, it makes it near impossible to do without Will's script.

Literally every other website builder I have used has had a tablet layout / viewport editor.

Some go even as far as Desktop / Laptop / Tablet / Phone / Phone Small Screen

It's extremely disappointing to see that Squarespace doesn't. My website I have been building looks absolutely crap on tablets and Squarespace support have offered basically no support. I always get a stock standard response of "we currently don't support that feature, if you feel comfortable writing code you can use CSS"

What are we paying for?

Hey guys,

I've tried Will's solution for Tablet mode. The issue is that if I change to 749px and adjust parts of the website (text blocks, Image Blocks, Buttons, etc) sitewide, then mobile view at 428px becomes the issue then. Everything on mobile gets all messed up. 

Has anyone come across this? Maybe I'm, doing it wrong?

https://www.connstructor.ie/

Password: test123

On 6/26/2022 at 2:40 AM, tuanphan said:

Currently Fluid Engine support Desktop - Mobile view edit only.

If you need to adjust tablet, you can post problem, we can help with custom code

I need help with font sizes and formatting for my entire website on tablet mode. It works on desktop and mobile, but isn't legible on tablet. 

On 1/5/2024 at 10:19 AM, Davidm1992 said:

Hey guys,

I've tried Will's solution for Tablet mode. The issue is that if I change to 749px and adjust parts of the website (text blocks, Image Blocks, Buttons, etc) sitewide, then mobile view at 428px becomes the issue then. Everything on mobile gets all messed up. 

Has anyone come across this? Maybe I'm, doing it wrong?

https://www.connstructor.ie/

Password: test123

I agree. I used it and it was really nice to see what tablet looked like, but when I made changes it ruined the mobile version.

I'm extremely disappointed in Squarespace. This is a huge pain point and a pretty embarrassing lack of functionality. It's 2024- people access the internet across a plethora of devices.

Will's code didn't work for me. Like others, it messed up the mobile view. The only way I've been able to make this work is to create different sections that only display depending on page width.

For example, using this code, you can hide a section on tablet-esque devices (I tested and it is just wide enough to hide it on an iPad Pro 11" but you could expand the range to cover more devices):

/* Hide Section On Tablet */
@media screen and (min-width: 749px) and (max-width:850px) {
[data-section-id="insertIDhere"] {
    display: none;
}
}

Regardless, comon' Squarespace. This is amateur hour.

Just here to join the conversation that the tablet design is a disaster on my site and can't be changed. With image galleries set in blocks, the images are teeeeny and there are huge gaps on the sides that make the strings of text absurdly long. Squarespace, I see YEARS worth of comments like this - no fix? 

Jumping in on this thread to see if @tuanphan you can help and see if we can fix the tablet view on this site to look more like mobile rather than how it looks now on an iPad (terrible). The mobile site looks wonderful but my client uses her iPad and has flagged how the wording jumps to the next line and the images are squashed. 

Site in question: edwinamoutrayimages.com.au

Facing the same issue. I’ve added certain sections with a transparent background,  the sections are stacking on top of each other due to the parallax feature. Is there any css I can add to make it look like mobile? Or change something to make it look better on tablet