Looking for a couple of elements

Hi there,

I am looking for some blocks to add to a mobile-first page.

Firstly, a button-based filter like this.

image

I can do it in my own repeating group, but I can never make it shrink nicely. Have had a look but I don’t think I can see anything similar. Is there something I could modify instead?

Also…

The 2 Columns Tiles block is great, but it goes to 1 column wide on mobile, and I really would like it to be 2 column square like this.

Before I start hacking the block, is this the right place to start ?

Thank you :slight_smile:

Hi @nigel,

We’re currently in the process of creating a block that will allow you to create button based filters :slight_smile:
It will most likely be published in the next few weeks and we’ll definitely keep you posted.

To get the 2 Columns Tiles block to remain as 2 columns on mobile, please follow the instructions below:

  1. Decrease the Repeating group’s current cell’s minimum width

  2. Remove the image element from the tiles group.

  3. Replace the image with a group (make sure this group contains Group Main price_number)

  4. Within the group in step 2, add a collapsible group with the following conditional statement


  5. Add conditional statements to the link element

  6. Group star rating and description text and hide the group

  7. In the Responsive editor, add a hiding rule to Group Main more_Dummy

Feel free to let me know if you have any additional questions! Thank you for using Canvas.

Stephanie

1 Like

Thank you :slight_smile:

I needed to adjust the Cell min width in the RG

image

Which works so I hope it is the right work!

p.s. I really don’t understand how the RG can be 890 wide inside an 860 group :flushed:

…I know it works, and is possible, but not sure what it is meant to be doing!

Hi @nigel,

Adjusting the cell min width works too! I found that sometimes the images don’t scale well on mobile and hence the group background workaround :slightly_smiling_face:

We make the repeating group wider than the container group in order to ensure the padding on the sides of the grid tiles are consistent. This doesn’t seem to affect responsiveness but feel free to adjust the width accordingly.

Oh, how did you do it? I may have missed something in your explanation. Without it the tiles expand to fill the width on mobile.

Yes, the algorithm for resizing is working really hard here as you scale down. It isn’t always perfect but it is magic when it works!

@Nigel I think that’s exactly right; decreasing the current cell’s minimum width to ~150px (or slightly less) will force the RG to stay at 2-columns on mobile. :slight_smile:

1 Like

@nigel I missed that step in the instructions above :sweat_smile: (let me add that back to the main post) but I indeed did change current cell’s minimum width!

1 Like