Make product title on mobile version smaller

Store Design
, , , ,
1

Hi, i would like to make the product title on the mobile version smaller to about 2rem. How do i do this?

My website is: https://vinup.nl/en/products/vinyl-record-rack

Many thanks

2

Hello @VinUp
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

.product__title h1 {
font-size: 2rem !important;
}

result

21.png
21.png327×520 66.4 KB

If this was helpful, hit the like button and accept the solution.
Thanks

3

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution

4

Hi thanks, how do i make it for the mobile version only?

5

Hi there @VinUp

I suggest you follow these steps:

Go to Online Store → Themes → Actions → Edit code.

Go Assets folder → theme.liquid file.

Add the following code in the bottom of the file above tag

<style>
@media only screen and (max-width: 747px){
.product-grid .card__heading {
    font-size: 12px;
}
.product-grid .quick-add__submit {
    font-size: 10px;
}
#MainContent .product__title h1 {
    font-size: 18px!important;
}
}
</style>

Let me know if this works for you!

6

add this code in base.css

@media screen and (max-width: 968px) {
.product__title h1 {
font-size: 2rem !important;
}
}
7

Do you know how to make the discounted price smaller?

VinUp_0-1741774295867.png
VinUp_0-1741774295867.png308×393 52 KB

8

Hello @VinUp ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
@media only screen and (max-width: 747px) {
    #MainContent .product__title h1 {
        font-size: 2rem !important;
    }
}

ZestardTech_0-1741774498420.png
ZestardTech_0-1741774498420.png323×748 70.7 KB

Let me know if you need further assistance!