CMS Development

dkapo
Miembro

Why is the date picker appearing so small on mobile?

IMG_2681.png

The field for "best day to chat?" looks very small on mobile devices, yet stretches across 100% on desktop. I noticed it looked this way on mobile completely unstyled as well. I tried to change the width/height in CSS of the "hs-datepicker" rule but it doesn't seem to affect the size of the box. On Chrome Devtools it looks normal on mobile as well, but on an actual device it appears the way it is in that screenshot. 

 

Here is what the code looks like (I removed some styling elements to simplify it):  

 

 

<!DOCTYPE html>
<html>
<head>
<title>HS FORM</title>
<style>



.hs-form input[type="text"],
.hs-form input[type="number"],


.hs-form input[type="email"],
.hs-form input[type="tel"] {
width: 100%;
height:2.5rem;
background-color:rgba(247,249,252);
margin-bottom:1.2rem;
border: .1px solid #307167;

}


.hs-form textarea,
.hs-form select {
width: 100%;
background-color:rgba(247,249,252);
border:none;
margin-bottom:1rem;
border: .1px solid #307167;

}


.hs-form-checkbox {
list-style-type: none;

}


</style>
</head>
<body>

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<div class="pt-2">
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "5599714",
formId: "67d87441-719a-45f4-8971-4745f5f774aa"
});
</script>

</body>
</html>

 

 

Is there any way to increase the height and then bring the width to 100% on mobile devices? Thank you! 

0 Me gusta
2 Respuestas 2
Derek_Gervais
Exmiembro de HubSpot
Exmiembro de HubSpot

Why is the date picker appearing so small on mobile?

Hey @dkapo ,

 

This question seems like a better fit for the HubSpot CMS Developer Forum. Would you be alright if I moved it over to that forum so that it can get more visibility with front end devs?

0 Me gusta
dkapo
Miembro

Why is the date picker appearing so small on mobile?

Oh I didn’t notice that, yes please. Thanks
0 Me gusta