How To: Customize Squarespace for Mobile | Part Three
How To
Customize Squarespace for Mobile
(part three)
Want to the know the most common MOBILE mistakes you may be making on your Squarespace site and how to fix them? This post is for you. I see these mistakes ALL the time (even on professional Squarespace sites), but with some easy code (I promise!) you can clean up your site.
You need a site that looks great on every screen.
Squarespace does a great job making your site mobile responsive already, but it’s not perfect. One of the biggest issues I’ve noticed with squarespace mobile— even on other designer’s sites — is with images. For a lot of squarespace users, their on-page images look good on desktop but HUGE on mobile. Why is that?
CUSTOM CSS FOR IMAGES // ICONS // LOGOS
Unlike Wix or Wordpress (which give you a lot of flexibility in the mobile sizing of elements) Squarespace takes a multi-column-grid on desktop and reduces it to ONE column for mobile. While this stacking works in a lot of cases, anytime you use logos — say for a “we’re proud to work with” index page section with logos, OR for a secondary logo in your footer, those images are going to fill the screen space, left to right, on your mobile view. Take this client site for example, a portfolio page for Noble Tiger Branding House in South Florida.
While this looks great on desktop, there are multiple trouble spots for mobile: the nike logo, the iphone App mockups, and the apple watch faces. Without code, these images are HUGE on the mobile view. With code, though, the mobile view is more consistent with the desktop experience. All you have to do is target the image block and adjust the size.
If you missed part one of this topic, check it out first to learn where the CSS editor is and how to use it. Then come back here to get the code for customizing images on Squarespace.
To change anything on mobile you need a media query to target that screen size. If you’ve never used them before, here’s a great resource for all the different screen sizes. For the above example, I use this media query: @media screen and (max-width: 700px)
Then, you can target the image you want to style using curly brackets.
In Footer
@media screen and (max-width: 700px)
{#footer .sqs-block-image
{max-width: 50%; margin: 0 auto;}}
on a specific index page section
@media screen and (max-width: 700px)
{#sectionurl .sqs-block-image
{max-width: 50%; margin: 0 auto;}}
The above code works great when you have one image in the footer or multiple images on an index page because it will size all the images exactly the same. The max-width adjusts the size, so play with your % amount to get the look you want. The margin creates a center-alignment, so you can delete that part if you need an image left-aligned.
CHrome extensions id finder for squarespace
Let’s say you want to adjust a single image/logo that’s either on a page or in and index with other images. For this, you need to target the specific image block itself. Of course, you can dig through the code in developer tools to find it, but I highly recommend a chrome extension to save you all that time.
For 7.0 you can download this chrome extension and for 7.1 you can download this one. Now, turn on your chrome extension, then click the block you need to target. The correct ID will be copied on your clipboard so all you need to do is put it in this code between the “#” and the “{“ and you’re done.
single images
@media screen and (max-width: 640px)
{#copyblockidhere
{max-width: 50%; margin: 0 auto;}}
Lastly, this code works for your desktop view too. If you don’t want to use spacers, Just us the code without the media query.
specific images
#copyblockidhere
{max-width: 50%; margin: 0 auto;}}
Good luck! Let me know if you have questions.
Lacey
oh, and here are some of my favorite CSS resources if you’re on the hunt:
www.w3schools.com
https://paigebrunton.com/
https://circle.squarespace.com
https://thirtyeightvisuals.com/