How to align '3 products' text to the left on mobile view?

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-1708676328558.png

 

 

Replies 3 (3)

PageFly-Henry
Astronaut
962 275 219

Hi @MT27 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save


@media (max-width: 767px){

menu-drawer.mobile-facets__wrapper.medium-hide.large-up-hide {

    display: none;

}

h2.product-count__text.text-body {

    text-align: left !important;

margin-left: 50px !important

}}

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

techlyser_web
Shopify Partner
1423 268 282

Hello @MT27 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>
@media only screen and (max-width:767px){
  .product-count {
    align-self: flex-start !important;
    position: relative;
    text-align: right !important;
    width: 40% !important;
 }
}
</style>

techlyser_web_0-1708678166479.png

 

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

Dan-From-Ryviu
Shopify Partner
7532 1454 1451

Hi @MT27 

I'm Dan from Ryviu: Product Reviews & QA

 

You can do that by adding this code to theme.liquid file, after <head> in Online Store > Themes > Edit code 

<style>
@media (max-width: 989px){
.facets-container {
justify-content: start !important;
column-gap: 0rem !important;
margin-left: 0 !important;
}
}
</style>

Screenshot 2024-02-23 at 16.00.18.png

Best Regards,

Dan from Ryviu

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now