Changing size of collection description on mobile

Solved

Changing size of collection description on mobile

radaApeta
Explorer
55 0 19

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 🙂

 

 

 

 

unnamed (17).jpg

 

https://www.pickupstore.cz/password

0007

 

valenta14
Accepted Solution (1)

BSSCommerce-B2B
Shopify Partner
1790 548 608

This is an 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:

BSSCommerceB2B_0-1727862895309.png

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

Best Regards 😊

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

View solution in original post

Replies 4 (4)

Tech_Coding
Shopify Partner
337 93 84

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>

Tech_Coding_0-1727862167963.png

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

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.

BSSCommerce-B2B
Shopify Partner
1790 548 608

This is an 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:

BSSCommerceB2B_0-1727862895309.png

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

Best Regards 😊

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

Made4uo-Ribe
Shopify Partner
8446 2018 2478

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:

Made4uoRibe_0-1727864121466.png

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

ZestardTech
Shopify Partner
5776 1052 1392

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;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing