Changing size of collection description on mobile

[radaApeta]

Hello,

can someone help with resizing text under every collection on mobile version? I want the text to be smaller so it can fit a better. I am sending photo as a example. Thank you very much 🙂

https://www.pickupstore.cz/password

0007

[Tech_Coding]

Hello @radaApeta 

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) {
  .collection-hero__description.rte p {
      font-size: 12px !important;
  }
}
</style>

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

[BSSCommerce-B2B · Accepted solution]

@radaApeta,

Step 1: Go to Admin -> Online store -> Theme > Edit code

Step 2: Search for the file theme.liquid

Step 3: Add this code before </body> tag

<style>
@media screen and (max-width: 768px) {
  .collection-hero__description {
     max-width: 100%!important;
  }
  .collection-hero__description * {
      font-size: 1.4rem!important;
  }
}
</style>

Result:

If it helps you, please like and mark it as the solution.

Best Regards 😊

[Made4uo-Ribe]

Hi @radaApeta 

Check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (max-width: 749px){
.collection-hero__text-wrapper .collection-hero__description {
    max-width: 100%;
}
.collection-hero__text-wrapper .collection-hero__description p {
   font-size: 12px;
}
}

And Save. 

Result:

Note: the font size i use in this is same on the desktop size. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[ZestardTech]

Hi @radaApeta 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

@media screen and (max-width: 768px) {
.collection-hero__description {
max-width: 100%!important;
}
.collection-hero__description * {
font-size: 1.4rem!important;
}
}