How To Upload Different Images On Mobile Squarespace

One of the reasons I love Squarespace (and prefer information technology over other platforms like SHOWIT and Wix) is that it's mobile-responsive. That means your full-width website will automatically conform to fit whatsoever screen size.

Just because it fits doesn't mean information technology looks astonishing though. That's where mobile queries come in. Whenever I blueprint a website for a customer, I look at their website at smartphone and tablet width and make adjustments to make sure their site looks perfect on every device.

In this post, I'll give y'all the CSS yous need to brand changes to Squarespace on mobile along with ideas to get yous thinking almost how mobile edits tin make your site more user-friendly for visitors on the get.

Prepare? Let'south become started…

The Basics of CSS Media Queries

Earlier I give you the code you'll demand to make your first mobile edit, allow's talk about breakpoints. A mobile breakpoint is the width (in pixels) at which the website changes to fit smaller screen sizes. The truth is that in that location are no standard mobile breakpoints, at least non anymore. Mobile devices come in many different sizes. All you tin can practise it test your site on every bit many unlike screens equally possible and arrange your CSS accordingly.

That said, I typically notice that two mobile breakpoints cover virtually of my bases: 640px for smartphones and 1024px for tablets. I brand finer adjustments if necessary but ninety% of my edits use these breakpoints.

With that out of the way, here's the basic code we'll be using:

            @media screen and (max-width: 640px) { }

Let's option this autonomously.

This query says that whatsoever changes added inside the curly brackets volition just apply to screens with a maximum width of 640px, i.e. most smartphones.

Let's modify it up a scrap.

            @media screen and (max-width: 1024px) { }

This snippet says that any changes will but apply to screens with a maximum width of 1024px, i.eastward. most tablets.

At present, allow'southward try something unlike.

            @media screen and (min-width: 641px) { }

Here, I've changed max-width to min-width and increased the value to ane pixel higher up the smartphone breakpoint. That means that the changes will only apply to screens bigger than 640px broad.

Become the idea?

You're probably wondering how you tin can use this lawmaking in a practical way, so here's an example from my ain website.

On my homepage, I have a section where I showcase some websites from my portfolio. For this section, I used a uncomplicated Gallery Grid.

I love how this department looks on a desktop screen simply on mobile, it's a different story.

I want my website to expect as good on a smartphone screen equally information technology does on a full-sized computer, so I inverse things up a bit. Here'south what it looks like now:

So much better, correct?

Achieving this look was actually pretty simple. Instead of trying to practice CSS gymnastics to force the gallery block to wait the way I desire it to on mobile, I simply replaced it. I added another gallery block below the starting time i containing only 2 images and below that, I added a single paradigm cake. Then, I wrote my rules.

            @media screen and (max-width: 640px) {   #block-yui_3_17_2_1_1554894449286_138860 {   display: none;   } }  @media screen and (min-width: 641px) {   #cake-yui_3_17_2_1_1555001480077_19465, #cake-yui_3_17_2_1_1555001480077_23150 { display: none;   } }  @media screen and (max-width: 640px) {   #block-yui_3_17_2_1_1555001480077_23150 { margin-top: -35px;   } }

Permit's unpack this.

In the first snippet, I identify the iii-image Gallery Cake past its block ID and tell information technology to hibernate on mobile screens.

In the 2nd snippet, I identify the two-prototype Gallery Block and the image cake underneath it and tell them to hide on desktop and tablet screens.

In the 3rd snippet, I suit the peak margin of the epitome block so information technology'southward the same every bit the margin between the two Gallery Block images. The upshot is that the three images look like a cohesive unit.

The iii-image Gallery only shows upward on desktop and tablet screens. The two-prototype Gallery with the single image underneath it but shows upward on smartphone screens. And it took less than five minutes to setup.

Other Ways to Use Media Queries

There are lots of ways yous can use media queries to edit your mobile site. Here are some ideas:

Modify padding and margins between elements and links to make it easier for mobile users to read text and click links on small screens. This is how I apply mobile queries 95% of the time.
Alter the alignment of text using the text-marshal property. Here'due south an case where I wanted to align the heading of a specific cake heart on mobile only.

            @media screen and (max-width: 640px) { #BLOCKID h1 {   text-align: eye; } }

Modify your site logo on mobile. This is bang-up if your logo has small text that's hard to read on pocket-size screens. I'll have a tutorial on how to practise this coming soon!

There's more than to Squarespace on Mobile

There's more to mobile edits than mobile queries. For example, I have a whole guide on how to way your mobile navigation on the Brine template using CSS. Endeavor it out and have fun taking your Squarespace website to the adjacent level for mobile users!

Did you find this tutorial helpful? You lot can leave a tip to say cheers!