-
rheersinkAsked on October 23, 2019 at 4:15 AM
i built this form: https://form.jotformeu.com/92943469995379
how can i specify a different font size for mobile and pc browser? Ideally, I want font size 16 on pc, but font size 12 on mobile when the form is used as part of my web page - www.godandwork.org/creation-actions
I already inserted CSS for auto-resizing of the form itself, now just need to set right font sizes
Thanks
-
Jed_CReplied on October 23, 2019 at 4:26 AM
On PC view, you can just change the font size in form style settings.
ex.
On mobile view, you can inject the CSS code below to change the font size when it detects the viewport size of mobile browsers.
ex.
@media only screen and (max-width: 480px){
.form-all {
font-size: 12px !important;
}
}
Please try that and let us know if you have any questions.
-
rheersinkReplied on October 23, 2019 at 8:30 AM
not working!
i get smaller text on mobile web page view when i change the font size to say 8 or 10px in the form builder, but not when i change it in the CSS
here's a copy of the CSS I am using:
@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){
th.form-matrix-column-headers {
width : auto !important;
min-width : auto !important;
font-size: 8x !important;
}
.form-matrix-row-headers {
min-width : 50px !important;
font-size: 8x !important;
}
}
-
Richie JotForm SupportReplied on October 23, 2019 at 8:43 AM
You may add this inside your mobile CSS
.form-matrix-row-headers {
font-size: 12px !important;
}
th.form-matrix-column-headers {
font-size: 12px !important;
}Please give it a try and let us know if you need further assistance.
-
rheersinkReplied on October 23, 2019 at 8:57 AM
that worked - here is my final set of CSS - THANKS!!
@media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){
th.form-matrix-column-headers {
width : auto !important;
min-width : auto !important;
}
.form-matrix-row-headers {
font-size: 10px !important;
}
th.form-matrix-column-headers {
font-size: 10px !important;
}
.form-matrix-row-headers {
min-width : 50px !important;
}
}