Focal theme - How do I make the body text font size smaller than the limit?

Store Design
, ,
1

The limit on theme settings is 12px and I would like to make it 10 or 11px. Everything else on the site is already changed to smaller size through code. Earlier I was able to make this change by applying this code to the bottom of theme.ccs:

body {
font: 10 !important;
}

But now it has suddenly stopped working and is back to the theme settings minimum 12px.

2

Hey @galleriste

Replace your code with this code.

body {
    font-size: 10px !important;
}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hello @galleriste

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

body { font-size: 10px !important; }

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

4

Thanks!

1 Like
5

Seems like some of the other codes in the bottom of my theme.css stopped working too. Can you help me with these.

This is to remove padding of the product picture on product page.

@media screen and (max-width: 999px){
.product__media-item {
padding-top: 0px !important;
}

This is to change things on featured collections.

.product-item__info
.product-item-meta {
display: block;
margin-top: -1px !important;
margin-bottom: -5px !important;
margin-right: 0px !important;
margin-left: 0px !important;
text-align: center !important;
}

And this is to disable the search tap area.

a.header__icon-wrapper.tap-area.hidden-pocket.hidden-lap, a.header__icon-wrapper.tap-area.hidden-desk {
display: none !important;
}

6

would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

7

https://568839.myshopify.com/

I removed the password

8

Please elaborate what changes you want in product page, feature collection and search tap
because when i inspect the product page there is no padding on product top image and not able to find the search tab

9

All changes are for the mobile view. search is invisible but next to the menu icon.

10

On the product page there is a padding on top of the product image which I would like to make smaller and on featured collections I would like to decrease the margin on top of the product title and under the price.

11

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px){ .product--thumbnails-bottom { margin-top: 0 !important; } .product-item__image-wrapper{ margin-bottom: 0 !important; } }

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

1 Like
12

I was able to make it work thanks. Any idea how I can remove the search tap area?