css - HTML automatically resize button and font size for phones in a form box -


so i'm still trying hang of html , css, want needs different approach.

so right when view website on phone form auto resize, button doesn't.

however can see code, have both button , font size pretty big. way automatically resize button , font size fit when viewed on phone , tablet.

below css code button.

thanks 

<form> <input type="email" name="email" id="email" class="field-style field-split align-left set-width" placeholder="your email" /> </br> </br> <btn> <input type="submit" name="subscribe"  value="get free course now" id="submit" /> </btn> </form>  .form-style-9 btn input[type="button"], .form-style-9 btn input[type="submit"] {   background: #3cd934;   background-image: -webkit-linear-gradient(top, #3cd934, #2b8016);   background-image: -moz-linear-gradient(top, #3cd934, #2b8016);   background-image: -ms-linear-gradient(top, #3cd934, #2b8016);   background-image: -o-linear-gradient(top, #3cd934, #2b8016);   background-image: linear-gradient(to bottom, #3cd934, #2b8016);   -webkit-border-radius: 4;   -moz-border-radius: 4;   border-radius: 4px;   -webkit-box-shadow: 0px 1px 3px #666666;   -moz-box-shadow: 0px 1px 3px #666666;   box-shadow: 0px 1px 3px #666666;   font-family: arial;   color: #ffffff;   font-size: 27px;   padding: 11px 20px 10px 20px;   text-decoration: none; }  .form-style-9 btn input[type="button"]:hover, .form-style-9 btn input[type="submit"]:hover {   background: #256e13;   background-image: -webkit-linear-gradient(top, #256e13, #1d520f);   background-image: -moz-linear-gradient(top, #256e13, #1d520f);   background-image: -ms-linear-gradient(top, #256e13, #1d520f);   background-image: -o-linear-gradient(top, #256e13, #1d520f);   background-image: linear-gradient(to bottom, #256e13, #1d520f);  text-decoration: none; }

you can use media queries

@media (max-width: 300px) {     btn {         width: 50px;         font-size:10px;     } }

the above saying if screen size <= 300px apply these rules.


Comments

Post a Comment

Popular posts from this blog

node.js - Using Node without global install -

i'm working on few node & electron (atom shell) projects , i'm curious how them work without user having install node globally. i've seen few applications including node directory in project contains node.exe binary. how go setting node project use binary? edit: thought should add, i've searched everywhere answer this, unrelated results.
Read more

How to access a php class file from PHPFox framework into javascript code written in simple HTML file? -

i've website developed using phpfox v3.0.7 . now i'm trying implement 'sse(server sent events)' 1 of php files. reference i'm giving below necessary code part of file. file titled process.class.php , present @ location /var/www/module/notification/include/service/process.class.php present on server having ip http://34.124.40.142/ . <?php /** * [phpfox_header] */ header('content-type: text/event-stream'); header('cache-control: no-cache'); defined('phpfox') or exit('no dice!'); /** * * * @copyright [phpfox_copyright] * @author raymond benc * @package phpfox_service * @version $id: service.class.php 67 2009-01-20 11:32:45z raymond_benc $ */ class notification_service_process extends phpfox_service { /** * class constructor */ public function __construct() { $this->_stable = phpfox::gett('notification'); } public function add($...
Read more

java - Null response to php query in android, even though php works properly -

Image
table i'm trying retrieve above data using 2 php files below. want pass email parameter , return bets user = email. work fine when tested advanced rest client, problem not php. however, when try through android 2 java classes below, null pointer exception (logcat below) , json object returned null. i'm not sure error is, think i'm not passing parameter php , that's why it's producing null response. logcat 05-31 15:10:50.227 26074-26074/com.example.albert.betterapp e/androidruntime﹕ fatal exception: main process: com.example.albert.betterapp, pid: 26074 java.lang.runtimeexception: unable start activity componentinfo{com.example.albert.betterapp/com.example.albert.betterapp.displayallbets}: java.lang.nullpointerexception @ android.app.activitythread.performlaunchactivity(activitythread.java:2292) @ android.app.activitythread.handlelaunchactivity(activitythread.java:2350) @ android.app.activitythread.acce...
Read more