How do i make custom liquid font bigger

nijntjelover · ‎07-30-2024

how to make this liquid font bigger on product page on mobile? the letters are too small

https://b990d6-3.myshopify.com/products/yves-saint-laurent-libre-absolu-platine-eau-de-parfum-90ml

beauxbreaux · ‎07-30-2024

You didn't specify any specific text you wanted to change so I will just assume the smallest text on the page.

You can either throw this in your <head> section of your code:

<style>
@media only screen and (max-width: 600px) {
    .product__description .classification p span font[style="vertical-align: inherit;"] {
        font-size: 16px;
    }
}
</style>

Or you can place this code in your base.css at the bottom:

@media only screen and (max-width: 600px) {
    .product__description .classification p span font[style="vertical-align: inherit;"] {
        font-size: 16px;
    }
}

Beaux Barker
Developer
Buy me a Coffee ☕

vinh0225 · ‎07-30-2024

Hi @nijntjelover

I think you want to update the font-size of this part:

If this is what you want, please follow these steps:

1. Go to Online Store -> Select a Theme -> Edit code
2. Open assets/section-main-product.css.
Add this code:

.usp-list {
	font-size: 1.3rem;

	@media (min-width: 750px) {
		font-size: 1.6rem;
	}
}

If you have any difficulty, please let me know.

Was my response useful?  Click Like to let me know!
Was your query resolved? ✓ Mark it as a Resolved Solution
If you need custom Shopify changes, ⚒️you can hire me.
Contact me at ✉️ jalicorich@gmail.com.

PageFly-Richard · ‎07-30-2024

Hi @nijntjelover

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
@media (max-width: 767px) {
.usp-list {
    font-size: 20px;
}

}
</style>

Hope this can help you solve the issue

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)

All features are available from Free plan. Live Chat Support is available 24/7.

How do i make custom liquid font bigger

How do i make custom liquid font bigger

Community Blog Articles