Responsive Issue on Resolution 768 and 1024

Hi I am making a form using bootstrap framework,
I have made the form and it is working fine small resolutions, but facing issue in Resolution 768 and 1024, can some one please help me out where i m doing some mistakes in css or in html…

here is the link of my page…

http://www.metalsauda.com/GlobalLogistics/respIssue/form.html

your early reply appreciated…

thanks…

Hi,

The main problem is that the inputs are too wide for the span5 which is a percentage width while the inputs are a fixed 270px width. This is a problem with the bootstrap inputs at a fixed width and rarely works. I usually set the inputs to 100% width and then they will scale with the wrapper.

This is rough code and you will need to add a custom class to the form and precede these rules with your new class to avoid affecting all other forms.

.control-group input[type=text], .control-group select {
	width:100%;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	height:29px;
}
 @media screen and (max-width:1400px) {
.radio.inline {
	display:block;
	margin:0;
	text-align:left;
}
.radio.inline input {
	float:none;
	margin:0;
	display:inline;
	width:auto;
}
}
@media screen and (max-width:1100px) {
	.form-horizontal .controls {
		margin-left:0;
	}
	.form-horizontal .control-group label {
		display:block;
		float:none;
		text-align:left;
	}
}

Something along those lines should get you back on track but you may of course need to reset the smaller widths if any of the above changes have adverse effects.

Thanks PaulOB,

Now the header right image and text is overlapping, means right image is not moving with text, can you please suggest any idea for this, that text should move along with image…

Thanks once again Paul

If you mean the white logout text then you are probably better right aligning the image that the text sits on.

e…g.

.header-rightbg {background-position:100% 0;background-repeat:no-repeat}

Hi PaulOB,

When I am re-sizing the window for responsive look, dropdown icon is not showing in responsive sizes,
is it bootstrap issue or I am doing some where wrong in the the code…

Thanks Once again for your reply…

Which page is this as your original doesn’t seem to resize like that? (It’s still overlapping as per your original problem)

This is same page Which I have shared the Link, its not overlapping, only the problem is when I re-size the browser into tab view or in mobile view the dropdown’s icons are not showing, its showing like simple text box…

Hope you got the point…

Thanks…

This is what I see on this page.

let me share updated link…

Go on then :smile:

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