For example, let’s say I had the HTML code for a hypothetical contact form:
<div class="form">
<input type="text" name="name" placeholder="Name">
</div>
<div class="form">
<input type="text" name="email" placeholder="Return Email">
</div>
Then, the CSS (which I’m simply trying to code to center the fields):
.form {
float: center;
}
@ media (min-width: 480px) {
.form {
float: center;
}
}
As a start, I’m just attempting to center the form. However, I also would like to know how to make it mobile-friendly in general.
As a small disclaimer, I haven’t had much exposure to CSS — so I’m sorry if what I’m trying to do seems to be obvious. Thanks in advance!
1 Like
Don’t use float to center things. In fact, don’t use float at all. OK, there are some instances in which float is needed, but they are far and few between and for very specific circumstances. Now that we have so many other options for layout (flexbox, grid) there is usually no reason to use float.
Here is a great page that explains how to center things:
As for making your page responsive, start by narrowing your browser as skinny as it will go and style the page to look good at this skinny width. This will be your base CSS. Then slowly widen the page and when you get to a point where you have enough horizontal room to rearrange things for a wider view port then add your media break point there using min-width and ‘em’ for the units. To ball park the em value, divide the pixel width by 16. Using em will make your page responsive not only to changes in the browser width but also to text size.
1 Like
In general, you can save yourself a lot of headache by building with a ‘mobile first’ mindset. Make sure if your form is a large one you’ve considered what you want it to look like on mobile. Maybe even quick sketch it out. Watch your inputs, make sure they resize and look nice from a mobile screen size. Also , avoid floating. It’s a pretty dated practice. Use Flexbox / CSS Grid to get your layout right. You got this 
1 Like