Mobile view is not correct

Hi @rajat-dutt

This can be fixed with some custom CSS. Under Customize > Additional CSS, you can add the following code:
?

/* change the product 2column on mobile view */
@media screen and (max-width:480px){
ul.products li.product {
    width: 47% !important;
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
}
ul.products li.product:nth-child(2n+2){
    margin-right:0px !important;
}
}

?
If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

Wow its worked like a Pro!!!

You are awesome man thanks alot for this code and I am 100% sure it will be helpful for many others.

Judt one quick ask:

The page no. are coming two times. At bottom of the page and at the starting of the page. Can i make it to bottom of the page only?

or based on your experience it is better to keep it on two sides?

https://snipboard.io/Re7mCJ.jpg

• This reply was modified 1 year, 6 months ago by dutt.

Hi @rajat-dutt ,

The page no. are coming two times. At bottom of the page and at the starting of the page. Can i make it to bottom of the page only?

or based on your experience it is better to keep it on two sides?

This would be based entirely on the preferences you have for your site ??

If you would like to hide the top pagination from being displayed, you can try adding the following CSS to Appearance → Customize → Additional CSS:

#main .storefront-sorting:nth-child(2) .woocommerce-pagination {
  display: none;
}

Hope this helps!

it does nt work

Hi @rajat-dutt ,

Hmm, let’s try a different approach!

I have tested the below custom code on my test site which uses the latest version of WordPress and WooCommerce and has the Storefront theme active, and it is working as expected. Here are my results:?

Can you try adding the following code snippet and see if this does the trick:

add_action('init', 'remove_storefront_pagination');
function remove_storefront_pagination() {
    remove_action('woocommerce_before_shop_loop', 'storefront_woocommerce_pagination', 30);
}

I’d strongly suggest using a plugin that allows custom functions to be added to your site, such as the free?Code Snippets?plugin, rather than adding any code directly to your functions.php file.

Cheers!

Thanks alot it worked you are rockstar!!!

Hi @rajat-dutt ,

You are very welcome, happy to help!

I’d like to add that the Storefront Powerpack extension gives you the ability to customize and style nearly every aspect of the Storefront theme without ever touching any code. It may be worth checking out ??

WooCommerce.com offers a 30-day refund policy which you can take advantage of, allowing you to test the extension, and see if it suits the needs of your site.

On the other hand, since no further support is required on this thread, feel free to create a new topic should you need any further help.

Also, if you have a minute, we’d love it if you could leave us a review:?

https://www.ads-software.com/support/theme/storefront/reviews/

Cheers!