Font size

Shopify Discussion
1

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

hritikakhattar_0-1725526963246.png
hritikakhattar_0-1725526963246.png1280×697 410 KB

Store: https://boutu.in/

1 Like
2

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 tag:

Here is result:

BSSCommerceHDL_0-1725527462187.png
BSSCommerceHDL_0-1725527462187.png1768×585 82.6 KB

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 :heart_eyes:

1 Like
3

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 on theme.liquid

@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; } }

Tech_Coding_0-1725527907381.png
Tech_Coding_0-1725527907381.png319×283 43.3 KB

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

4 
@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.

5

Thank you! It worked

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

6

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 on theme.liquid

@media only screen and (max-width: 767px) { .collection__title.title-wrapper { text-align: center !important; } }

Tech_Coding_0-1725530737858.png
Tech_Coding_0-1725530737858.png319×160 6.22 KB

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

7

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