Widget locations desktop vs mobile

[Frederik Leemans]

Dear Support,

On a mobile device, all of the widgets in the ‘shop sidebar’ drop to the bottom. Is it possible to have a specific widget ‘on top’ of the products page, rather than at the bottom?

Thanks,

Frederik

[Andy]

Have you tried the “Shop Filters” widget area?

This is designed specifically to display horizontally above the products on the products page (shop page, product categories etc.).

[Frederik Leemans]

I have; and it almost fits the bill: the only problem I have is that there’s an extra line of text added (‘Product filters’) and that it requires clicking a drop-down. Is there any way to avoid that?
<div id=”ConnectiveDocSignExtentionInstalled” data-extension-version=”1.0.4″></div>
<div id=”ConnectiveDocSignExtentionInstalled” data-extension-version=”1.0.4″></div>

[Andy]

Add this to Additional CSS:

.shop-filter-wrap .shop-filter-toggle {
    display: none;
}

.shop-filter-wrap #shop-filters {
    display: table;
}

This will hide the dropdown toggle, and make the widget area visible at all times.

[Frederik Leemans]

Thank you! Exactly what I was looking for!
<div id=”ConnectiveDocSignExtentionInstalled” data-extension-version=”1.0.4″></div>
<div id=”ConnectiveDocSignExtentionInstalled” data-extension-version=”1.0.4″></div>

[Frederik Leemans]

Any tips on how to make the search box & dropdown box the same size/font/etc?
<div id=”ConnectiveDocSignExtentionInstalled” data-extension-version=”1.0.4″></div>
<div id=”ConnectiveDocSignExtentionInstalled” data-extension-version=”1.0.4″></div>

[Andy]

This should make the WooCommerce dropdown same size as search box:

#shop-filters {
    font-size: 100%;
}

.select2-container .select2-selection--single {
    height: auto;
    margin-top: 2px;
}

.select2-container--default .select2-selection--single {
    border-radius: 3px;
    border-width: 0;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: .718em 1em;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 10px;
}

[Andy]

Also, this will make the search box and button look better:

#shop-filters form {
    max-width: 100%;
}

#shop-filters button {
    padding: .718em 1em;
    line-height: 1.4;
    height: auto;
}

[Frederik Leemans]

Thanks for your help!

I did apply the second css snippet, but the first one doesn’t seem to improve things:

The ‘Select a category’ text is positioned lower than the actual dropdown itself, both on Chrome & Safari.

The second css does improve the look of the search, but the rendering is of the search box differs between Chrome & Safari:

On Safari, it is smaller than the search button. On Chrome, search box and button are the same size, but they don’t match the Category dropdown in size, or vertical alignement.

Cheers, F
<div id=”ConnectiveDocSignExtentionInstalled” data-extension-version=”1.0.4″></div>
<div id=”ConnectiveDocSignExtentionInstalled” data-extension-version=”1.0.4″></div>

[Andy]

Would you be able to add the first bit of CSS again, so I can take a look and work out a solution?

[Frederik Leemans]

We could if we can agree on a date/time when you’d be able to take a look? It’s really quite ugly, so I don’t want to keep it online for too long – and I haven’t got a staging site for now.

Alternatively, here’s a few screenshots of what this CSS produces:

On Safari:

On Chrome:

You can see the page live @ https://www.ruitersportjokari.be/shop

Let me know if the above seem sufficient, or if you’d still rather set a time slot.

Thanks,

Frederik
<div id=”ConnectiveDocSignExtentionInstalled” data-extension-version=”1.0.4″></div>
<div id=”ConnectiveDocSignExtentionInstalled” data-extension-version=”1.0.4″></div>

[Andy]

Hi Frederik,

Thanks for the screenshots, that really helped.

Could you please remove the previous CSS I gave you, and replace with this:

.shop-filter-wrap .shop-filter-toggle {
    display: none;
}

.shop-filter-wrap #shop-filters {
    display: table;
}

#shop-filters {
    font-size: 100%;
}

.select2-container .select2-selection--single {
    height: auto !important;
    margin-top: 2px !important;
}

.select2-container--default .select2-selection--single {
    border-radius: 2px !important;
    border-width: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: .618em 1em !important;
    line-height: 1.4 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 10px !important;
}

#shop-filters form {
    max-width: 100%;
}

#shop-filters input[type="search"] {
    border-width: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
}

#shop-filters button {
    padding: .618em 1em;
    line-height: 1.4;
    height: auto;
    -moz-appearance: none;
    -webkit-appearance: none;
}

This amended code should work now. If not, please let me know.

[Frederik Leemans]

Hi Andy,

Much better, thank you!

Only strange artefact left is that in Safari, the search button is below the search field, whereas on other browsers, it’s located to the right. Very strange 🙂

Cheers, Frederik
<div id=”ConnectiveDocSignExtentionInstalled” data-extension-version=”1.0.4″></div>
<div id=”ConnectiveDocSignExtentionInstalled” data-extension-version=”1.0.4″></div>

[Andy]

The search button to the right or below depends on how much available space there is for the text input and button to be able to display inline. When I view your site the button is below the text input on Firefox and Chrome.

You can give the text input a maximum width so there is enough available space to display the button to the right.

e.g.

#shop-filters input[type="search"] {
    max-width: 190px;
}

[Frederik Leemans]

Works like a charm!

Thanks,

Frederik
<div id=”ConnectiveDocSignExtentionInstalled” data-extension-version=”1.0.4″></div>
<div id=”ConnectiveDocSignExtentionInstalled” data-extension-version=”1.0.4″></div>

[Author]

Posts