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

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;
    }
}

 

Available for hiring. Inbox me lixonic[at]gmail[dot]com
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

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

Available for hiring. Inbox me lixonic[at]gmail[dot]com
0 Likes
Highlighted
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