Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • May 12, 2017 at 9:58 am #792182
    amonllor1

    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

    May 12, 2017 at 1:45 pm #792288
    Rikard

    Hey amonllor1,

    Could you post a link to your site and point out what you would like to change please?

    Best regards,
    Rikard

    May 12, 2017 at 2:24 pm #792313
    amonllor1

    Hi Rikard

    Sure here is a product page –

    Leather Repair Patch | XL Plain – 20cm x 28cm

    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

    May 12, 2017 at 2:36 pm #792323
    tjswarbs78

    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

    May 12, 2017 at 2:43 pm #792327
    amonllor1

    Worked at treat!!

    Thanks very much.

    Regards
    Antonio

    May 12, 2017 at 4:17 pm #792378
    Sarah

    Thanks for pitching in, @tjswarbs78! :) 

    Antonio, do you still need help with this topic, or can we close this thread?

    Cheers!
    Sarah

    May 12, 2017 at 4:18 pm #792382
    amonllor1

    All sorted, please close.
    Thanks

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘How to make product title smaller’ is closed to new replies.