Widening columns in footer - Canopy Theme

Highlighted
New Member
12 0 0

I am wanting to widen the link columns in my footer and am having trouble doing so. Not sure if it's because there's meant to be space for 3 link columns, but I only want and need 2 in any event. I don't have anything in the text column at present but do use it from time to time so don't want to do away with that altogether. I would like to be able to have the 2 link columns stretch the full width of the footer when the text column isn't being used though (if possible). Any help would be much appreciated. Thanks! 

 

Current code:

 

<footer id="page-footer" class="page-footer">
<div class="container">

<a class="hash-link" href="#page-wrap-content"><span class="beside-svg">{{ 'layout.footer.back_to_top' | t }}</span> {% include 'svg-chevron-up' %}</a>

<div class="row section padless-top">

<div class="extra-column half column">
{% if section.settings.footer_display_newsletter %}
{% include 'mailing-signup' %}
{% endif %}
</div>

<div class="social-column align-right-desktop {% if section.settings.footer_display_newsletter %}half column{% else %}full column{% endif %}">
{% include 'social-links' %}
</div>

</div>

{% if section.settings.footer_complexity == 'columns' %}
<div class="row section padless-top">

{% if section.settings.show_footer_logo %}
<div class="logo-column column">
{% if section.settings.footer_logo != blank %}
{{ section.settings.footer_logo | img_url: '500x' | img_tag | link_to: shop.url }}
{% else %}
<div class="placeholder-image">{{ 'image' | placeholder_svg_tag }}</div>
{% endif%}
</div>
{% endif %}

<div class="text-column {% unless section.settings.show_footer_logo %}occupies-logo{% endunless %} column rte">
{{ section.settings.text_content }}
<col width="300">
</div>

<div class="links-column column">
<ul class="plain">
{% for link in linklists[section.settings.footer_linklist].links %}
<li>{{ link.title | link_to: link.url }}</li>
{% endfor %}
</ul>
</div>

<div class="links-column column">
<ul class="plain">
{% for link in linklists[section.settings.footer_linklist2].links %}
<li>{{ link.title | link_to: link.url }}</li>
{% endfor %}
</ul>
</div>

<div class="links-column column">
<ul class="plain">
{% for link in linklists[section.settings.footer_linklist3].links %}
<li>{{ link.title | link_to: link.url }}</li>
{% endfor %}
</ul>
</div>

</div>

{% else %}

{% if section.settings.text_content != blank %}
<div class="rte align-center">{{ section.settings.text_content }}</div>
{% endif %}
<div class="{% if section.settings.show_footer_logo %}menu-with-logo{% endif %}">
{% if section.settings.show_footer_logo %}
<span class="footer-logo">
{% if section.settings.footer_logo != blank %}
{{ section.settings.footer_logo | img_url: '240x80' | img_tag | link_to: shop.url }}
{% else %}
<div class="placeholder-image">{{ 'image' | placeholder_svg_tag }}</div>
{% endif%}
</span>
{% endif %}
<ul class="plain inline list-divide">
{% for link in linklists[section.settings.footer_linklist].links %}
<li>{{ link.title | link_to: link.url }}</li>
{% endfor %}
</ul>
</div>

{% if section.settings.footer_linklist2 != blank %}
<ul class="plain inline list-divide">
{% for link in linklists[section.settings.footer_linklist2].links %}
<li>{{ link.title | link_to: link.url }}</li>
{% endfor %}
</ul>
{% endif %}

{% if section.settings.footer_linklist3 != blank %}
<ul class="plain inline list-divide">
{% for link in linklists[section.settings.footer_linklist3].links %}
<li>{{ link.title | link_to: link.url }}</li>
{% endfor %}
</ul>
{% endif %}

{% endif %}

<div class="inline-row spaced">
<div class="inline-item left">
<div class="copy">{{ 'layout.footer.copyright' | t }} &copy; {{ "now" | date: "%Y" }} {{ shop.name | link_to: '/' }}.</div>


{% comment %} AUTHOR SECTION {% endcomment %}
<div class="theme-author">
{{ 'layout.footer.theme_by_html' | t }}
{{ powered_by_link }}
</div>
{% comment %} END OF AUTHOR SECTION {% endcomment %}

</div>

<div class="inline-item right last payment-methods">
{% for type in shop.enabled_payment_types %}
<img src="{{ type | payment_type_img_url }}" alt="{{ type | escape }}" />
{% endfor %}<a href="/pages/zippay">
<img src="https://d3k1w8lx8mqizo.cloudfront.net/INTEGRATIONS/2016/zippay/payment-icons/zip-paycon-80x50-greysc..." style="height:30px">
</a>
</div>
</div>

</div>
</footer>

0 Likes
Highlighted

Could you give me your store URL? I'll check and help you fix it

 

Shopify App & Theme Developer
0 Likes
Highlighted
New Member
12 0 0
Sure – it’s www.jackandwillow.com.au Thanks
0 Likes
Highlighted

I hope this code can help you

