Adjusting size of header/footer items to mobile/tablet version on Venture theme

Highlighted
New Member
5 0 0

Hi there!

After reading maaaaaaany posts I do not seem to find a code suitable for my two problems:

1) My header under Venture theme has a logo (left), the name of the company (center; I included this myself as it does not come by default) and the search and cart icons (right). On the desktop version everything looks great. However, on the mobile/tablet versions I would like to reduce the size of the shop name and probably of the logo too, otherwise it looks oversized.

2) My footer in the mobile version looks messy; I believe by reducing the size of the text and payment icons, the problem could be solved but I am quite lost atm.

Can anybody please help me?

Thanks a lot in advance!

Alex

http://www.thecasualcompany.com

0 Likes
Highlighted
Shopify Partner
1161 31 204

Hey Alex,

Use this code to reduce the logo size and company name on mobile screens. This should go at the very bottom of your theme.scss.liquid

@media (max-width:420px){
    .site-header__logo img{
         width:55px
    }
    .site-header__logo{
        font-size: 1.2em;
    }
}

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
- Available for hiring. lixon@ecommercestudio.in
0 Likes
Highlighted
New Member
5 0 0

Hi Lixon,

Thanks a lot for your response, it is much appreciated. However, it does not seem to change anything. I have also tried changing the widths and font size but nothing happens. I think it is probably related to the fact that I introduced code in "header.liquid" that is maybe preventing for your code to work. I am pasting below the code included in my "header.liquid", maybe you can tall better now. Apologies in advance if it looks messy, I am learning by doing basically.

Thanks again!

 

<header class="site-header page-element is-moved-by-drawer" role="banner" data-section-id="{{ section.id }}" data-section-type="header">
  <div class="site-header__upper page-width">
    <div class="grid grid--table">
      <div class="grid__item small--one-quarter medium-up--hide">
        <button type="button" class="text-link site-header__link js-drawer-open-left">
          <span class="site-header__menu-toggle--open">
            {% include 'icon-hamburger' %}
          </span>
          <span class="site-header__menu-toggle--close">
            {% include 'icon-close' %}
          </span>
          <span class="icon__fallback-text">{{ 'general.drawers.navigation' | t }}</span>
        </button>
      </div>
      <div class="grid__item small--one-half medium-up--two-thirds small--text-center">
        {% if template.name == 'index' %}
          <h1 class="site-header__logo" itemscope itemtype="http://schema.org/Organization">
        {% else %}
          <div class="site-header__logo h1" itemscope itemtype="http://schema.org/Organization">
        {% endif %}
          {% if section.settings.logo != blank %}
            {% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
            <a href="/" itemprop="url" class="site-header__logo-link">
              <img src="{{ section.settings.logo | img_url: image_size }}"
                   srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
                   alt="{{ section.settings.logo.alt | default: shop.name }}"
                   itemprop="logo">
            </a>
          {% else %}
            {% assign shop_name_length = shop.name.size %}
            <a href="/" itemprop="url" {% if shop_name_length > 10 %} class="site-header__shop-name--small"{% endif %}>{{ shop.name }}</a>
          {% endif %}
        {% if template.name == 'index' %}
          </h1>
        {% else %}
          </div>
        {% endif %}
      </div>

      <div class="grid__item small---half medium-up--two-half small--text-center medium-up--text-left">
          <h1 class="site-header__logo" itemscope itemtype="http://schema.org/Organization">
            
            {% assign shop_name_length = shop.name.size %}
            <a href="/" itemprop="url" {% if shop_name_length > 80 %} class="site-header__shop-name--small"{% endif %}>{{ shop.name }}</a>
    
      </div>

0 Likes
Highlighted
Shopify Partner
1161 31 204

Try changing the  max-width to 480px or 768px

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
- Available for hiring. lixon@ecommercestudio.in
0 Likes
New Member
1 0 0

so I just did this and it worked, but now the text is center and the logo is not ... any way to fix this?

0 Likes