Hi
TWO QUESTIONS—
- Is there any way to target or isolate the font size only on the MOBILE - PRODUCT GRID, every change affects the desktop as well.
- Is there a way to reduce the padding between the product grid and the page count below?
Hi @skymochi ,
I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!
Step 1: Go to Admin → Online store → Theme > Edit code:
Step 2: Search for the file base.css. And add this code snippet to the end of the file.
ul#product-grid {
margin-bottom: -40px !important;
}
In this step, I solved the question 2.
About question 1, Can you kindly share the details of your problem (screenshot/ record) with us? We will check it and suggest you a solution if possible.
Step 3: Save your code and reload this page.
=>> The result:
I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.
Have a nice day sir!
1 Like
Hi Thank you! that worked. For problem #1.
I’d like to change the font size on the PRICE on the MOBILE product card only without affecting the font size on desk-top or the product page.
Hi @skymochi ,
To change the font size on the PRICE on the MOBILE product card only without affecting the font size on desk-top or the product page, you can add this code snippet in the end of file base.css:
@media only screen and (max-width: 768px) {
span.price-item.price-item--regular {
font-size: 20px !important;
}
}
In this step, you can change font-size as you want and effect on only mobile view with @media only screen.
In my example, I choose “20px”
The result is:
I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.
Have a nice day sir!