How do I add four-column section with icons and text below?

[herculesshields]

I'm using the Narrative theme and am looking for help on how to add a four-column section with icons and text below. Ideally, it would switch to two columns on mobile.
See attached for reference. Thanks!

[Spinturnix · Accepted solution]

Hi @herculesshields,

This section with a specific mobile layout would need to be custom built. That said, you could probably come close using Narrative's "Custom content" section with HTML blocks.

Let me know if you need more help.

[herculesshields]

Hi I decided just to use the Featured Content Section in Narrative Theme that allows me to upload 4 images beside one another with text below. I'm trying to find the code so I can remove click state on images as I don't need them going anywhere.

It's the section under "Full Phone Protection" that I am trying to eliminate the click states on images for: https://herculesstrong.ca

Thanks!

[Spinturnix]

Ah, I see you meant the Collection List section.

In this case, the simplest way to disable those links would be to add this CSS to the bottom of your "theme.scss.liquid" file:

#shopify-section-1606766388394af1e7 .collection-list-grid__link {
  pointer-events: none;
}

I've scoped this rule to your specific home page section, just in case you want to add another collection list with functional links later on.

[herculesshields]

THANK YOU!!! That worked great! 

Last question (Probably).  Do you know how to remove some of the black spacing between the two sections on the homepage? See attached.

Thanks!

[Spinturnix · Accepted solution]

The fastest method would be to change your "Section spacing" setting in the "The Hero your phone deserves" section:

The section below this one doesn't have such a setting, so reducing its height would require editing code.

[herculesshields]

Thanks!