Bootstrap Responsive Issue in DIV

Question

I created a "holder" for my login box

.box{
background-color: #ffffff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
padding: 1em;
border: 1px solid #d8dadd;
    }

.box-login{
    margin: 0 auto;
    width: 390px;
}

bu the problem is the items(textbox) inside the box isnt responsive, it's acting like a non-responsive item.

Any idea how i can fix this?

Thanks in advance

post your HTML as well. But you basically just need to make `max-width: 390px;` and then set `width: 100%;`, `float: left;` and `position: relative;` to make it change with the surrounding element. EDIT: if you want your box to grow as someone types, that's a whole different story. — Deryck, Oct 05 '13 at 15:46
You could set the width responsively with some CSS [media queries](http://stackoverflow.com/questions/13550541/media-min-width-max-width). — jstephens0, Oct 05 '13 at 23:33

score 1 · Answer 1 · answered Oct 05 '13 at 16:07

1

Set a max-width

.box-login{
    margin: 0 auto;
    width: 390px;
    max-width: 100%;
}

answered Oct 05 '13 at 16:07

Kevin Lynch

24,427
3
36
37

Shouldn't that maybe be `width:100%;` with a `max-width: 390px;`? – William Patton Oct 05 '13 at 16:20
As does my suggestion: http://jsfiddle.net/Xd7TW/1/ . Bootstrap core uses the `width: (x)%; max-width: (x)px;` syntax which is why it is suggested to do it this way. – William Patton Oct 05 '13 at 17:10

score 1 · Accepted Answer · answered Oct 05 '13 at 16:17

Elements in bootstrap only behave responsively if they have to respond to a change in size of the parent element.

As you have specified a fixed width for the .box-login class then the box doesn't respond to widths so the items inside do not respond either.

Specify a width and max-width in the css like so:

.box-login{
    margin:0 auto;
    /* if you want a slight margin on smaller viewports, lower the width value */ 
    width:100%;
    max-width:390px;
}

score 0 · Answer 3 · edited Aug 10 '15 at 16:32

0

As you have specified a width for .box-login class, it won't act in a responsive manner. If you want your box-login class to be responsive you should set width to 100% and specify a max-width. Here is the css:

.box-login{
    margin: 0 auto;
    width: 100%;
    max-width: 390px;
 }

edited Aug 10 '15 at 16:32

ndnenkov

35,425
9
72
104

answered Aug 10 '15 at 15:32

Mohit Yadav

156
1
8

Bootstrap Responsive Issue in DIV

3 Answers3