How to use Media Query in product description debut theme

Highlighted
New Member
3 0 0

I have a table in my product description. when I open it on desktop the table looks fine but on mobile the font size is too large and the values dont fit in the cells. So i want to have smaller font sizes for mobile. I'm thinking media query is the way to go but Im not sure how to implement it.

 

I know it goes 

@media only screen and (min-width: 768px) {

...

but im not sure where to put this into and what syntax I should be using.

 

Not sure but this div seems relevant

<div class="product-single__description rte">
{{ product.description }}
</div>

 

0 Likes
Highlighted
Shopify Expert
1355 111 181

hi,

 

this for mobile version

@media only screen and (max-width: 768px) {

...

this for dektop version

@media only screen and (min-width: 769px) {

...

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Shopify Expert Page: https://experts.shopify.com/perennialsolution
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
New Member
3 0 0

Thanks,

yes i see i mixed up the min and max but Im still confused as to what I should put put in place of

{

...

}

 

how do I edit the product description font size say i want to change it from 16 in desktop to 12 in mobile

0 Likes
Highlighted
New Member
3 0 0
        <div class="product-single__description">
          {{ product.description }}
          <style>
          {@media only screen and (max-width: 768px) {
            .product-single__description{font-size:10px}
             }}
            <\style>
         
        </div>
 
this kind of fixed the issue since the values fit in the cell but now my data table goes off the screen in mobile
0 Likes