Jump to content
Sign in to follow this  

Have a div dynamically resize depending on window size of browser

Recommended Posts

Hi All,

I posted a thread previously which was answered pretty well so thought I would try my luck again,

I am creating a logon page for my company, the logon page will be mostly used by mobiles and ipads so I have had to learn alot (imo) about mobile sites, so excuse me if I have failed in some respects haha.


The website below is my test site and what I am hoping to have achieved is to have the logon keypad dynamically shape depending on browser window, i.e a mobile is smaller than an ipad.

The goal then is to have the buttons also become larger and smaller. Is this even possible?


If it is not possible can someone let me know how I can actually make the keypad larger so at least it will look the part on an ipad.


Any help is appreciated, thanks.



Share this post

Link to post
Share on other sites

Thats great, thanks for your help again. Its these little CSS functions that I just dont know about that get me haha. I suppose thats why I'm not a real web dev.

I do however have a question still, how can I get the table to have a larger height, it just does not seem to be responding. The width 80% works but height does not, would changing this to a Div table help?

<body>       <div id="keypad" >         <label for="pin">Pin Number:</label>         <table style="width:80%; height:80%; margin:0 auto; border:1px solid black;">           <tr>             <td colspan="3"><input type="text"readonly size="3" id="d"></td>               </tr>           <tr>             <th><input type="button" value="1" onClick='v("1")'></th>             <th><input type="button" value="2" onClick='v("2")'></th>             <th><input type="button" value="3" onClick='v("3")'></th>               </tr>           <tr>             <td><input type="button" value="4" onClick='v("4")'></td>             <td><input type="button" value="5" onClick='v("5")'></td>             <td><input type="button" value="6" onClick='v("6")'></td>               </tr>           <tr>             <td><input type="button" value="7" onClick='v("7")'></td>             <td><input type="button" value="8" onClick='v("8")'></td>             <td><input type="button" value="9" onClick='v("9")'></td>               </tr>           <tr>             <td><input type="button" value="0" onClick='v("0")'></td>             <td colspan="2"><input type="button" value="Clear" onClick='c("")'></td>               </tr>             </table>           </div></body>

Please note that I have css all around this bad boy and if you want to see the real page click on the link in my OP

Edited by travd93

Share this post

Link to post
Share on other sites

Thanks but I figured it out,

Because i was using jquery mobile I needed to use the .ui-btn class to make any changed to the buttons.

I had tried the ages ago with no result but it was because the jquery was overwriting it.

	#keypad .ui-btn { 		height: 20px;		font-size: 35px; 		} 

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Create New...