How to change Product Title Text Size on mobile view only

Site URL: https://www.wedoaesthetic.com/

Hello,  I need to change the Product Title Text Size - only on mobile view and make it smaller ( and the price a bit bigger). Can you help me? I tried already this code on custom CSS but I can't find a way to apply the change to the Product Title. 

This is my website

https://www.wedoaesthetic.com/

this code that i tried but something is off and it's not working

@media only screen and (max-width: 640px) {
/* Start Insert Code for Mobile*/

/* Product Block Titles */
.product-block .productDetails .product-title {
  font-size: 0.5rem;
}
  #productList .product .product-title {
    font-size: 0.5px !important;
}}

Hope someone will help me,

thank you!

Here is my testing result

YES! It works! Thank you so much for saving the day!

Hello @bangank36

I tried to use your solution but I'm not getting the results I need. Would you be willing to help me out? I am trying to make the font smaller in the mobile view of this page. I tried your solution but after it not working, I tried this:

@media only screen and (max-width: 640px) 
{.ProductList-item-link {font-size: 0.8rem!important}}

and I'm still not getting what I want. Here is the page - https://www.redhotmetal.net/diamond-shears

Thank you very much in advance!

On 6/25/2022 at 4:02 AM, KMoreno said:

Hello @bangank36

I tried to use your solution but I'm not getting the results I need. Would you be willing to help me out? I am trying to make the font smaller in the mobile view of this page. I tried your solution but after it not working, I tried this:

@media only screen and (max-width: 640px) 
{.ProductList-item-link {font-size: 0.8rem!important}}

and I'm still not getting what I want. Here is the page - https://www.redhotmetal.net/diamond-shears

Thank you very much in advance!

Use this code

@media screen and (max-width:640px) {
h1.ProductList-title {
    font-size: 18px !important;
}
}

@tuanphan 

THANK YOU SO MUCH! That worked. Where do you see the class .ProductList-title ?

I looked in the inspect tool but I still can't find it.

Again - thank you!

@tuanphan for example what I see is in the image below. I don't see 

.ProductList-title

but surely that is the class that works. I keep seeing this class ...

.ProductList-item-link

On 6/29/2022 at 2:46 AM, KMoreno said:

@tuanphan for example what I see is in the image below. I don't see 

.ProductList-title

but surely that is the class that works. I keep seeing this class ...

 

.ProductList-item-link

It is here

Hi there, 

I'm having a similar issue with this, but my site already has custom css in place to split the Product Title into two lines. On desktop view, the fonts are exactly how I want it. But when it goes into mobile view, the first line of the Product title is so so tiny. I'll provide a screenshot of both desktop/mobile view to show the comparison.

site is: https://www.carmelart95years.com/inventory

password is: carmelart

Do you have a code to fix this? 

Thanks!
Grace

2 hours ago, graciewo said:

Hi there, 

I'm having a similar issue with this, but my site already has custom css in place to split the Product Title into two lines. On desktop view, the fonts are exactly how I want it. But when it goes into mobile view, the first line of the Product title is so so tiny. I'll provide a screenshot of both desktop/mobile view to show the comparison.

site is: https://www.carmelart95years.com/inventory

password is: carmelart

Do you have a code to fix this? 

Thanks!
Grace

I check that you are breaking your word so they has the <br> so we can not target and style it

Can you remove the breaking line?

Hi, 

Thank so much for your response! 

If I remove the breaking line, would my product line just be one line on all platforms (mobile and desktop?)

It is important that the artist name is differentiated from the title of the piece. 

Thanks again, 

Grace

On 7/23/2022 at 11:55 PM, graciewo said:

I'm having a similar issue with this, but my site already has custom css in place to split the Product Title into two lines. On desktop view, the fonts are exactly how I want it. But when it goes into mobile view, the first line of the Product title is so so tiny.

Hi Grace

Did you add the CSS from the guide you've used? It sets the size of that first line of the product title.

/* Product Title: larger first line on product detail page */ 
.ProductItem .ProductItem-details h1.ProductItem-details-title:first-line, .products.collection-content-wrapper .grid-main-meta .grid-title:first-line { 
  font-size: calc(2.16vw + 1rem); 
}

Hi @paul2009

I did use the code from your guide – thanks again for that! However I'm wondering if I can change the font size in mobile view. For some reason, the first line of the product title appears tiny. Any ideas? 

I appreciate your time and consideration!

Grace

The calculation in the CSS should adapt if for all devices but yes you could manually set a certain size for mobile devices by using a media query. For example:

@media screen and (max-width:767px) {
  .ProductItem .ProductItem-details h1.ProductItem-details-title:first-line, .products.collection-content-wrapper .grid-main-meta .grid-title:first-line {
  font-size: 30px; 
  }
}

Hi @paul2009

This worked perfectly! Thank you, thank you! 🙂

Grace

Hi, I'm wondering if anyone can help please? I used the code above to change the font size in mobile view for my shop, but would love to centre the Product title and price too.

Site is emmabondillustration.com

pass is ForestPark009

Many thanks!

16 hours ago, EmmaBIllustration said:

Hi, I'm wondering if anyone can help please? I used the code above to change the font size in mobile view for my shop, but would love to centre the Product title and price too.

Site is emmabondillustration.com

pass is ForestPark009

Many thanks!

Add to Design > Custom CSS

/* Center title price */
@media screen and (max-width:767px) {
.products.collection-content-wrapper .grid-item * {
    text-align: center;
}
}

That worked perfectly, thank you so much. I'm having one other issue.

On my home page I have a summary block featuring 3 products. Is there any way to fix this so it is full width on all desktop / tablet screens and not defined by column width only? On larger screens, there's a big gap to the right of the third image.

Thanks in advance, Emma

On 9/14/2022 at 4:25 PM, EmmaBIllustration said:

That worked perfectly, thank you so much. I'm having one other issue.

On my home page I have a summary block featuring 3 products. Is there any way to fix this so it is full width on all desktop / tablet screens and not defined by column width only? On larger screens, there's a big gap to the right of the third image.

 

Thanks in advance, Emma

Hi. You mean this?