Change CSS float property according to browser width

HTML & CSS
1

I simply want to change the float: right to float: center if the width of the browser is less than or equal to 420px. Is it possible? If yes, how…?

<style>
.form
{
float: right;
}
</style>
2

No. {float:center} does not exist.

https://www.w3schools.com/CSSref/pr_class_float.asp
https://caniuse.com/#search=float

If you would like to share more about your form and the structure in which it lives we can make a workable recommendation, such as {margin:0 auto;} maybe.

4 Likes
3

As mentioned, there is no such value as center for the float property.
Though it is possible to centre a block element with auto side margins, Eg:-

margin: 0 auto ;

To make a rule dependent on the browser width you would use a media query, Eg:-

.form {
    float: right ;
}
@media screen and (max-width: 420px){
   .form {
        float: none ;
        margin: 0 auto;
   }
}

You will also need a viewport metatag in the head of the page:-

<meta name=viewport content="width=device-width, initial-scale=1">
5 Likes
4

If the float does not have a width then I guess you are relying on the intrinsic width of its content and therefore the solution above will not do what you want.

I’m guessing you want the form to stay at its natural content width and be centred on the smaller window. If you add display:table to Sam’s pen above then it should do what is required.

.form {
    float: right ;
}
@media screen and (max-width: 420px){
   .form {
        float: none ;
       display:table;
        margin: 0 auto;
   }
}

The display:table will allow the form to be content width and also be centred with margin:auto.

Of course as Ron said there really is not enough to go on here to give a definitive answer as we are guessing at the finer details :slight_smile:

2 Likes
5

@PaulOB, @ronpat, this is my form. It’s a very basic e-mail address form. I have aligned it to the right of my page in the desktop and tablet views, just want it to be aligned in the center for the mobile view (420px browser width and less).

<div class="form"> <form class="form-inline" action="https://app.99inbound.com/api/e/oAqXPKz_" method="post">
<label>
E-mail:
<input id="e-mail" name="E-mail" type="email" required/>
</label>
<input type="submit" value="Update">
</form></div>
6

Even without the finer details, this worked great! It’s centered now. Thanks a lot!

1 Like
7

With this, it moved to the left, not center.

8

Good show! You just saved me some typing :lol:

Before you post your next question, please read our Forum POSTING BASICS: (Help us help you!)

In general, if you can provide us with a “working page” that demonstrates the issue that includes all relevent code or a link your test site, the more accurately we can evaluate the problem and offer recommendations.

9

I’ll rememder that! Thanks for the help!

2 Likes
10

Yes, I neglected to mention width in the example assuming it was already defined.
As Paul explained, without defining a width, the block element will default to full width, then the default alignment will put the content to the left.
Paul changed the element from block to table, because it will shrink the width to fit the content similar to a float. The auto margins will only centre if the width is less than full width.

4 Likes
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.