DAWN THEME — ISOLATING MOBILE PRODUCT GRID, PRICE INFO — FONT SIZE

[skymochi]

Hi 

TWO QUESTIONS—

1. Is there any way to target or isolate the font size only on the MOBILE - PRODUCT GRID, every change affects the desktop as well.
2. Is there a way to reduce the padding between the product grid and the page count below?

[BSSCommerce-B2B]

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! 

[skymochi]

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. 

koredoko.com

[BSSCommerce-B2B]

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!