Move “default sorting” in Mobile

Hey there,

Can you please share a link to your site? We can then check the HTML output and generate custom CSS code to help fix that on mobile.

Thanks!

Thanks for the quick respond, please refer to here. Thank You

Hi @xav8888,

Thanks for getting back.

Looking at your site, I see that you’ve been able to move the “default sorting” section to the line below “showing 1-9 of 25 results”.

Link to image: https://snipboard.io/u54xrQ.jpg

Let us know if you still require assistance.
Thanks.

Hi abwaita, thanks for the respond, any css can i move the “default sorting” in to the next line in all type of mobile devices regardless the size of the device? as i still getting the same result

Hey @xav8888,

Custom CSS is not something we typically can help with and you would need to speak with the authors of the theme you’re using or find a web developer.

However, to help you along I’ve written the following CSS:

/* Force ordering select input to new line on mobile */
@media( max-width: 544px ) {
  .woocommerce-ordering {
    float: none;
    clear: left;
  }
}

This will force the ordering field onto a new line for screens that are narrower than 545px so you shouldn’t have a problem with it being pushed right up against the number of results.

If you’re not sure how to add custom CSS to your site, you can find how to do so in this article.

If you need it adjusted any further or need any other changes I would recommend you reach out to one of our vetted developers via the WooCommerce Customizations Page.

I hope that helps!

Kind regards,

wow! it works like a charm! brilliant! thanks for the help Martyn J. a11n…. have a nice day

Glad to hear it worked for you @xav8888! Marking this ticket as resolved.