Font size in store?

Hi,

How do I change these title sizes in mobile view only?

For some reason (h4?) is larger in mobile. I want them the same size as the copy.

https://www.mattportch.com/lost-america-prints/p/the-wall-frame

Try CSS like this

@media screen and (max-width:767px) {
	.ProductItem .ProductItem-additional h4 {
    font-size: 18px !important;
}
}

Thank you!

@tuanphan I have a similar question that I am really hoping you can help with! I have a gallery at the top of my homepage that has image titles overlayed (text on the first image says "Empathetic Design" for reference). The image titles are a custom font (H2). Do you know a way to get the image titles to display at a larger scale on mobile. I'm currently using the following custom css for H2:

H2 {
    font-family: 'Mackay Extra-Bold' !important;
    font-weight: extra-bold !important;
    font-size: 7vw !important;
  } 

Website is: www.charliegreenestudio.com

Thank you!!

On 1/4/2024 at 12:39 AM, charliegreenestudio said:

@tuanphan I have a similar question that I am really hoping you can help with! I have a gallery at the top of my homepage that has image titles overlayed (text on the first image says "Empathetic Design" for reference). The image titles are a custom font (H2). Do you know a way to get the image titles to display at a larger scale on mobile. I'm currently using the following custom css for H2:

H2 {
    font-family: 'Mackay Extra-Bold' !important;
    font-weight: extra-bold !important;
    font-size: 7vw !important;
  } 

Website is: www.charliegreenestudio.com

Thank you!!

Use this CSS code for mobile

@media screen and (max-width:640px) {
h2.Index-gallery-item-content-heading {
    font-size: 50px !important;
}
}