Htlcs Htlcs - 4 months ago 8
CSS Question

CSS alignment to fit different screen resolutions

I am new to HTML and CSS. I am using ImpactJS engine and currently working on UI for some elements in my web game. I am trying to add an input box and call it using Jquery in my javascript files in the game. I got everything working till now but when I am trying to adjust my text input box and submit button to be fixed and not change with different screen resolutions but currently it doesn't seem to be working. The input box and submit button change their size and width according to different screen resolutions. Below is my CSS file

I also tried looking into other similar forums and tried changing the position to absolute but doesn't work too.

#problemdisplay {
position: absolute;
margin-top: 10%;
width: 100%;
}
#problemform {
width: 50%;
margin-left: auto;
margin-right: auto;
padding: 280px 2px 15px 400px;
}
#probleminput {
display: none;
width: 45%;
margin-left: 5.5%;
margin-right: 5.5%;
padding: 35px 5px 15px 20px;
}
#problemsubmit {
display: none;
width:5%;
padding: 15px 10px 8px 2px;
}
#prob_submit_msg {
width: 50%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#canvaswrapper {
margin: 15px;
position: relative;
}
#canvas {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}


Any help would be much appreciated.

Answer

lets make it simple if you have a div you want to make adjust to its center lets assume height of your div is 300px and width is 400px all you have to do is position:absolute; margin-top:-150px; margin-left:-200px; top:50%; left:50%; this will do the job and it will adjust your div to center for every screen resolution.

Comments