travd93 Posted January 6, 2015 Share Posted January 6, 2015 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. http://mrt.guardian1.com.au:57005/test/patrols.html Link to comment Share on other sites More sharing options...
Ingolme Posted January 6, 2015 Share Posted January 6, 2015 Most modern websites today use CSS media queries to change the page for smaller screens. Link to comment Share on other sites More sharing options...
travd93 Posted January 6, 2015 Author Share Posted January 6, 2015 (edited) 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 January 6, 2015 by travd93 Link to comment Share on other sites More sharing options...
travd93 Posted January 7, 2015 Author Share Posted January 7, 2015 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; } Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now