get 4 icons with text next to each other in product description.

Highlighted
Excursionist
33 0 2

Hi guys, i hope you all doing fine!

I need you help with this issue. this is a product page that i came across, and i noticed a container that i need also on my store. This is example page https://www.wearittoheart.com/collections/leggings/products/tulip-leggings-blush-camo-peony

When you scroll down to product description you see the ''product detail'' box like in this screen shot

icons.JPG

Now whats cool about this, and what im trying to do is, making is look like this (offcourse other titels and my own icons), the beauty about this is, you see 4 titels with icons alligned next to each other. And when you check it on phone you get them all underneath each other like this.

mobile view.JPG

now i checked the file on the product page and saw this code:

<div class="productDetail__box">

             

              

             

             

              <div>

                <img src="https://cdn.shopify.com/s/files/1/0293/4472/7118/files/Wear-It-To-Heart-Icons-Eco-Friendly.svg?v=159...">

                <span>Eco-Friendly</span>

              </div>

              

             

             

             

             

              <div>

                <img src="https://cdn.shopify.com/s/files/1/0293/4472/7118/files/Wear-It-To-Heart-Icons-Color-Retention.svg?v=...">

                <span>Color Retention</span>

              </div>

             

             

             

             

             

              <div>

                <img src="https://cdn.shopify.com/s/files/1/0293/4472/7118/files/Wear-It-To-Heart-Icons-Salutex-Fabric.svg?v=1...">

                <span>Salutex Fabric</span>

              </div>

             

             

             

             

              

              <div>

                <img src="https://cdn.shopify.com/s/files/1/0293/4472/7118/files/Wear-It-To-Heart-Icons-Quick-Dry.svg?v=159077...">

                <span>Quick Dry</span>

              </div>

             

             

              

             

             

              <div>

                <img src="https://cdn.shopify.com/s/files/1/0293/4472/7118/files/Wear-It-To-Heart-Icons-Aroma-Control.svg?v=15...">

                <span>Aroma Control</span>

              </div>

             

             

             

             

             

              <div>

                <img src="https://cdn.shopify.com/s/files/1/0293/4472/7118/files/Wear-It-To-Heart-Icons-Moisture-Wicking.svg?v...">

                <span>Moisture Wicking</span>

              </div>

             

             

             

             

             

              <div>

                <img src="https://cdn.shopify.com/s/files/1/0293/4472/7118/files/Wear-It-To-Heart-Icons-Machine-Wash-Cold.svg?...">

                <span>Machine Wash Cold</span>

              </div>

             

             

             

             

              

              <div>

                <img src="https://cdn.shopify.com/s/files/1/0293/4472/7118/files/Wear-It-To-Heart-Icons-Do-Not-Iron.svg?v=1590...">

                <span>Do Not Iron</span>

              </div>

             

              

            </div>

So i thought oke i will just past it in my product description of the product in my shopify store, by pressing the html button. Offcourse i also knowed that there needs to be add some code in the scss section. However i uploaded the scss code from this page in mine, and it worked, but the problem is, i think is a hole coding of the hole scss, becuase when i uploaded this code my hole theme changed (alligment but also typography). I know some code editing but i never discovered how to read this codes. Because when you check this scss code, and you search in there and find code ''.productDetail__box {'' you will noticed that there are 6 lines (not all lines below but spread through the hole scss). So im wondering can someone help me figure this out? Here is the code from the scss file.

0 Likes
Highlighted
Excursionist
33 0 2

@Ninthony  do you maybe know this?

0 Likes