Is it possible to make the product page headers as bold on the mobile version?

[sofiakarkus]

Is it possible to make the product page headers as bold on the mobile version as they are on the desktop version and also a bit bigger? Otherwise, there’s just too much text.

[topnewyork]

Hi @sofiakarkus , 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<stlye>
@media screen and (max-width: 767px) {
    .product__accordion__title {
        font-weight: bold !important;
    }
}
</style>

OR 

<style>
@media screen and (min-width: 768px) {
    .product__title {
        font-size: 35px !important;
        font-weight: bolder !important;
    }
}
</style>

If this is what you meant then kindly hit the like and mark it as an accepted solution otherwise kindly show me what you want bold in mobile. Thanks!

[sofiakarkus]

Hi! Thank you for your reply. I tried both codes, but unfortunately, neither of them worked the same way as in your screenshot. What could I be doing wrong?

[topnewyork]

@sofiakarkus , kindly share the screenshots of the code please. Thanks!

[Moeed]

Hey @sofiakarkus 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
.product__title {
    font-size: 40px !important;
    font-weight: bolder !important;
}
}
</style>

RESULT:

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

Best Regards,
Moeed

[sofiakarkus]

Hi, thank you for your reply. I tried, but unfortunately, nothing changes when I follow the instructions and change the code. What could I be doing wrong?

[Moeed]

Hey @sofiakarkus 

Can you share a screenshot of the code you added?

Best Regards,

Moeed

[Sangeetanahar]

hello @sofiakarkus 

Go to online store ----> themes ----> actions ----> edit code ---->assets....>theme.css>
search this code

.product__title {
    font-size: calc(2rem* var(--adjust-heading));
    margin-bottom: 0;
  
}

replace with this code

.product__title {
    /* font-size: calc(2rem* var(--adjust-heading)); */
    margin-bottom: 0;
    font-size: 30px !important;
}

result

Buy me a Pizza

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

[sofiakarkus]

Hi, thank you for your reply. I tried using this code, but unfortunately, it doesn't offer a solution. I want to make the dropdown menu bold, as it is in the desktop version. Is there any way to do this?

[Sangeetanahar]

hello @sofiakarkus 

Go to online store ----> themes ----> actions ----> edit code ---->assets....>theme.css>

add this code at the bottom of the file

.mobile-menu__item a.mobile-navlink {
    font-weight: bold;
}

Buy me a Pizza

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