Font size

[hritikakhattar]

Hi,
If someone can help me how to reduce the font size of headings and description for the featured collection and also with the alignment, that would be great. 

The font size looks fine on desktop but on mobile its too big and its two lines instead of one.

Attaching a screenshot for reference

Store: https://boutu.in/

[BSSCommerce-HDL · Accepted solution]

Hi @hritikakhattar, 

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media only screen and (max-width: 767px) {
    h2.title.inline-richtext {
       font-size: 16px !important;
    }
    
    .collection__description {
       font-size: 14px !important;
    }
 }
</style>

 Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @hritikakhattar, 

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media only screen and (max-width: 767px) {
    h2.title.inline-richtext {
       font-size: 16px !important;
    }
    
    .collection__description {
       font-size: 14px !important;
    }
 }
</style>

 Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[hritikakhattar]

Thank you! It worked

Could you let me know how to align it as well? 
I want to do center alignment?

[Tech_Coding · Accepted solution]

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 only screen and (max-width: 767px) {
   .collection__title.title-wrapper {
        text-align: center !important;
     }
}
</style>

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

[Tech_Coding]

Hello @hritikakhattar 

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 only screen and (max-width: 767px) {
      h2.title.inline-richtext.h2.scroll-trigger.animate--slide-in {
          font-size: 12px !important;
     }
     .collection__description.body.rte.scroll-trigger.animate--slide-in {
          font-size: 14px !important;
       }
}
</style>

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

[DanCodes]

@media (max-width: 991px) {
.collection__title.title-wrapper {
text-align: center;
}

.collection__title .title {
font-size: 18px; 
}
}

Hi, 

Go to Online Store -> Edit code -> Open the assets folder -> Open the base.css file -> Add the following styles.

[quickshipsteve]

I would do it,  however my friend is a big coder xcoder,   programmer developer,  I don't want to mess anything up,  very interesting.