Squarespace Issue With Tablet View
So let’s address the elephant in the room, Squarespace market themselves as an easy do-it-yourself web building platform, and it can be! That is, until you view your website on a tablet or Ipad! At that point you may find your beautifully designed site looks nothing like you imagined.
Instead words are cut off, sizing is off, images and buttons are overlapping and you are probably wondering how you are supposed to fix this issue? Especially when you jump into editing mode and realise Squarespace only offer a preview for desktop or mobile view.
The issue here is the grid pattern that Squarespace utilises for easy optimisation between mobile and web views. Below 750px Squarespace automatically changes the grid, in ratio, and usually manages to show your site in a semi-reasonable way.
This fluid engine grid is responsible for the automatic optimisation that goes on in Squarespace
However for devices just outside of this 750px breakpoint your website is still showing at the size it would on a desktop computer, but obviously there isn’t enough room on the screen!
Below you can see the kind of issues you experience as the screen size decreases:
This demo shows how quickly a site can look awful when elements overlap!
With any luck, this article finds you before you have spent an inordinate amount of time scratching your head at the issues I describe above. Better yet, this article has found you in the early stages of building, before your website has been live whilst not being fully optimised!
Either way, let’s now break down the things you CAN do to fix the issue:
1 ) When building your website, it is a great idea to use the free developer tools provided by Google Chrome to check how your site REALLY looks on different devices (we will cover different mobile screen sizes in a future blog).
2) Custom CSS Coding - If you know coding, then you’re probably not reading this article, as this is of COURSE the answer to all your problems. However if the reason you chose Squarespace is because it’s easy, then there is a good chance coding is not a skill you have in your arsenal right now. So your options are simple, you can hire someone like Opal Sky Digital Designs who use coding in their own work, to take a look at your site and implement the fixes for you. You can browse good old Google for a forum or blog post (a bit like this one!) who have the answer to your exact question (as coding must be specific), or you can pay someone on fiver or a similar freelance site to write the code you need instead.
Here is a freebie on us, if you want to target a change in tablet and phone view only using CSS then you will need a media query, add this code before your CSS to target the correct screen sizes:
@media screen and (max-width:767px) - This targets phone and tablet size devices
3) The third and final option is you can design your site mindfully, using the developer tools to make sure your site still looks good on a tablet view, this is the long way round but if you don’t have the time/money to opt for step 2 then this is a good alternative.
Below we have collected together 5 of the best do’s and don’t to eliminate the tablet view issues:
Close down your text boxes height until you hit the red line, this stops your text from moving unnessesarily when changing screen size.
Likewise when viewing in tablet view through chrome tools, if a word is cutting off and stacking onto the next like, extend the width of the text box to allow for movement rather than stacking
Don’t overlap buttons with images/text boxes, unless you are going to be okay with some movement, that button will rarely appear right where you placed it on all devices, so if the placement is crucial to it looking good, move the button entirely.
Leave adequate spacing between different text boxes height-wise, this means that when things move, they won’t start to overlap, you can easily test and move as required.
If a block of text is becoming a narrow long mess then splitting that text into separate boxes can sometimes be the way to go, alternatively sometimes you may just need to tweak the structure of that entire section so the text box isn’t being squeezed.
Shows the above edits in action
A couple more tips for the road:
Will Myers has a great blog on this subject where he explains in more depth the hows and whys of the tablet view issue on Squarespace, he has created some do-it-yourself fixes that are all encompassing of your whole site, rather than tweaking individual elements. Check it out Here. Fair warning however, you will probably need to understand a bit about coding first!
The basic take away is that your site reacts differently according to screen size and Squarespace only offers one smaller screen preview in edit mode. If you have read between the lines successfully then you may already be wondering whether your site might be looking different on small vs large phones… YES is the answer. We will cover more on this in a future blog post.
Comment below if you have found this useful, let us know what issues you have found with your own sites during testing and you never know, we might be able to help!