Hi guys,
I wanted to know if it was possible to have independent control over the prodcut title font size on the product page for mobile and desktop.
As an example I would like to make the porduct title much smaller on a mobile device compared to that of the desktop version.
Thanks
Antonio
Hey amonllor1,
Could you post a link to your site and point out what you would like to change please?
Best regards,
Rikard
Hi Rikard
Sure here is a product page –
Although the font size of the product title looks ok on desktop, it appears too large on a mobile device. So i want to know how to independently control the font size.
Thanks
Antonio
Hi there,
To shrink the title on a mobile device you’ll need to use media queries
@media only screen and (max-width: 990px) {
.product_title {font-size:20px!important;}
}
The first line is saying for any screen that is 900px wide or smaller do the following.
The next line is saying any element that has a class of product_title make the font size 20px.
Now, 20px may still be too big if so just reduce the value.
Hope that helps
TJ
Worked at treat!!
Thanks very much.
Regards
Antonio
Thanks for pitching in, @tjswarbs78! :)
Antonio, do you still need help with this topic, or can we close this thread?
Cheers!
Sarah
All sorted, please close.
Thanks