hi can you help me align the text that says ‘‘3 products’’ to the left for the mobile version only
thank you
Pass: biangu
Topic summary
A user seeks help aligning the “3 products” text to the left on mobile devices only for their Shopify store.
Initial Response:
- One commenter provided CSS code targeting the product grid items, but this wasn’t the correct solution as it affected the products themselves rather than the product count text.
Working Solution:
Another contributor provided step-by-step instructions:
- Navigate to Admin → Online Store → Themes → Edit Code
- Add specific CSS code to the end of the base.css file
- The code targets
.product-countelements with media queries for screens up to 750px width - Uses flexbox properties (
display: flex,justify-content: flex-start,margin-left: 100px) to achieve left alignment
Screenshots were included showing the expected result and the location within the Shopify admin panel where the code should be added. The solution specifically addresses mobile-only styling through media queries.
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
i want the text to move not the products
Hi @MT27 ,
Result:
To get the above result, you can follow the following steps:
Step 1: Go to admin → select Online store → Themes → Edit code
Step 2: Add the following code at the end of the base.css file
@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