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

Solved
Excursionist
22 0 7

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!

Screen Shot 2020-11-30 at 12.28.52 PM.png

0 Likes
Shopify Expert
62 17 12

This is an 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.

0 Likes
Excursionist
22 0 7

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!

0 Likes
Shopify Expert
62 17 12

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.

0 Likes
Excursionist
22 0 7

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.

Screen Shot 2020-12-01 at 11.03.31 AM.png

 

Thanks!

0 Likes
Shopify Expert
62 17 12

This is an accepted solution.

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

Spinturnix_0-1606850021913.png

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

0 Likes
Excursionist
22 0 7

Thanks!

0 Likes