• Priority: 0
  • Status: Waiting on customer
  • Theme: Alysum
  • Assigned To: Fred
  • Private: No
  • Open Date: 15.01.23, 10:07
  • Opened by: Alex

Ticket #24152 - mobile version

Hello
There are several questions about the mobile version
1. On your preview, “buy grade” and “order grade” are on the same line - we are shifted by two. How can we make it also in one line on mobile? (screen 1)
2. When you click on the filter button on mobile, we do not have arrows on the right and it is always expanded. We need it to open “folded” and have arrows to expand it. How can we do it? (screen 2 - your template, screen 3 = how we want to do it)
3. The buttons on the product are in the middle of the product. How can we make them down? All versions - desktop, mobile and tablet (screen 4)

Attachments:

1.png (97.2 KiB)
2.png (116.4 KiB)
3.jpg (124.9 KiB)
4.png (39.1 KiB)

Comments

Fred 15 Jan 2023, 20:27

1. Try following CSS

@media(max-width:1024px) {
    #js-product-list-top {
        display:block
    }
    .pk-filter-button {
        width:100%;
    }
    #js-product-list-top > .sort-by-row,
    #js-product-list-top > .products-sort-order {
        display:inline-block !important;
        width:48%;
        margin:0
    }
    #js-product-list-top > .sort-by-row > div,
    #js-product-list-top > .products-sort-order > div {
        margin:0 10px 0
    }
}

2. Yes, there are no arrows. Need some time to implement this feature there
3. Try this

.product-miniature .product-actions {
    top:90%
}