How can I align sections horizontally and vertically on mobile?

Store Design
1

This might sound super easy, but I am

example block.jpg
example block.jpg258×408 16.1 KB

trying to make a row of images with buttons underneath as pairs. Then when desktop becomes mobile, they stack vertically.

I was going to make multiple sections with two blocks. But how to stack the blocks vertically? Is there a way to do this with one section?

1 Like
2

Hi @geo3arKt82 ,

There are several ways to do this but it really depends the code you have in your website. You can use display flex for this. Do you mind sharing your website?

3

Any examples of a CSS grid in a liquid file?

4

@geo3arKt82

Yes, of course. You have to call the div that contains both the img and the button


  
![made4uo|700x140](upload://GQFDSNB1l85Ve5XI1bg2GbVcQD.png)

You can also check the codepen code here

1 Like
5

In React, I would run the map inside the container div. I’ll try that with the for loop in the liquid file. There is a list of container items each with one image and one button.

6

@geo3arKt82

If you need a forloop, please use code below as reference.

You will need the block schema to enter the image url and the button text. Just add the style code you need inside the <style> tag

{% for block in section.blocks %}

  
  

{% endfor %}

{% schema %}
  {
    "name": "Image with button",
    "settings": [],
    "blocks": [
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "button_text",
          "label": "Button text"
        },
      ]
    }
]
  }
{% endschema %}
1 Like