responsive-design Why can't I edit my site for tablets, using a tablet view mode?

HELP!!

I am trying to make my website as responsive as possible for most devices. I am having layout issues when I test my website using responsively or dev tools. I tried editing my site on an iPad, mobile and on my PC using the responsive window in dev tools, but to no avail. Every time I go to edit any content, it either gives me the desktop view or a mobile view. How can I make my website as responsive as it can be, if I can't edit my site in a tablet view/mode?

Any help would be greatly appreciated!

Kind regards,

Justin

Yes. Currently there is no way to adjust on tablet, we usually use code (or design a section on desktop, then use code to make this appear on tablet only)...Or if you need code to prevent overlap in screenshot, you can share link, we can help easier

Like with any set of tools, there's always a desire for one more, in this case we never used to have the option to design on mobile, now we have that, and although it gives more possibilities some people don't like the extra work it causes having to design twice instead of once. Maybe in the future Squarespace will give the option for tablet layout as well as desktop and mobile, but until then we just have to use the tools we have in the best way that we can. 

I can't tell exactly without you sharing your website URL, but from the screenshot it looks like you have lots of text blocks side-by-side that can't cope with being on a narrow screen. You could fix this by making the text all in one block with spaced gaps. The social icon block looks like you have it narrower than necessary, give it space either side (there's not always a need to make blocks tight to their content), and finally be careful not to have blocks overlapping in the grid.

Hi @tuanphan & @Ziggy, Thank you for responding.

Yes that is true that an option to work in tablet view would be very handy in future, it doesn't help me now though. I will try to overcome this issue by designing a new footer that hopefully translates well in both mobile and tablet view.

Thank you again for your responses and for any future help that I get from you 🙂

Kind regards,

Justin

I really hope Squarespace is working on a 3rd format option for design layouts. The mobile and desktop design layout options are great, but viewing my website on an iPad or other tablets is a completely different story.

All of my accordion menus open from the center on the iPad in comparison to simply dropping down on mobile and desktop formats. Is this a glitch? It makes no difference how the accordion is justified (top / centered / bottom) in the mobile or desktop layouts - on tablets they always open from the center which causes overlay issues.

https://www.coorlasarch.com/about

Thanks,

Stephen

Come on... This is just ridiculous. My site looks like it exploded when I look at it on a tablet. What a joke.

Same.  It feels so frustrating.  What am I supposed to do, put a big header that says DON'T VIEW THIS ON YOUR TABLET??? 

(no seriously, what are people doing to get around this? tablets are ubiquitous at this point)

On 10/21/2023 at 7:30 AM, CoorlasArchitecture said:

Come on... This is just ridiculous. My site looks like it exploded when I look at it on a tablet. What a joke.

It would really help your deisgn on tablet if you weren't leaving 3 empty columns on the left and right all the way down the page. If you want the design narrower make the site width narrower and lose those blank columns that squash everything more than necessary on tablet.

6 hours ago, Ziggy said:

It would really help your deisgn on tablet if you weren't leaving 3 empty columns on the left and right all the way down the page. If you want the design narrower make the site width narrower and lose those blank columns that squash everything more than necessary on tablet.

Can I control the width of each section with adjusting the overall website width? I like that some sections are narrow and some go full width, it's intentional to accentuate the media content vs data text

I like having a narrower main width and then use a CSS code snippet to make certain sections full width or wider where needed. It would be good if Squarespace brought back the old feature of setting the width similar to the section heights.

On your website, you advertise your tool with "Easy-to-edit website templates, no coding needed."... 

You can't expect your customers to write their own CSS to achieve something that could be expected. They want to use this tool because they can’t or don’t want to write custom CSS. 

To me, it feels like I have to "hack" my site to make EVERYTHING work. I want to use my time for design. It is mandatory to integrate the editing of a tablet breakpoint. Otherwise, your tool is of little value. 

You can undoubtedly optimize and fine-tune some things with CSS (I'm a fan!), but it can't be that a website simply falls apart on tablets. And you can't argue that it's not important for many people.  This is entirely missing the reality. No tool of this kind will do without this feature – it is a necessary and established standard. 

The industry has agreed on the best practice of at least three breakpoints (desktop, tablet, mobile). Ignoring that and pretending it doesn't matter doesn't help us or Squarespace! 

I didn't expect such an issue when I started my not-so-cheap Squarespace subscription, either.  

I hope you guys are working diligently on tablet editing! I can't imagine that this doesn't wholly bug you guys as well because it makes your great tool pointless.

Please don't take this criticism personally, but the issue is extremely frustrating for me as well.

Why don’t you tell users: “We know the issue, and we are working on it!”

Viewing tablet mode used to be available on 7.0 (had to change editing to viewing, hahaha) - so hopefully this is something they can bring back soon! 🤞

I've been using Squarekicker for so many things, but one of the best features is being able to edit in a All Devices, Laptop, Tablet, and Mobile view. You can change quite a bit in each view with it not disrupting the main desktop view too 🙌

You can sign up for a free trial to see if you love it before committing!

12 hours ago, dreyahbohlen said:

Editing tablet mode used to be available on 7.0

Really? My memory and experience was that although you could preview in tablet and mobile, there were no editing options specific to tablet or mobile unless you used Custom CSS.

When Squarespace launched Fluid Engine there was a reasonable amount of push-back because of the requirement to edit the desktop and mobile layouts independently as it increased the amount of work involved with building a website, I can only imagine that this would be even more so if we were required to edit the layout three times every time an edit was made: desktop - tablet - mobile.

1 hour ago, Ziggy said:

... I can only imagine that this would be even more so if we were required to edit the layout three times every time an edit was made: desktop - tablet - mobile.

Maybe you have a different method, but designing for desktop - tablet - mobile is the standard – they are mandatory to achieve a good and working design because a tablet device differs from a desktop or a laptop or a mobile device. It's a logical consequence to design these three breakpoints separately.

In many cases, even more breakpoints have to be designed, not to mention different operating systems. 

10 minutes ago, KaiSinzinger said:

Maybe you have a different method, but designing for desktop - tablet - mobile is the standard – they are mandatory to achieve a good and working design because a tablet device differs from a desktop or a laptop or a mobile device. It's a logical consequence to design these three breakpoints separately.

In many cases, even more breakpoints have to be designed, not to mention different operating systems. 

I agree, more control will give you the ability to design a more perfect website. That's not what Squarespace offers, many people building their own website don't want to spend that amount of time and effort, those that do will use WordPress or Webflow or any number of other options.

On 11/3/2023 at 3:35 AM, Ziggy said:

Really? My memory and experience was that although you could preview in tablet and mobile, there were no editing options specific to tablet or mobile unless you used Custom CSS.

When Squarespace launched Fluid Engine there was a reasonable amount of push-back because of the requirement to edit the desktop and mobile layouts independently as it increased the amount of work involved with building a website, I can only imagine that this would be even more so if we were required to edit the layout three times every time an edit was made: desktop - tablet - mobile.

That's right! Ahhhh, my bad - I need to change that comment, haha. It's been so long I just remembered being able to switch between the tablet mode and mobile - but moving blocks around messed with all views! 😅

On 11/3/2023 at 11:08 AM, Ziggy said:

I agree, more control will give you the ability to design a more perfect website. That's not what Squarespace offers, many people building their own website don't want to spend that amount of time and effort, those that do will use WordPress or Webflow or any number of other options.

I totally agree with KaiSinzinger.  I also thought responsive design would include the idea of showing my websites on tablets!

I'm very disappointed and surprised this definition at squarespace doesn't include tablets

and I think it's actually not OK! They cannot claim its responsive design and tablets are left aside!

I am shortly before quitting my plan, because also I expected that it was easy to set up my website, but eventually, it's not,  it involves incredible amounts of research ,  the text shows way to big or way to small with partly unresonable line hights etc etc. 

Also it would be cool to customise the typo in certain blocks , but how am I supposed to identify where I have to adjust a certain spot from my site in the settings ? all refers to block-names  but how am I supposed to know in which block is my spot with the problem, when the block name/type is nowhere indicated? why can I not highlite the text on the site, and the right block is also highlighted in the settings column? 

So , endless guessing with try and error is necessary and very often does not even end in a result. Only hot air and tons of lost time. 

Hi guys, 

There's a really good extension that does this until we get tablet view from Squarespace.

https://chromewebstore.google.com/detail/fluid-engine-tablet-spaci/gemmfnoajaghnaddkccmekbchdgckdab