Trouble with form input fields (updated)

Developer Support CMS Development
,
1

Hi everyone!

I am a web designer that is very fresh when it comes to writing custom html and css. Typically my workflow involved handing off a prototype for development, not coding a site or pages myself … until our team joined Hubspot very recently. Now I am in the process of learning how to build my own custom modules using html and css.

I seem to be having trouble with form input fields in my custom module. I’ve been able to apply custom css to the entire form starting with the cms theme boilerplate. I’ve given my input fields a width of 350px, but displays at 370px. There is 10px of padding (left/right) that I gather makes up that additional 20px.

Screen Shot 2022-02-17 at 11.11.01 AM.jpg
Screen Shot 2022-02-17 at 11.11.01 AM.jpg922×726 213 KB

container width: 350px
Screen Shot 2022-02-17 at 11.11.15 AM.png
Screen Shot 2022-02-17 at 11.11.15 AM.png870×706 111 KB

input width: 370px

Why does this happen and how do I style these with the correct widths and padding?

Additionally, when I click into the field the focus state resizes to 350 px (or it’s original size such as the text area at the bottom of the form).

Screen Shot 2022-02-17 at 11.11.32 AM.png
Screen Shot 2022-02-17 at 11.11.32 AM.png878×866 104 KB

I feel as if I am 90% of the way there and could probably live with the present state, but would like to understand where I am falling short and why.

Here is the url to the custom landing page I am building:

https://drive.mecum.com/mecum-landing-page

Please bear with me, the module with the hero image and form is not styled for responsiveness - so make sure your browser window is full width. I wanted to get the full module dialed in before moving onto media queries. The rest of the page should be fully responsive.

Thanks for your help!

2

@RVanKammen The reason it shrinks to 350 when you click into an input is because the :focus state has box-sizing: border-box; set on it. So if you add box-sizing: border-box; to the non-focus state this would fix your issue. What box-sizing: border-box; basically does is tell the width to include the padding and border.

form textarea,
form select,
form input[type=text],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
input[type=string] {
 box-sizing: border-box;
 width: 350px;
}
3

Ah!! Knew it had to be something simple that I was missing.

Most of my other issues I’ve been able to troubleshoot pretty well on my own. But couldn’t quite find the solution for this one, so I came to the Community for help :blush:

Thank you so much for helping me with this!