How can I format a guarantee bar to 2 columns x 2 rows on my website?

Store Design
1

I’ve used this code to implement a guarantee bar. Now I am using it on another section in my website as well but want to make it 2 across, if I add more it keeps putting them all across like 4 across. I want it to look like this, though even more even so it’s like 50/50:

Screen Shot 2022-08-18 at 2.16.10 PM.png
Screen Shot 2022-08-18 at 2.16.10 PM.png2284×316 132 KB

The code I used to make the banner was here:

{{ section.settings.header }}

{% for block in section.blocks %}
{{ block.settings.icon.alt }}

{{ block.settings.icon_header }}

{{ block.settings.icon_text }}
{% endfor %}
{% style %} .primary-color { fill: {{ section.settings.primary_color }}; } .secondary-color { fill: {{ section.settings.secondary_color }}; } {% endstyle %} {% schema %} { "name": "Guarantee", "settings": [ { "type": "text", "id": "header", "label": "Guarantee badge header" }, { "type": "color", "id": "primary_color", "label": "Primary icon color" }, { "type": "color", "id": "secondary_color", "label": "Secondary icon color" } ] , "blocks": [ { "type": "badge", "name": "Guarantee badge", "settings": [ { "type": "image_picker", "id": "icon", "label": "Icon" }, { "type": "text", "id": "icon_header", "label": "Icon header" }, { "type": "text", "id": "icon_text", "label": "Icon text" } ] } ] , "presets": [ { "name": "Guarantee badges", "category":"Custom" } ] } {% endschema %}

Css:

/****** guarantee bar ******/
.guarantee-icon {
width: 40px;
margin-right: 20px;
}

.guarantee-icon ~ span {
display:inline-block;
}
.guarantee-header {
text-align: center;
font-size: 32px;
}

.guarantee-banner {
max-width: 100%;
margin: auto;
padding-bottom: 0px;
padding-left: 55px;
padding-right: 55px;
margin-top: 0px;
background-color: #131313;
color: #ffff;
}

@media screen and (min-width: 750px) {
.guarantee-wrapper {
display: flex;
justify-content: center;
}
}

@media screen and (max-width: 749px) {
.guarantee-wrapper {
display: flex;
justify-content: center;
flex-direction: column;
}
}

.guarantee-item {
text-align: left;
margin: 20px 30px;
display: flex;
align-items: center;
line-height: 2rem;
}

.guarantee-item svg {
margin-bottom: 15px;
height: 50px;
}

@media ( max-width: 749px ) {
.guarantee-wrapper {
grid-template-columns: repeat(2, 1fr);
}
}

.guarantee-title {
text-align: left;
color: #fff;
font-size: calc(var(–font-heading-scale) * 1.5rem);
}

2

@shellbell
Hello,
Can You Please Share Your Store URL…

3

Please add this to the last line of your CSS file.

.guarantee-wrapper {display:grid; grid-template-columns: 1fr 1fr;}

4

Thanks so much that did the trick!