Constrain radio buttons to page width on mobile

Highlighted
Excursionist
34 0 6

My site is www.skinnerco.us

I made custom radio buttons instead of the drop-down filters. However, I can't get it to stop cutting off the page on mobile. I would like them to be constrained to the width of the page and display on multiple rows as needed.

Here's the code specific to the buttons:

{% if section.settings.collection_tags and collection.handle != 'vendors' %}
<div class="sixteen columns">
<ul class="subnav clearfix">
<li{% unless current_tags %} class="active"{% endunless %}>
{% if collection.handle %}
<a href="/collections/{{ collection.handle }}{% if collection.sort_by %}?sort_by={{ collection.sort_by }}{% endif %}">All</a>
{% elsif collection.current_type %}
<a href="{{ collection.current_type | url_for_type | sort_by: collection.sort_by }}">All</a>
{% elsif collection.current_vendor %}
<a href="{{ collection.current_vendor | url_for_vendor | sort_by: collection.sort_by }}">All</a>
{% endif %}
</li>
{% for tag in collection.all_tags %}
{% if current_tags contains tag %}
<li class="active">
{{ tag | link_to_remove_tag: tag }}
</li>
{% else %}
<li>
{{ tag | link_to_tag: tag }}
</li>
{% endif %}
{% endfor %}
</ul>
<style>
/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* Subnavigation styles */
.subnav { clear: both; list-style-type: none; margin: 35px 0; padding: 0; float: center; }
.subnav li { display: block; float: left; }
.subnav li a {
display: block;
height: 28px;
line-height: 28px;
padding: 0 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
background: none;
margin: auto;
color: #03131F;

I've also attached a photo of the problem. There are multiple buttons which extend past the screen on both the left and right.

Can anyone please help? I'm supposed to launch products tomorrow afternoon and this is the last thing I need to do before I can do so.

Thanks!

Screenshot_20201106-003228_Chrome.jpg

0 Likes
Highlighted
New Member
6 0 0

Hi DASkinner,

I am aware of this issue, please share your Skype ID so that I can able to fix your issue.

Thanks.

0 Likes