Why is the date picker appearing so small on mobile?

dkapo
Member

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 Upvotes
2 Replies 2
Derek_Gervais
HubSpot Employee

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 Upvotes
dkapo
Member
Oh I didn’t notice that, yes please. Thanks
0 Upvotes