How to have the same block with a different layout in different screen sizes

CSS can help us tweak the heck out of any block in Squarespace, but sometimes it’s not worth the time it takes to do it when you could simply use a different block to achieve the same result.

Let me explain what I mean.

Imagine you’re adding a carousel block to your client’s site – for testimonials or any other type of content – and you like the way it displays 2 or 3 slides at a time on desktop, but in mobile phones it defaults to 2 slides at a time and everything looks too squished up.

You could potentially tweak the hell out it to make sure only one slide shows up on smaller screens.

But, because of the way those carousels were built, you’re going to spend waaaay too much time fighting with paddings and margins and setting the exact width your slides need to have to look right.

Been there, done that.

So, why don’t we take a different approach and save ourselves HOURS of unnecessary code?

Same block, different layout

Want to know what the “trick” is?

I’ll tell you: using TWO blocks with different layouts, and then hiding one of them based on screen size.

Let’s take a look at an example.

Here I have a carousel block with 3 slides:

1. Starting point.png

I love the look on desktop, and on tablet as well:

2. Looking at tablet.png

But in phones, even when it defaults to 2 slides there’s too much text in the excerpts and I don’t like the way it looks.

3. Checking phone screens.png

What I’m going to do is add another carousel block below this one (it can be on top, it doesn’t matter!).

I’ll set it up to look exactly the same, except I’ll make sure to display only 1 slide at a time.

Here’s what it looks like on desktop!

And this is what that second block looks like on mobile. MUCH better!

4. Adding another block.png

Now, what we’ll need to do is look for BOTH blocks IDs, so we can target them individually via CSS and indicate which one is meant to disappear and when.

Let’s start by looking for the block ID of the first block, the 3-slide carousel.

5. Looking for ID of first block.png
6. Zooming in.png

Ok, so we found or block’s “main” wrapper and we can see it has an ID of #block-yui_3_17_2_1_1568291256212_3829.

Now, before we paste that into our Custom CSS window, we need to think WHEN we want this block to be hidden.

I don’t want the 3-slides carousel to show on phones, so I’ll create a media query that covers the dimensions that go from 0px up to 640px. So within those smaller screen widths I won’t see it.

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

}

Now, we can add in our block ID:

@media screen and (max-width: 640px) {
  #block-yui_3_17_2_1_1568291256212_3829 

  

And lastly, set it to display: none to hide it:

@media screen and (max-width: 640px) {
  #block-yui_3_17_2_1_1568291256212_3829 {
    display: none;
  }
}
10. Setting display none.png

As you can see the block is still there on desktop, and also on tablets:

11. Checking tablets.png

But then, if we check out phone screens…

12. Checking phones.png

Only our second block shows up!

Perfect!

Now, we’re going to do the same thing with this 1-slide carousel.

We’ll look for it’s block ID and create a media query for it that hides it whenever the screen is LARGER than 640px.

13. Looking for second block ID.png
14. Zooming in.png

Ok, so our second block has an ID of #block-yui_3_17_2_1_1568291462679_4493.

Let’s create our media query before pasting that in.

We’ll set the condition to min-width: 640px so it hides our block starting from 640px and upwards.

@media screen and (min-width: 640px) {
  #block-yui_3_17_2_1_1568291462679_4493 
    
  
17. Pasting block ID.png

Time to hide it! Let’s set it to display: none

@media screen and (min-width: 640px) {
  #block-yui_3_17_2_1_1568291462679_4493 {
    display: none;
  }
}
18. Adding display none.png

Awesome!

The 1-slide carousel is gone from desktop view.

Let’s check tablets…

19. Checking tablet.png

And lastly phone screens!

20. Checking phones.png

Beautiful!

Now it looks like our original carousel turns into this 1 slide layout automatically.

We’re officially layout wizards.

Hold up! What about editing?

There’s something we have to consider before we call it a day with this trick.

Let’s say you or your client now wants to switch up the position of the metadata of the carousel, add a title to it, make any other adjustments via the block’s settings, or add more content (for example, if you’re applying this trick to a Gallery Block instead of a Summary Block).

The problem isn’t that the adjustment has to be done twice – it’s a very small price to pay considering the time saved setting up this layout in the first place vs coding it in – the problem is that the code affects the edit mode as well:

21. Issue when editing.png

As you can see above, if we go into edit mode to tweak whatever we need to about the carousels, we can only see the one set to display on desktop.

It’s ok tho, there are two ways you can solve this issue:

  1. Temporarily disabling the hiding code for the 1-slide mobile block. It’s a quick solution but it may become a hassle for you if there’s a lot of code in your Custom CSS window, since you’ll have to search for the snippet every time you want to edit it. PLUS, it may be an inconvenience for your client if they are scared to touch code, or if you rather them not touching anything.

  2. Tweaking the code to include a magic selector that automatically hides or shows the mobile block for you. Ok, it’s not “magical” but it feels like it when you use it.

Since we want to make things easier for ourselves and our clients now and in the future, let’s go with the second option.

Note: I won’t dive into detail of where I got the selector from or how it works, that will require a tutorial of its own. So, if you’re interested in learning where it came from, how it works and when you can use it, leave a comment in the Geeks Club Hangout letting me know!

Briefly, we’ll be adding an additional selector to both of our snippets, that pretty much acts as a secondary “condition” that says “target the page when it’s not in edit mode”.

It' looks like this:

body:not(.sqs-edit-mode-active)

So, let’s finish our customization by adding that selector BEFORE each of our block IDs:

@media screen and (max-width: 640px) {
  body:not(.sqs-edit-mode-active) #block-yui_3_17_2_1_1568291256212_3829 {
    display: none;
  }
}
  
@media screen and (min-width: 640px) {
  body:not(.sqs-edit-mode-active) #block-yui_3_17_2_1_1568291462679_4493 {
    display: none;
  }
}
24. Using trick.png

As we can see above, our desktop view is the same as before.

But now if we check in edit mode…

25. Checking in edit mode.png

Our second block appears too!

Check out this gif to see the whole customization in action.

 

Until next time,

B.

 

Full code

@media screen and (max-width: 640px) {
  body:not(.sqs-edit-mode-active) #block-yui_3_17_2_1_1568291256212_3829 {
    display: none;
  }
}
  
@media screen and (min-width: 640px) {
  body:not(.sqs-edit-mode-active) #block-yui_3_17_2_1_1568291462679_4493 {
    display: none;
  }
}