Custom Liquid - Some buttons are not display on Mobile View

Store Design
,
1

Hello guys, I created a custom liquid on my collection pages and it works perfectly on desktop view. But in mobile view, some buttons are missing. Please see screenshots below. Any help will do. Thanks

My collection page url : https://www.brinnova.com/collections/copper

remz1234_0-1720012785401.png
remz1234_0-1720012785401.png1587×825 226 KB

Desktop View

remz1234_1-1720012856948.png
remz1234_1-1720012856948.png657×462 168 KB

Mobile View - As you can see other buttons such as “Copper, Fiber & Power Cord” are not showing.

2

Hi @remz1234 ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1720013296499.png
BSSCommerceHDL_0-1720013296499.png594×778 50.2 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

3

@remz1234

Please add the following CSS cod to your assets/ecom-base.css bottom of the file.

@media (max-width: 768px) {
    .button-container {
        flex-wrap: wrap !important;
    }
}

Thanks!

4

Hi @remz1234

Check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
@media (max-width: 768px) {
    .button-container {
        flex-wrap: wrap !important;
    }
}
5

Hi @BSSCommerce-HDL if you notice on mobile view, the buttons are in horizontal scrolling and I want to figure out why other buttons such as "copper, fiber and power cord are not scrollable but the rest are scrollable.

6

Hi @vm-web if you notice on mobile view, the buttons are in horizontal scrolling and I want to figure out why other buttons such as "copper, fiber and power cord are not scrollable but the rest are scrollable.

7

Hi @Made4uo-Ribe if you notice on mobile view, the buttons are in horizontal scrolling and I want to figure out why other buttons such as "copper, fiber and power cord are not scrollable but the rest are scrollable.