CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Htlcs
Htlcs

Reputation: 565

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.

Upvotes: 2

Views: 10059

Answers (5)

Shehroz Asmat
Shehroz Asmat

Reputation: 161

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.

Upvotes: 1

KickyTrick
KickyTrick

Reputation: 328

This will align the Element center to the page,

margin : 0 auto;

Upvotes: 0

PixelAcorn
PixelAcorn

Reputation: 494

Your problem is that you are using % widths. That will make the input and submit button re-size, depending on the size of the container that is holding them.

To fix that, change your widths to be set in pixel value. That will make them a specified width, no matter what.

As an example: http://jsfiddle.net/6yHrK/

HTML:

<input class="percent">
<br>
<input class="pixel">

CSS: 

input.percent {
    width: 50%;
}
input.pixel {
    width: 250px;
}

Upvotes: 0

Oscar Valdez Esquea
Oscar Valdez Esquea

Reputation: 920

You are using percentages in the width property of your submit/inputs. According to the documentation ""% Defines the width in percent of the containing block". Try using fixed values (10px; 1em for example) and see how it goes.

Upvotes: 0

AtanuCSE
AtanuCSE

Reputation: 8940

Use pixel value to set width height of that input and submit button

<input type="button" class="submit" value="submit"/>

css:

.submit
{
    width: 100px;
    height: 50px;
}

Upvotes: 0

Related Questions