Hi Ivan,

Hmm, I don't know if this is possible or not but I will try to check if that is possible with a CSS change.

Please share your WordPress credentials, because I need to login to your site and test this live.

To include your credentials click the Insert Credentials button in the editor toolbar (see how) so your reply will be private.

Thanks!

Hi Ivan,

Please add the code below to your Custom CSS area:

@media screen and (max-width: 769px) {
    .woocommerce .products-archive--has-sidebar.products-archive--sidebar-left .products-archive--products {
        order: 2;
    }
}

Have a nice day!

Hi Ivan,

Can you please try to be very specific about the question and explain it more to me so I can easily understand you and give you the proper answer.

If you record a video of the problem that would be a huge help.

Thanks!

Hi Ivan,

This is a customization question and support doesn't offer customization services as we wrote on our support homepage and on this area.

I will help you to decrease their padding (reduce row height).

Please add the code below to your Custom CSS area:

@media screen and (max-width: 991px) {
    .yith-woocommerce-ajax-product-filter li {
        padding: 10px 0 !important;
    }
    .yith-woocommerce-ajax-product-filter {
        margin-bottom: 0px;
    }
    .products-archive--has-sidebar {
        margin-top: 0px !important;
    }
}

Hi Ivan,

Please just add this CSS code to your Custom CSS area:

@media screen and (max-width: 991px) {
    .oxygen-top-menu>.wrapper>.main-menu-top {
        margin-bottom: 10px;
    }
    
    .oxygen-top-menu>.wrapper>.main {
        padding-top: 10px;
    }
    .sidebar ul li a {
        font-size: 12px;
    }
}

* if any of the codes doesn't work, then add the !important rule.

Have a nice day!

Hi Ivan,

I would not recommend you to remove the spaces between items and also to make fonts much smaller because that will create a more ugly design and Google also has some standards such as how much space should be and font sizes for mobile devices so users will not have difficulties to press the text in touch devices.

Anyway if you prefer to decrease the space from that dropdown you can add this CSS code to your Custom CSS area:

.woocommerce-ordering--dropdown.form-group.sort {
    margin-bottom: 5px;
}

As for your last question, here is the CSS code:

.woocommerce .products .type-product .product-description .woocommerce-loop-product__title {
    margin: 0;
    font-size: 15px;
}

Have a nice day!

Hi Ivan,

Your questions are customization questions and support doesn't offer customization services as we wrote on our support homepage and on this area.

Please see this video how you can find the selector to make changes: https://d.pr/v/dtrfdc

Thanks for your understanding.

P.S: If you're looking for professional help in this matter, there's always someone available for such tasks on Codeable or WP Kraken website. Pricing and timeline are always straightforward there and that's the main reason for recommending those services.

Happy to hear that

Will mark this ticket as solved from here.