Solved

How can I align '3 products' text to the left on mobile version?

MT27
Pathfinder
145 6 10

hi can you help me align the text that says ''3 products'' to the left for the mobile version only

thank you 

URL: https://matibrnd.com/

Pass: biangu

https://matibrnd.com/collections/hoodies

MT27_0-1708537588650.png

 

Accepted Solution (1)

BSS-Commerce
Shopify Expert
3465 460 515

This is an accepted solution.

Hi @MT27 ,

Result:

view - 2024-02-26T094013.417.png

To get the above result, you can follow the following steps:

Step 1:  Go to admin -> select Online store -> Themes -> Edit code

view - 2024-02-26T094210.346.png

Step 2: Add the following code at the end of the base.css file

view - 2024-02-26T094225.535.png

@media only screen and (max-width: 750px) {
    .facets-container {
        display: flex;
        flex-direction: column;
    }

    .product-count.light.medium-hide.large-up-hide {
        width: 100%;
        display: flex;
        margin-left: 100px;
        justify-content: flex-start;
    }
}

Hope it helps @MT27  

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 3 (3)

pooja_d_92
Shopify Partner
132 16 18

Hey @MT27 

I hope you are well and safe!!

Please use this code in base.css file
@media screen and (max-width: 749px) {
.collection ul#product-grid li.grid__item {
width: 32%;
}
}

 

Thanks

Pooja Devi
MT27
Pathfinder
145 6 10

i want the text to move not the products

BSS-Commerce
Shopify Expert
3465 460 515

This is an accepted solution.

Hi @MT27 ,

Result:

view - 2024-02-26T094013.417.png

To get the above result, you can follow the following steps:

Step 1:  Go to admin -> select Online store -> Themes -> Edit code

view - 2024-02-26T094210.346.png

Step 2: Add the following code at the end of the base.css file

view - 2024-02-26T094225.535.png

@media only screen and (max-width: 750px) {
    .facets-container {
        display: flex;
        flex-direction: column;
    }

    .product-count.light.medium-hide.large-up-hide {
        width: 100%;
        display: flex;
        margin-left: 100px;
        justify-content: flex-start;
    }
}

Hope it helps @MT27  

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development