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

Store Design
, ,

Topic summary

A user needs help aligning the “3 products” text to the left specifically on mobile view for their Shopify store (matibrnd.com).

Three solutions were provided:

  1. PageFly-Henry’s approach:

    • Edit base.css file
    • Add CSS targeting .product-count__text.text-body.h2 with left alignment and 50px left margin
    • Uses @media (max-width: 767px) for mobile-only styling

  2. niraj_patel’s method:

    • Insert CSS in theme.liquid before </body> tag
    • Targets .product-count with flexbox alignment and positioning adjustments
    • Also uses 767px breakpoint for mobile devices

  3. Dan-From-Ryviu’s solution:

    • Add code to theme.liquid after <head> tag
    • Similar mobile-specific CSS approach

All solutions involve adding custom CSS with media queries to achieve left alignment on mobile screens only. The discussion remains open as the original poster hasn’t confirmed which solution worked.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
1

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
MT27_0-1708676328558.png400×198 31.4 KB

2

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

3

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 on theme.liquid

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

techlyser_web_0-1708678166479.png
techlyser_web_0-1708678166479.png161×272 32.3 KB

4

Hi @MT27

I’m Dan from Ryviu: Product Reviews & QA

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

Screenshot 2024-02-23 at 16.00.18.png
Screenshot 2024-02-23 at 16.00.18.png401×482 52.7 KB

Best Regards,

Dan from Ryviu