Solved

Making Product Description font smaller for mobile view only

Morgans
Tourist
27 0 1

Hi

 

I was wondering how to make the text smaller in my product description, but only for the mobile view. 

Any other tips on making it smaller in general on mobile would be appreciated. 

 

https://morgansosw.myshopify.com/

Password is Jack if you wanted to have a look for me. 

 

Many thanks

 

Accepted Solution (1)

PageFly-Henry
Astronaut
957 273 216

This is an accepted solution.

Hi @Morgans 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

 

@media (max-width: 767px){

.product__description p, .rte li {

    font-size: 12px !important;

}}

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 2 (2)

PageFly-Henry
Astronaut
957 273 216

This is an accepted solution.

Hi @Morgans 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

 

@media (max-width: 767px){

.product__description p, .rte li {

    font-size: 12px !important;

}}

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Spac-es
Shopify Partner
327 98 111

You can change the text size to your liking, just increase the amount in px. The maximum width of the device screen to which the CSS style is applied is 767px, so this setting will only take effect on mobile devices.

 

Add this code in your theme.css or base.css (depending on your store theme it will have one name or another):

@media only screen and (max-width: 767px) {
  .product__description p {
    font-size: 14px;
  }
}