CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapresponsive-design
JohnDotOwl
JohnDotOwl

Reputation: 3755

Bootstrap Responsive Issue in DIV

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

Upvotes: 0

Views: 242

Answers (3)

Mohit Yadav
Mohit Yadav

Reputation: 156

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;
 }

Upvotes: 0

William Patton
William Patton

Reputation: 730

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;
}

Upvotes: 1

Kevin Lynch
Kevin Lynch

Reputation: 24703

Set a max-width

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

Upvotes: 1

Related Questions