Grid with 4 images and text

[pimpaoclothing]

Hello, can anyone tell me how I can create a grid of 4 images with accompanying text, like the image below? Thanks

[devcoders]

Hello @pimpaoclothing

• Go to Online Store > Themes > Edit code.
• Under Sections, click Add a new section → Name it image-text-grid.
• Paste the above code.
• In the Customizer, add the section to your homepage or any template.
• Upload 4 images using the block settings.
• Customize the heading & paragraph.

{% schema %}
{
  "name": "Image Grid with Text",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Conforto, qualidade e carinho em cada detalhe."
    },
    {
      "type": "textarea",
      "id": "paragraph",
      "label": "Paragraph",
      "default": "As nossas roupinhas são feitas com tecidos macios e seguros, perfeitos para a pele sensível do seu bebê..."
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        }
      ]
    }
  ],
  "max_blocks": 4,
  "presets": [
    {
      "name": "Image Grid with Text",
      "category": "Custom",
      "blocks": [
        { "type": "image" },
        { "type": "image" },
        { "type": "image" },
        { "type": "image" }
      ]
    }
  ]
}
{% endschema %}

[pimpaoclothing]

Nice it work! Now how do I align this section with the others?

[devcoders]

Hello @pimpaoclothing

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

.image-text-grid-section .container {
padding: 0;
}
.grid-content .image-grid {
grid-gap: 15px;
}
.image-text-grid-section {
    padding: 10px 5rem;
}

[pimpaoclothing]

but in larger sizes ±1292px it looks like this