How can I increase the number of icons per row in the Modular theme?

[kgpolicy]

Hello. Does anyone know how to increase the number of icons per row in the icons-row section of the Modular theme?  I found the code to increase the number of icons in the section, but it's still breaking it up into rows of 3. I would like a row of 7 if possible. 

Alternately, I could keep this 2-3-2 configuration if I can decrease the padding for the icons and rows. I can't figure out how to do that in the code either. 

Any ideas??

[Dan-From-Ryviu]

Hi @kgpolicy 

Could you drop your store link to check?

[kgpolicy]

Thanks Dan.  The icons are just taking up tooooo much real estate as is.  

Preview Mode:  https://u6ig7mnvmsx82ly1-59927953460.shopifypreview.com

[Dan-From-Ryviu]

To make appear 7 per row, you need to edit your theme file. 

[kgpolicy]

Thanks. I tried to find the line, but couldn't. Any ideas?

[Dan-From-Ryviu]

Could you share code of that file to check?

[kgpolicy]

Mind telling me how to do that?

[Dan-From-Ryviu]

You can check and change the limit code from 6 to 7 in the file and then add CSS code to change the max width of the icon so it can appear 7 in the row

[kgpolicy]

Unfortunately, we're now miles past my ability and I have no idea how to do that. I looked for a limit code it the sections snippet, but didn't find one. Other than that, I don't know where to look. 

[Dan-From-Ryviu]

Drop Icon rows code here so I can check it for you

[kgpolicy]

{% comment %}

  Icons row

{% endcomment %}

{%- liquid

  assign background = section.settings.color_icons_bg

  assign color = section.settings.color_icons_text

  assign alignment = section.settings.alignment

-%}

{%- style -%}

  [data-section-id="{{ section.id }}"] { color: {{ color }}; }

  [data-section-id="{{ section.id }}"] .icons-row__item .icon path { fill: {{ color }}; }

  [data-section-id="{{ section.id }}"] .icons-row--background { background-color: {{ background }}; }

{%- endstyle -%}

<section data-section-id="{{ section.id }}" data-section-type="icons-row">

  <div class="icons-row--background pad-sm">

    <div class="container">

      <div class="row">

        <div class="icons-row-wrapper icons-row-wrapper--{{ alignment }}">

          {%- for block in section.blocks -%}

            {%- liquid

              assign title = block.settings.title

              assign text = block.settings.text

              assign image = block.settings.icon_image

              assign icon = block.settings.icon_name

            -%}

            <div class="icons-row__item" {{ block.shopify_attributes }}>

              {%- if image != blank -%}

                <div class="icons-row__image">

                  {%- liquid

                    assign sizes = '200px'

                    assign widths = '45, 60, 90, 120, 180'

                    render 'image' image: image, widths: widths, width: 180, sizes: sizes

                  -%}

                </div>

              {%- elsif icon != blank -%}

                {%- case icon -%}

                  {%- when 'award' -%}

                    {%- render 'icon-award' -%}

                  {%- when 'basket' -%}

                    {%- render 'icon-basket' -%}

                  {%- when 'ball' -%}

                    {%- render 'icon-ball' -%}

                  {%- when 'calendar' -%}

                    {%- render 'icon-calendar' -%}

                  {%- when 'camera' -%}

                    {%- render 'icon-camera' -%}

                  {%- when 'comment' -%}

                    {%- render 'icon-comment' -%}

                  {%- when 'data' -%}

                    {%- render 'icon-data' -%}

                  {%- when 'dollar' -%}

                    {%- render 'icon-dollar' -%}

                  {%- when 'email' -%}

                    {%- render 'icon-email' -%}

                  {%- when 'eye' -%}

                    {%- render 'icon-eye' -%}

                  {%- when 'fruits' -%}

                    {%- render 'icon-fruits' -%}

                  {%- when 'house' -%}

                    {%- render 'icon-house' -%}

                  {%- when 'lock' -%}

                    {%- render 'icon-lock' -%}

                  {%- when 'money' -%}

                    {%- render 'icon-money' -%}

                  {%- when 'phone' -%}

                    {%- render 'icon-phone' -%}

                  {%- when 'reload' -%}

                    {%- render 'icon-reload' -%}

                  {%- when 'shop' -%}

                    {%- render 'icon-shop' -%}

                  {%- when 'sync' -%}

                    {%- render 'icon-sync' -%}

                  {%- when 'target' -%}

                    {%- render 'icon-target' -%}

                  {%- when 'wallet' -%}

                    {%- render 'icon-wallet' -%}

                {%- endcase -%}

              {%- else -%}

                <div class="icons-row__image">

                  <div class="icon-svg-placeholder">

                    {{- 'image' | placeholder_svg_tag: 'placeholder-svg-filled' -}}

                  </div>

                </div>

              {%- endif -%}

              {%- if title != blank -%}

                <h3 class="icons-row__title">{{ title }}</h3>

              {%- endif -%}

              {%- if text != blank -%}

                <p class="icons-row__content">{{ text }}</p>

              {%- endif -%}

            </div>

          {% endfor %}

        </div>

      </div>

    </div>

  </div>

