Changing the number of guarantee's on my website

[DaveyAlcatraz]

Hi everyone,

My Shopify store is using the Bullet theme and when I use the guarantee section it currently displays 3 large icons that take up the entire screen width, I find this rather unattractive. I would like to adjust this to 5 smaller icons that fit the width of the website. I have attached a photo below to give you an idea how it currently looks and below that I've attached an example of what has drawn my inspiration.

How it currently looks:

Inspiration:

[PaulMartin · Accepted solution]

Hi @DaveyAlcatraz ,

Add this custom CSS to the guarantee section to attain what you are looking for.

x-grid {
  display: flex;
}

x-cell {
  flex-grow: 1;
}

That should result into this:

[DaveyAlcatraz]

Hi, I used this solution and it partially worked. The only problem is when someone views on mobile it creates a new issue. Can you please help me understand how I can fix this?

[namphan]

Hi @DaveyAlcatraz,

Please go to Actions > Edit code > Assets > app.css file and paste this at the bottom of the file:

@media (min-width:778px) {
.guarantee x-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
}

[namphan]

Hi @DaveyAlcatraz,

Can you try this?