<footer id="page-footer" class="page-footer">
    <div class="container">
        <a class="hash-link" href="#page-wrap-content"><span class="beside-svg">{{ 'layout.footer.back_to_top' | t }}</span> {% include 'svg-chevron-up' %}</a>
        <div class="row section padless-top">
            <div class="extra-column half column">
                {% if section.settings.footer_display_newsletter %}
                {% include 'mailing-signup' %}
                {% endif %}
            </div>
            <div class="social-column align-right-desktop {% if section.settings.footer_display_newsletter %}half column{% else %}full column{% endif %}">
                {% include 'social-links' %}
            </div>
        </div>
        {% if section.settings.footer_complexity == 'columns' %}
        <div class="row section padless-top">
            {% if section.settings.show_footer_logo %}
            <div class="logo-column column">
                {% if section.settings.footer_logo != blank %}
                {{ section.settings.footer_logo | img_url: '500x' | img_tag | link_to: shop.url }}
                {% else %}
                <div class="placeholder-image">{{ 'image' | placeholder_svg_tag }}</div>
                {% endif%}
            </div>
            {% endif %}
            {% if section.settings.text_content != "" %}
            <div class="text-column {% unless section.settings.show_footer_logo %}occupies-logo{% endunless %} column rte">
                {{ section.settings.text_content }}
            </div>
            {% endif %}
            {% if section.settings.footer_linklist != "" %}
            <div class="third column" style="width: 100%">
                <ul class="plain">
                    {% for link in linklists[section.settings.footer_linklist].links %}
                    <li>{{ link.title | link_to: link.url }}</li>
                    {% endfor %}
                </ul>
            </div>
            {% endif %}
            {% if section.settings.footer_linklist2 != "" %}
            <div class="third column">
                <ul class="plain" style="width: 100%">
                    {% for link in linklists[section.settings.footer_linklist2].links %}
                    <li>{{ link.title | link_to: link.url }}</li>
                    {% endfor %}
                </ul>
            </div>
            {% endif %}
            {% if section.settings.footer_linklist3 != "" %}
            <div class="third column" style="width: 100%">
                <ul class="plain">
                    {% for link in linklists[section.settings.footer_linklist3].links %}
                    <li>{{ link.title | link_to: link.url }}</li>
                    {% endfor %}
                </ul>
            </div>
            {% endif %}
        </div>
        {% else %}
        {% if section.settings.text_content != blank %}
        <div class="rte align-center">{{ section.settings.text_content }}</div>
        {% endif %}
        <div class="{% if section.settings.show_footer_logo %}menu-with-logo{% endif %}">
            {% if section.settings.show_footer_logo %}
            <span class="footer-logo">
                {% if section.settings.footer_logo != blank %}
                {{ section.settings.footer_logo | img_url: '240x80' | img_tag | link_to: shop.url }}
                {% else %}
                <div class="placeholder-image">{{ 'image' | placeholder_svg_tag }}</div>
                {% endif%}
            </span>
            {% endif %}
            <ul class="plain inline list-divide">
                {% for link in linklists[section.settings.footer_linklist].links %}
                <li>{{ link.title | link_to: link.url }}</li>
                {% endfor %}
            </ul>
        </div>
        {% if section.settings.footer_linklist2 != blank %}
        <ul class="plain inline list-divide">
            {% for link in linklists[section.settings.footer_linklist2].links %}
            <li>{{ link.title | link_to: link.url }}</li>
            {% endfor %}
        </ul>
        {% endif %}
        {% if section.settings.footer_linklist3 != blank %}
        <ul class="plain inline list-divide">
            {% for link in linklists[section.settings.footer_linklist3].links %}
            <li>{{ link.title | link_to: link.url }}</li>
            {% endfor %}
        </ul>
        {% endif %}
        {% endif %}
        <div class="inline-row spaced">
            <div class="inline-item left">
                <div class="copy">{{ 'layout.footer.copyright' | t }} &copy; {{ "now" | date: "%Y" }} {{ shop.name | link_to: '/' }}.</div>
                {% comment %} AUTHOR SECTION {% endcomment %}
                <div class="theme-author">
                    {{ 'layout.footer.theme_by_html' | t }}
                    {{ powered_by_link }}
                </div>
                {% comment %} END OF AUTHOR SECTION {% endcomment %}
            </div>
            <div class="inline-item right last payment-methods">
                {% for type in shop.enabled_payment_types %}
                <img src="{{ type | payment_type_img_url }}" alt="{{ type | escape }}" />
                {% endfor %}<a href="/pages/zippay">
                    <img src="https://d3k1w8lx8mqizo.cloudfront.net/INTEGRATIONS/2016/zippay/payment-icons/zip-paycon-80x50-greysc..." style="height:30px">
                </a>
            </div>
        </div>
    </div>
</footer>
Shopify App & Theme Developer
0 Likes
Highlighted
New Member
12 0 0
Thanks for that! It has kind of worked, but the columns aren’t side by side?
0 Likes
Highlighted
New Member
12 0 0

Screen Shot 2019-06-05 at 12.26.52 pm.png

0 Likes
Highlighted

Sorry,i miss something

Please update this code



