My shopify product font is smaller on mobile view then desktop view any way round this?

Shopify Discussion
1

Parts of my shopify product description font size on my website looks smaller on mobile view then how it should look as it does on desktop view.

Can someone help me get round this issue please.

Thank you.

2

Hello Herald,

By default mobile text and layouts will change to make it responsive to the screen size. Can you please provide me a link to your site so I can assist you with this?

3

Hi Griffin,

Sure please see: vitalitystore.org

If you check in mobile view the font size on the product description in the first paragraph is smaller.

Many thanks,

Herald

4

This is the media query on the first paragraph which is listed as a

tag and is showing 13px on the font size.

@media only screen and (max-width: 749px)

p {
font-size: calc(((var(–font-size-base) - 1)/ (var(–font-size-base))) * 1em);

}

The large text are all 14px and are

  • or list items, which are being hit by this css rule.
    body,
    button{
    font-size: calc(var(–font-size-base) * 1px);
    }

    The --font-size-base is 14px so you can either apply the same rule to the

  • tags with a media query to get them to be 13px like the paragraph above, or if you want the top paragraph to be the same size as the others then change that media query to match the rule on the list items.

    • 5

    Sorry I am not that code savvy, so I have two options in laymen terms:

    1. So I can either change the text size of everything else on the page to match the size of the small paragraph? OR

    2. I can change the size of the small paragraph to match the size of everything else on the page?

    Or is your advice specific to the size of the font on the product description?

    If you could break it down for me please as simple as possible and give me a step by step instructions on implementing each one of these changes on my shopify store.

    Many thanks in advance,

    Herald.

    6

    Thats correct, I would highly recommend just changing the mobile media query to the second calculation rule.

    To achieve this you can paste this into the end of your theme.css file if you have one.
    @media only screen and (max-width: 749px){ p { font-size: calc(var(–font-size-base) * 1px) !important; } }

    If that does not work please give me another reply here.

    7

    That worked perfectly thank you however the top banner seems to be off centre is there anyway that could be sorted out as well, so everything written in the top banner aligns perfectly?

    8

    Glad that worked for you, could you attach a screenshot of the banner you’re having issues with?

    9

    Hi Griffin,

    Please see the below issue I have with the banner in mobile view:

    Herald_0-1665090865788.png
    Herald_0-1665090865788.png1092×255 121 KB

    I want the lines to be mid centred and the 3 emojis to be on one line. Can that be done?

    Like below:

    Herald_2-1665091287822.png
    Herald_2-1665091287822.png809×216 4.6 KB

    Can that be done?

    Many thanks,

    Herald

    10

    Simply put a /n or
    tag wherever you would like the line to end and a new one to start. Of course this is dependent upon your theme and whats accepted in the input, but /n should work.

    11

    Hi Griffin,

    Where would I put in the tag if I want it in the above format for mobile view and what location would the tag be put in? In the theme banner of the store itself or in the code and if so which section of the code?

    If you could walk me through it thanks.

    12

    you should be able to add it in right in the online editor where you would change the text for that part.

    13

    Hi Griffin,

    It does not work unfortunately, please see below:

    Herald_1-1665261378495.png

    Herald_2-1665261452180.png

    Herald_3-1665261530890.png

    I’m using a debut theme if that helps, do you have another work around for this issue?