How to remove the bottom toolbar using css in mobile view?

Question

In product listing page there are two toolbars one at the top of list as shown below: another toolbar at bottom of list as shown below:

Both of them are has outer div as: <div class="toolbar toolbar-products">

I need to hide the lower one when in mobile devices. For that I'm planning to write css which hides the lower one. I need to add a class to any one of the div so that those two can be distinguished and apply different css for those two. How may I accomplish this?

Answer 1

I don't like Vikas' method as if the element order is changed or .products is removed from the element you lose your styling.

A cleaner method:

Copy vendor/magento/module-catalog/view/frontend/templates/product/list.phtml into your theme.

On line 119 wrap <?php echo $block->getToolbarHtml() ?> in your own div like this:

<div class="bottom-toolbar">
    <?php echo $block->getToolbarHtml() ?>
</div>

And then you can write your CSS targeting that class.

.bottom-toolbar {
    display: none;
}

Even cleaner method

If you want to fully remove it just delete line 119 (<?php echo $block->getToolbarHtml() ?>).

Answer 2

You can use below code in css.

.products + .toolbar.toolbar-products { display: none; }