I want to have a block (contains a image and some text, nothing overly fancy) appear on the top of the products in a category page when it is on desktop, then on mobile I want it to be on the bottom of the products in the category page. I have figured out that how to put the block on the top with this XML:
<referenceContainer name="category.product.list.additional"> <block class="Magento\Cms\Block\Block" name="cat_arista"> <arguments> <argument name="block_id" xsi:type="string">cat_arista</argument> </arguments> </block> </referenceContainer>
But how would I adjust this to show up on the bottom for mobile? I was thinking another layout update call, but I'm not sure if that will lead to it showing up twice. I am using Magento 2, and the pearl theme.
I don't know what container would be the bottom the of the product list. I am using this list from github, but I'm not sure which one to use.
I also don't think that I can do any css magic because it still will show up in both places?
The container for the bottom of the product list is
content.bottom . I'll post my css magic as an answer if I figure it out!