Home/ Questions/Q 8732305
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T09:24:58+00:00

Hi all I’m trying to create a mobile site for a website I’ve already

  • 0

Hi all I’m trying to create a mobile site for a website I’ve already created and am using in file css.

  1. i am trying to make the input boxes 10% of the screen height. how can I do this?
  2. how can I make the login button taller?

here is the code from the view file

<?php echo $this->Html->docType('xhtml-trans'); ?>
<html>


<head>
<style>
body {
background-color:#ADD8E6;
height: 960px;
width:  640px;
}

table, td, th
{   
    background-color: #ADD8E6;
}
input
{
    height:233%;
    width:70%;  
}
</style>
    <title> <?php echo $title_for_layout; ?></title>
    <?php echo $this->Html->css($stylesheet_used); ?>
</head>
<body>
<div id = "headertwo" style="background-image:url(<?php echo $this->webroot; ?>img/BannerGradient2.jpg);">
<center>    
<?php echo $this->Html->image($image_used, array(
    "alt" => "eBox",
    'url' => array('controller' => 'Users', 'action' => 'login'))) ?>
</center>
    </div>  
 <?php echo $this->Form->create('User', array('url' => array('controller' => 'users', 'action' => 'login')));?>
<table border=0 style="width:640px;">
    <tr>
    <td >Username:
    <?php echo $this->Form->input('username',array('label'=>false,));?></td>
    </tr>       
    <tr>    
        <td>Password: <?php echo $this->Form->input('password',array('label'=>false,));?></td>
    </tr>

    </table>
<?php echo $this->Form->end('Login', array('width'=>100));?>
    </div>
    </body>
    </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    user1393064,

    You’re using XHTML Doctype rightnow which is not good practice now a days to achieve good result in Targeted Mobile Device.

    Instead I recommend you to try HTML5 Doctype, like below…

    <!DOCTYPE html>

    Additionally for Mobile support you need to add Viewport Meta

    <meta name =”viewport” content =”initial-scale = 1.0, user-scalable = no”>

    Then you define your CSS for INPUT

    input { /* put your code here */ }

    input#submit { /* put your style here */ }

    I also suggest you to use CSS Media Query for your targeted Mobile Device & Screen.

    @media screen and (max-width: 640px){

       body{ /* put your style here */ }

       form{ /* put your style here */ }

       input{ /* put your style here */ }

       input#submit{ /* put your style here */ }

    }

    For further help you can refer to this article http://www.yourinspirationweb.com/en/tips-tricks-how-to-optimize-a-website-for-mobile-devices/

    • 0