Sort by button wrong size

Solved
Highlighted
New Member
5 0 0

Hey guys, I got a problem on the wrong size of sort by button.

Screenshot 2020-10-21 at 01.43.47.png

Anyone gets an idea on how to fix it. Thanks

 

The code as below:

 

 

       {% if settings.collection_sort %}
          <div class="four columns section_select omega {% unless settings.collection_tags %}offset-by-four{% endunless %}">
            <label for="sort-by" class="inline">{{ 'collections.sorting.title' | t }}: </label> 
            <select id="sort-by">
              <option value="manual">{{ 'collections.sorting.featured' | t }}</option>
              <option value="best-selling">{{ 'collections.sorting.best_selling' | t }}</option>
              <option value="title-ascending">{{ 'collections.sorting.az' | t }}</option>
              <option value="title-descending">{{ 'collections.sorting.za' | t }}</option>
              <option value="price-ascending">{{ 'collections.sorting.price_ascending' | t }}</option>
              <option value="price-descending">{{ 'collections.sorting.price_descending' | t }}</option>
              <option value="created-descending">{{ 'collections.sorting.date_descending' | t }}</option>
              <option value="created-ascending">{{ 'collections.sorting.date_ascending' | t }}</option>
            </select>
            <script type="text/javascript">
              // <![CDATA[  
                $('#sort-by')
                  .val('{{ collection.sort_by | default: collection.default_sort_by  }}')
                  .bind('change', function() {
                    Shopify.queryParams.sort_by = $(this).val();
                    location.search = $.param(Shopify.queryParams);
                });

 

 

0 Likes
Highlighted

Hello Alfred2,
Please share your site url.
So that i can check and let you know the exact solution here.

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
New Member
5 0 0

Hey oscprofessional

Here is the link:

https://hk-virginhairandbeauty.glopalstore.com/collections/balayage-ombre-colour-styles

Thanks for your help.

0 Likes
Highlighted

This is an accepted solution.

Hello Alfred2,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->styles.scss.liquid

@media only screen and (min-width: 768px){
.four.columns.section_select.omega.offset-by-four {
    width: 500px;
}
}
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
New Member
5 0 0

Thank you oscprofessional!

Problem solved!

May I ask you one more question.

You see the home page, the menu and slideshows are overlapping. Could you please help me to check it?

I would like to put the slideshows a little but lower.

Thank you so much!

0 Likes