HELP! Margins are off

Solved
Highlighted
Pathfinder
75 3 8

As you can see below, the page has a blank space on the right of the screen only on iPad.

 

Techerooco.myshopify.com

 

Annotation 2020-07-14 072404.jpg

 

Here's the code in my general-header.liquid:

 

{% comment %}
  Changing `show_search` to `true` enables the Search in the header
{% endcomment %}
{% assign show_search = false %}

{% comment %}
  Removed the settings_schema option to change header,
    - header_navigation_location can be either header, or drawer.
{% endcomment %}
{% assign header_navigation_location = 'header' %}

{%- capture additional_classes -%}
  header

  {%- if header_navigation_location == 'drawer' -%}
    collapsed-navigation
  {%- endif -%}

  {% if section.settings.header_sticky %}
    sticky-header
  {% endif %}
{%- endcapture -%}

{% assign default_logo = section.settings.header_logo %}
{% assign menu = section.settings.menu %}
{% assign alternate_logo = section.settings.header_logo_alternate %}


<div
  class="{{ additional_classes | strip_newlines }}"
  {% if section.settings.header_sticky %}
    data-sticky-header
  {% endif %}
  data-main-header="{{ header_navigation_location }}"
  data-section-id="{{ section.id }}"
  data-section-type="header">
  <div class="main-header-wrapper">
      
  	<div class="main-header" role="banner" data-header-content="">
      <h1 class="
          branding
          
            regular-logo-in-drawer
          
          
            has-logo
          
        ">
        <a class="branding-logo-link" href="/">
          
            

  

  <img src="//cdn.shopify.com/s/files/1/0279/8577/2609/files/aymfu-pdvpn.svg?v=1593464304" alt="Techeroo" data-rimg="" srcset=//cdn.shopify.com/s/files/1/0279/8577/2609/files/aymfu-pdvpn.svg?v=1593464304 1x,"//cdn.shopify.com/s/files/1/0279/8577/2609/files/aymfu-pdvpn.svg?v=1593464304 2x" class="branding-logo-image logo-regular" data-header-logo="">




            
          
        </a>
      </h1>
        
 
      
      
      
      {% if show_search %}
        <div class="header-search-wrapper">
          <form class="header-search-form" action="/search" method="get">
            <input class="header-search-input" name="q" type="text" placeholder="{{ 'general.general.search_placeholder' | t }}" value="">
          </form>
        </div>
      {% endif %}
      <div class="header-tools">
        {% if header_navigation_location == 'header' %}
          {%
            include 'navigation',
            showArrows: false,
            navigation_menu: menu
          %}
        {% endif %}
        <div class="header-actions">
          <div class="header-actions-list">
            <div class="header-actions-list-item header-currency-switcher currency-switcher coin-container"></div>
            {% if settings.show-currency-switcher %}
              <div class="header-actions-list-item header-currency-switcher currency-switcher">
                {% include "currency-selector" %}
              </div>
            {% endif %}
            {% if show_search %}
              <a class="header-actions-list-item header-search-toggle icon-search" href="#" data-search-toggle></a>
            {% endif %}
            {% if section.settings.show_cart %}
              <a class="header-actions-list-item icon-cart header-cart-link" href="/cart"  tabindex="0">
                <span class="header-cart-count {% if cart.item_count > 0 %}active{% endif%}">{{ cart.item_count }}</span>
              </a>
            {% endif %}
            {% if header_navigation_location == 'header' %}
              {% if shop.customer_accounts_enabled %}
                <a class="header-actions-list-item header-account-link icon-head" href="/account">

            </a>
              {% endif %}
            {% endif %}
            <a class="header-actions-list-item drawer-toggle" data-drawer-toggle tabindex="0" href="#">
              <span class="icon-menu"></span>
              <span class="icon-cross"></span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

    
    
    

    
    
    
    
    
    
    
    
    
    
 
  <div class="header-drawer" tabindex="-1" data-header-drawer>
    {%
      include 'navigation',
      showArrows: true,
      navigation_menu: menu
    %}
    <div class="coin-container"></div>
    {% if settings.show-currency-switcher %}
      <div class="drawer-currency-switcher currency-switcher">
        {% include "currency-selector" %}
      </div>
    {% endif %}
    {% if shop.customer_accounts_enabled %}
      <a href="/account" class="drawer-account-link button">{{ 'general.general.my_account' | t }}</a>
    {% endif %}
    {% if section.settings.drawer_social_icons %}
      <div class="drawer-social-icons">
        {% assign social_media_accounts = "facebook|twitter|google|pinterest|instagram|vimeo|youtube|rss" | split: "|" %}
        {% for account in social_media_accounts %}
          {% capture url %}social_{{ account }}_url{% endcapture %}
          {% if settings[url] != blank %}
            <a
              class="drawer-social-icon-{{ account }}"
              href="{{ settings[url] | escape }}"
              target="_blank">
              {{ account | capitalize }}
            </a>
          {% endif %}
        {% endfor %}
      </div>
    {% endif %}
  </div>
</div>

{% schema %}
{
  "name": "Header",
  "settings": [
    {
      "type": "link_list",
      "id": "menu",
      "label": "Menu",
      "default": "main-menu"
    },
    {
      "type": "checkbox",
      "id": "header_sticky",
      "label": "Enable fixed header",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_cart",
      "label": "Show cart",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "drawer_social_icons",
      "label": "Enable social icons in collapsed navigation",
      "default": false
    },
    {
      "type": "header",
      "content": "Logo"
    },
    {
      "type": "image_picker",
      "id": "header_logo",
      "label": "Logo image",
      "info": "400 x 200px .png recommended"
    },
    {
      "type": "image_picker",
      "id": "header_logo_alternate",
      "label": "Inverted logo image",
      "info": "400 x 200px .png recommended"
    }
  ]
}
{% endschema %}

 

 

0 Likes
Highlighted

This is an accepted solution.

Hello @TechSolver,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste below code at the bottom of the file.

@media screen and (max-width: 1280px) and (min-width: 800px) {
.footer-column:last-child li:first-child a.footer-menu-list-item-anchor {
    font-size: 16px;
}
}

 

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Pathfinder
75 3 8

@oscprofessional It worked! I just had to change the width to 700 so it would work for iPad. Thanks!

0 Likes