Making product heading and description smaller on mobile view only - DAWN

[jameschef86]

Hello,

I would like to decrease the size of the product heading and description on mobile view only for all my products. It is really large and I have tried copy pasting code to the base.css and theme files with no luck.

www.hudsonmealco.com  is my website - Thanks for any help!

This is a picture of the text on mobile view currently and its much too large:

[Moeed]

Hey @jameschef86 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
.product__title h1 {
    font-size: 25px !important;
}
.product__description.rte.quick-add-hidden {
    font-size: 20px !important;
}
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[niraj_patel]

Hello @jameschef86 

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 </body> on theme.liquid
<style>
@media screen and (max-width: 767px) {
 .product__title h1 {
      font-size: 24px !important;
 }
.product__info-container .product__description{
    font-size: 21px !important;
  }
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.