Increase Title Tab Text Size

Solved
PRebel
Tourist
3 0 2

I want to increase the tab title text size. It is way too small and invisible for my store. I don't want to make it too huge, but a little bit bigger. It would be great if the solution would make the option flexible, so I could increase the size to my liking.

 

Here's the complete section's code:

 

 

 

<div data-section-id="{{ section.id }}" data-section-type="section-product-v1" style="{% if section.settings.margin_top != blank %}margin-top: {{section.settings.margin_top}}px;{%endif%} {% if section.settings.margin_bottom != blank %}margin-bottom: {{section.settings.margin_bottom}}px;{% endif %}">
  <div class="section-product-v1 mt-all">
    <div class="container container-v1">
      {% if section.settings.title-section != blank %}
      <div class="text-center">
        
      	<h3 class="title_heading text-center mb-4" >{{section.settings.title-section}}</h3>
      </div>
      {% endif %}
      <div class="row justify-content-center">
        <div class="col-lg-12">
        <ul class="nav nav-tabs title-tab justify-content-center">
          {% if section.blocks.size > 0 %}
          {%- assign i = 1 -%}
          {% for block in section.blocks %}

          <li>
            <a href="#a{{i}}" data-toggle="tab" class="{% if forloop.first %}active{% endif %} ds-prod-1">{{block.settings.tab_title}}</a>
          </li>
          {%- assign i = i | plus : 1 -%}

          {% endfor %}
          {% endif %}
        </ul>
        </div>
      </div>
      
      <div class="tab-content">

        {% if section.blocks.size > 0 %}
        {%- assign i = 1 -%}
        {% for block in section.blocks %}
        {% assign products_limit = block.settings.tab_limit %}
        {% assign col = block.settings.tab_collection %}

        <div id="a{{i}}" class="tab-pane fade {% if forloop.first %}show active{% endif %}">
          <div class="row">
            {% for product in collections[col].products limit: products_limit %}
            <div class="col-lg-3 col-md-4 col-sm-6 col-6 product-tab-pd ">
              {% include 'product-item-v1' %}
            </div>
            {% else %}
            {% for i in (1..8) %}
            <div class="col-lg-3 col-md-4 col-sm-6 col-6 product-tab-pd">
              {% include 'empty-product-item' %}
            </div>
            {% endfor %}
            {% endfor %}
          </div>
        </div>
        {%- assign i = i | plus : 1 -%}
        {% endfor %}
        {% endif %}

      </div>
      
    </div>

  </div>
</div>

{% schema %}
{
  "name": "Product V1 Venia",
  "settings": [
    {
      "type": "header",
      "content": "Section Space"
    },
    {
      "type": "text",
      "id": "margin_top",
      "label": "Margin Top",
      "info": "Defined in pixels. Do not add the 'px' unit."
    },
    {
      "type": "text",
      "id": "margin_bottom",
      "label": "Margin Bottom",
      "info": "Defined in pixels. Do not add the 'px' unit."
    },
    {
      "type": "text",
      "id": "title-section",
      "label": "Title Section Product",
      "default": "Our Best Seller"
    }
  ],
  "blocks": [
    {
      "type": "tab",
      "name": "Tab",
      "settings": [
        {
          "type": "text",
          "id": "tab_title",
          "label": "Tab Title",
          "default": "Trending"
        },
        {
          "type": "collection",
          "id": "tab_collection",
          "label": "Chose Collection"
        },
        {
          "type": "range",
          "id": "tab_limit",
          "min": 2,
          "max": 50,
          "step": 1,
          "label": "Limit Products",
          "default": 8
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Product V1",
      "category": "HOME PAGE",
      "blocks": [
        {
          "type": "tab",
          "settings": {
            "tab_title": "Men"
          }
        },
        {
          "type": "tab",
          "settings": {
            "tab_title": "Women"
          }
        }
      ]
    }
  ]
}
{% endschema %}

 

 

 

 

Thank you!

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
24924 2498 9041

This is an accepted solution.

@PRebel 

thanks for more details

add this code your css bottom of the file

.ds-prod-1 {
    font-size: 28px;
    margin: 0px 15px 30px;
    display: inline-block;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 5 (5)
KetanKumar
Shopify Partner
24924 2498 9041

@PRebel 

thanks for code can you please share store url 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
PRebel
Tourist
3 0 2

@KetanKumar the store is www.silky-alley.myshopify.com

I'm referring to section named "Candy".

Also noticed that there's no space between tabs.

 

Thank you!

KetanKumar
Shopify Partner
24924 2498 9041

This is an accepted solution.

@PRebel 

thanks for more details

add this code your css bottom of the file

.ds-prod-1 {
    font-size: 28px;
    margin: 0px 15px 30px;
    display: inline-block;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

PRebel
Tourist
3 0 2

Thank you!!!

KetanKumar
Shopify Partner
24924 2498 9041

@PRebel 

its my pleasure to help us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing