calin-beard
11/13/2017 - 4:33 PM

Change the font size on the mobile version

Change the font size on the mobile version

details.md
content_copyfile_download
  • Rendered
  • Source

This snippet targets text, textarea and select fields and it can be used for fields with longer labels, that don't fit on 1 row on the mobile page.

code.html
content_copyfile_download
<!--START code - smaller font size for labels on mobile-->
<style>
    @media screen and (max-width: 620px),
    screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-device-height: 720px) and (max-device-width: 1280px) and (max-width: 999px),
    screen and (-webkit-min-device-pixel-ratio: 1.5) and (max-device-width: 1000px) and (max-width: 999px) {
        .input-holder.field-select select,
        .input-holder.field-select select option,
        .input-holder.field-text input,
        .input-holder.field-textarea textarea {
            font-size: 12px !important;
        }
    }

</style>
<!--END code - smaller font size for labels on mobile-->