<footer id="page-footer" class="page-footer">
    <div class="container">
        <a class="hash-link" href="#page-wrap-content"><span class="beside-svg">{{ 'layout.footer.back_to_top' | t }}</span> {% include 'svg-chevron-up' %}</a>
        <div class="row section padless-top">
            <div class="extra-column half column">
                {% if section.settings.footer_display_newsletter %}
                {% include 'mailing-signup' %}
                {% endif %}
            </div>
            <div class="social-column align-right-desktop {% if section.settings.footer_display_newsletter %}half column{% else %}full column{% endif %}">
                {% include 'social-links' %}
            </div>
        </div>
        {% if section.settings.footer_complexity == 'columns' %}
        <div class="row section padless-top">
            {% if section.settings.show_footer_logo %}
            <div class="logo-column column">
                {% if section.settings.footer_logo != blank %}
                {{ section.settings.footer_logo | img_url: '500x' | img_tag | link_to: shop.url }}
                {% else %}
                <div class="placeholder-image">{{ 'image' | placeholder_svg_tag }}</div>
                {% endif%}
            </div>
            {% endif %}
            {% assign text_content =  section.settings.text_content | strip  %}
            {% if text_content  != "" %}
            <div class="text-column {% unless section.settings.show_footer_logo %}occupies-logo{% endunless %} column rte">
                {{ section.settings.text_content }}
            </div>
            {% endif %}
            {% if section.settings.footer_linklist != "" %}
            <div class="third column" >
                <ul class="plain" style="width: 100%">
                    {% for link in linklists[section.settings.footer_linklist].links %}
                    <li>{{ link.title | link_to: link.url }}</li>
                    {% endfor %}
                </ul>
            </div>
            {% endif %}
            {% if section.settings.footer_linklist2 != "" %}
            <div class="third column">
                <ul class="plain" style="width: 100%">
                    {% for link in linklists[section.settings.footer_linklist2].links %}
                    <li>{{ link.title | link_to: link.url }}</li>
                    {% endfor %}
                </ul>
            </div>
            {% endif %}
            {% if section.settings.footer_linklist3 != "" %}
            <div class="third column" >
                <ul class="plain" style="width: 100%">
                    {% for link in linklists[section.settings.footer_linklist3].links %}
                    <li>{{ link.title | link_to: link.url }}</li>
                    {% endfor %}
                </ul>
            </div>
            {% endif %}
        </div>
        {% else %}
        {% if section.settings.text_content != blank %}
        <div class="rte align-center">{{ section.settings.text_content }}</div>
        {% endif %}
        <div class="{% if section.settings.show_footer_logo %}menu-with-logo{% endif %}">
            {% if section.settings.show_footer_logo %}
            <span class="footer-logo">
                {% if section.settings.footer_logo != blank %}
                {{ section.settings.footer_logo | img_url: '240x80' | img_tag | link_to: shop.url }}
                {% else %}
                <div class="placeholder-image">{{ 'image' | placeholder_svg_tag }}</div>
                {% endif%}
            </span>
            {% endif %}
            <ul class="plain inline list-divide">
                {% for link in linklists[section.settings.footer_linklist].links %}
                <li>{{ link.title | link_to: link.url }}</li>
                {% endfor %}
            </ul>
        </div>
        {% if section.settings.footer_linklist2 != blank %}
        <ul class="plain inline list-divide">
            {% for link in linklists[section.settings.footer_linklist2].links %}
            <li>{{ link.title | link_to: link.url }}</li>
            {% endfor %}
        </ul>
        {% endif %}
        {% if section.settings.footer_linklist3 != blank %}
        <ul class="plain inline list-divide">
            {% for link in linklists[section.settings.footer_linklist3].links %}
            <li>{{ link.title | link_to: link.url }}</li>
            {% endfor %}
        </ul>
        {% endif %}
        {% endif %}
        <div class="inline-row spaced">
            <div class="inline-item left">
                <div class="copy">{{ 'layout.footer.copyright' | t }} &copy; {{ "now" | date: "%Y" }} {{ shop.name | link_to: '/' }}.</div>
                {% comment %} AUTHOR SECTION {% endcomment %}
                <div class="theme-author">
                    {{ 'layout.footer.theme_by_html' | t }}
                    {{ powered_by_link }}
                </div>
                {% comment %} END OF AUTHOR SECTION {% endcomment %}
            </div>
            <div class="inline-item right last payment-methods">
                {% for type in shop.enabled_payment_types %}
                <img src="{{ type | payment_type_img_url }}" alt="{{ type | escape }}" />
                {% endfor %}<a href="/pages/zippay">
                    <img src="https://d3k1w8lx8mqizo.cloudfront.net/INTEGRATIONS/2016/zippay/payment-icons/zip-paycon-80x50-greysc..." style="height:30px">
                </a>
            </div>
        </div>
    </div>
</footer>

 

Shopify App & Theme Developer
0 Likes
Highlighted

also, you should remove the text in the textbox

 

Shopify App & Theme Developer
0 Likes
Highlighted

Please copy and paste the code again, I think you lose some code

Shopify App & Theme Developer
0 Likes
Highlighted
New Member
12 0 0

It's still mis-aligned unfortunately. 

0 Likes