</section>

{% schema %}

{

  "name": "Icons row",

  "max_blocks": 9,

  "class": "shopify-section--icons-row icons-row",

  "settings": [

    {

"type": "header",

"content": "Layout"

},

    {

"type": "select",

"id": "alignment",

"label": "Alignment",

      "default": "center",

"options": [

{ "label": "Center", "value": "center" },

{ "label": "Left", "value": "left" }

]

    },

    {

"type": "header",

"content": "Colors"

},

    {

      "type": "color",

      "id": "color_icons_bg",

      "label": "Background",

      "default": "#fafafa"

    },

    {

      "type": "color",

      "id": "color_icons_text",

      "label": "Text",

      "default": "#333"

    }

  ],

  "blocks": [

    {

      "type": "text",

      "name": "Item",

      "settings": [

        {

          "type": "select",

          "id": "icon_name",

          "label": "Icon",

          "default": "shop",

          "options": [

            { "value": "award", "label": "Award" },

            { "value": "basket", "label": "Basket" },

            { "value": "ball", "label": "Ball" },

            { "value": "calendar", "label": "Calendar" },

            { "value": "camera", "label": "Camera" },

            { "value": "comment", "label": "Comment" },

            { "value": "data", "label": "Data" },

            { "value": "dollar", "label": "Dollar" },

            { "value": "email", "label": "Email" },

            { "value": "eye", "label": "Eye" },

            { "value": "fruits", "label": "Fruits" },

            { "value": "house", "label": "House" },

            { "value": "lock", "label": "Lock" },

            { "value": "money", "label": "Money" },

            { "value": "phone", "label": "Phone" },

            { "value": "reload", "label": "Reload" },

            { "value": "shop", "label": "Shop" },

            { "value": "sync", "label": "Sync" },

            { "value": "target", "label": "Target" },

            { "value": "wallet", "label": "Wallet" },

{ "value": "none", "label": "None" }

          ]

        },

        {

          "type": "image_picker",

          "id": "icon_image",

          "label": "Icon image",

          "info": "If image set it will override the icon"

        },

        {

          "type": "text",

          "id": "title",

          "label": "Heading",

          "default": "Feature"

        },

        {

          "type": "richtext",

          "id": "text",

          "label": "Text",

          "default": "<p>Modular is a powerful Shopify theme that will set you apart from the rest with Mosaic, Image with text, and Slideshow sections.</p>"

        }

      ]

    }

  ],

  "presets": [

    {

      "name": "Icons row",

      "category": "Text",

      "blocks": [

        {

          "type": "text"

        },

        {

          "type": "text"

        },

        {

          "type": "text"

        }

      ]

    }

  ],

  "disabled_on": {

    "groups": ["header"]

  }

}

{% endschema %}

[kgpolicy]

[Dan-From-Ryviu]

You can try to find limit code in {% schema %}...{% endschema %} at the bottom of your file. 

[kgpolicy]

I wish I could find it, but again, we're MILES past my ability at this point. I know just enough HTML (4!) to be dangerous, so this is really over my head. I looked for a limit code for the row, but all I could find was a limit for the section. 

[strandkueche]

Hi Kgpolicy,
I had the the same problem an wonderwise I solved it: Go to theme.css -> find .icons-row__item and set width: instead of 33,33% to 20%, if you want 5 rows.
best, Markus