Alrightie friends! Back for another round-up of the handiest CSS snippets on the web!
This time we are focusing on a much beloved topic: customizing your Squarespace site in mobile view!
If you’ve ever toggled back and forth between desktop and mobile view in the backend of your site, you’ve probably gathered that what looks good in a nice wide horizontal layout, doesn’t always look so hot when stuffed and stacked into a super narrow vertical space.
(And vice versa.)
So sometimes it can be a matter of choosing which view matters more to your biz.
For example, I heavily prioritize desktop design over mobile since that’s how y’all tend to visit me.
Most of my organic site traffic comes from people sitting at their laptops Googling “how to do xyz thing on Squarespace” and winding up here on the ‘ol blog!
BUT if the majority of your audience is finding you on social media first, they are probs not going to bother hopping on their computer before clicking that link in bio to visit your site.
So you’d want to make a killer mobile design and ease of use priority numero uno.
Wish you didn’t have to choose?
Thanks to the CSS gurus featured in this post, you won’t have to!
Like I mentioned in Squarespace CSS: what you need to know before you get started, Squarespace isn’t able to offer support or troubleshooting for designs created or manipulated with the use of code.
Stuffing your site full of custom code can quickly slow down your page load speeds, and because Squarespace is constantly rolling out new features, a code that did the trick yesterday might not play nicely with future upgrades to the platform.
So while it’s tempting to take every last one of the code snippets in this series (because hey, free stuff!) it’s probably best to pick a few here and there that really speak to you!
Want your site to go from cookie-cutter > completely custom without the use of code? My course Square Secrets was created just for you!
This first little CSS gem comes to us courtesy of Christy Price!
What’s it for?
Well, when you want to display a bunch of photos in a grid layout on your site, you stick in a gallery block, right? Like this.
What’s that look like in mobile view? A little something like this…
This def looks super clean and tidy, but depending on the size of your visitor’s screen, this side-by-side default layout in mobile may not be doing your images justice.
And if you’re relying on images to show off your fabulous portfolio or to preview your products, you want potential clients & customers to be able to see those bad boys in d.e.t.a.i.l.
(Without having to pinch and zoom!)
Want to make the most of the screen-width you’re working with? Use this bit of CSS to stack your gallery images so visitors can stop to admire each one as they scroll!
Oh, and P.S. by stacked I mean this…
It may give you some insight into why certain bits of CSS meant for mobile or tablet are written the way they are, and how to take all the other CSS code snippets you’ve snagged through the Squarespace CSS series, and apply them to certain screen sizes only!
Copy and paste code snippets are hella useful (so thank you to all our featured CSS guru’s for sharing them!)
But remember your site (and BTS code that makes it up) is one of a kind. #UnicornStatus
So if you don’t understand the basics for tweaking the styling language or CSS for use with your unique design, you’re going to spend a lot of time scratching your head (read: pulling out your hair) wondering ‘why the heck is this code working for everyone but me!???”
So even though I don’t have a pretty picture to illustrate, you do not skip over this important tutorial!
Squarespace already does a pretty bang up job of optimizing your content in mobile & tablet.
The fact that you don’t have to go in and design 100+ completely different websites to make sure your site is accessible from every last device ever sold is nothing short of a tech miracle.
BUT, the robots who handle this automatic mobile responsiveness don’t always get it exactly right design-wise.
Their main mission when resizing for the millions of different screens out there is to make sure:
a) visitors can actually see/read your content clearly
b) there’s no having to pinch, zoom, or scroll from side-to-side to view any part of the page (because Ew. Annoying.)
So even though your text might be clearly readable…your designer’s eye might start to twitch a little when it comes to the golden rules of proportion.
Finding a certain bit of text too big or small compared to the rest of your design when viewed in mobile?
(Plus a few other handy tricks for making mobile design magic happen!)
Here’s a quick peak at using CSS to resize my mockup site’s H1 or heading 1 font in mobile (not always recommended to make it smaller, but you see the effect!)
Speaking of things that make your designer’s eye twitch…
Depending on the browser & device being used to view your site, Squarespace sometimes has to reach for hyphens to make sure all your website words fit on the page.
Which means your pretty bits of text will cut in two!
If this is killing your site vibe & design, don’t fret!
A bit of good news though, while we’re on the subject…
I honestly had a hard time getting anything to hyphenate when creating this little illustration (legit typing in “Supercalifragilisticexpialidocious” was the only way I could force that automatic hyphenation in a chrome browser) which means Squarespace has been on the move optimizing this feature!
That’s just for 7.0 btw. Squarespace got rid of hyphens altogether in 7.1!
Anyhoo, here’s a quick little example of how those pesky hyphenations can disrupt your design when they do happen…
When you first sit down to rock out your site design, you’re going to be spending 99.9% of your time viewing the thing in desktop.
You’ve been staring at the same page design for hours now, so you can’t help but feel a bit married to it looking a certain way…
If you’ve been using spacer blocks to create white space on either side of your image, or to make your images appear smaller on the page, seeing those spacer blocks suddenly disappear and your images auto-resized for mobile responsiveness may come as quite the shock!
Thankfully, past Square Secrets & Square Secrets Business course student Rebecca of Rebecca Grace Designs has come to the rescue with this handy snippet of CSS (and the video tutorial you need to put it to use on your site!)
Pssst! This code snippet is for 7.1! Looking for the same thing in 7.0? She’s got another tutorial here!
Here’s a quick peek of using CSS to resize an image and add a little “white space” in mobile so it looks a little more like the design you had dreamed up on desktop.
Wait…can’t I just use the CSS Rebecca just showed us to resize my banner image??
Nope! If you’ve been playing around with any of the code snippets & plugins featured in the Squarespace CSS series you may have noticed that not all images are equal when it comes to CSS.
The CSS selector (the bit of text before your css snippet starts that tells the browser robots which type of content you are trying to target with that CSS) will be different depending on how that image got added to your site.
So an image that lives in a simple image block might have a CSS selector of “.sqs-block-image.”
But an image added using a gallery block might use something like “.gallery-grid-item img” (depending on the style of gallery block layout you choose!)
Same goes for your banner images!
The CSS you just applied to your regular image blocks will have no effect on images added to the banner area because it has it’s very own type of selector used to identify it!
So why would you want a different banner image to show on mobile, anyway?
Yep! Sometimes, no matter how much pixel-pushing and dragging and dropping you do, what looks good on desktop leaves something seriously to be desired on mobile.
So like I mentioned earlier, it can be a matter of picking which one is most important to your biz.
But if you’d rather not pick one or the other, Thirty Eight Visuals is showing us how to make your banner image look baller no matter the screen size!
Rather than trying trying to force a giant horizontal image into a tiny little vertical box, use her tutorial to swap out your mobile banner for something better suited to that space!
What does it do?
When Squarespace released version 7.1 of their platform, they made it crazy simple to change the background of your header to a different color theme, or even to make it transparent by toggling one little button on or off.
But if you’re a user of the ever-popular Brine family templates in version 7.0, unfortunately there’s no way to achieve this in site styles.
So CSS it is!
Here’s a little demo of what it does!
Sometimes your images just can’t hang on mobile.
They auto-stack in the wrong order, they take up wayyyyy too much of the page, or in the case of ultra-wide horizontal photos, they just end up looking too tiny to matter by the time a mobile device’s screen can squeeze it in.
Orrrrr, maybe you had a cute little secondary logo created for your brand and while it looks absolutely adorable on desktop, it sort of distracts or takes away from your design on mobile.
Whatever the reason, you need that image block gone (and you need it gone now!)
Let say you have a super important call-to-action section on your site….
The logo got kind of blown out looking on mobile, and it sorta distracted from the actual action I wanted the visitor to take in that section!
So I CSS’d it away using this handy tutorial from ljmediahouse.com!
She’s teaching you everything you need to know to hide certain images on too-small screens, without affecting how they appear on desktop!
Ah yes!!! The holy grail of mobile CSS snippets!
We’ve all been there.
Happily dragging and dropping our images and text side-by-side in an alternating pattern down the page…
Then we open mobile view and are hit with this…
Things are not quite how we left them, and because Squarespace automatically stacks content from left to right, our text is now sandwiched between our images.
Thankfully, Squares Stylist has the answers. But it’s not exactly copy and paste style snippet we’re used to…
The CSS needed to make this bit of magic work on each and every person’s unique site takes a bit of tinkering (and a little coding know-how).
It’s detailed enough that it merited a mini-course (which is exactly what Square Stylist is offering.)
So yes. This is a paid solution…
But if the order of your mobile blocks is currently keeping you up at night, this is well worth the investment!