html - Making the webpage RESPONSIVE to all resolutions -


i have webpage has simple form , background image.

the page doesn't react different screen resolutions i.e. not responsive.

here's screenfly of page see issue

how can make web page responsive , fit screens?

html:

<!doctype html> <html>   <head>     <title>       yes landing page     </title>     <link href="styles.css" type="text/css" rel="stylesheet"/>     <link href="form/stylesform.css" type="text/css" rel="stylesheet"/>     <meta charset="utf-8" />     <meta name="viewport" content="width=device-width, initial-scale=1"/>   </head>   <body>     <div id="content">         <img id="shadow" src="images/shadow.png"/>         <div id="bg"><img id="bg2" src="images/bgbig.png"/></div>           <div id="ul1">           <img src="images/join.png"/>           <!--<img id="shadow" src="shadow.png"/>-->             <form name="contactform" class="contact_form" method="post" name="contact_form" action="contactengine.php">               <ul>                   <li>                       <label for="name"></label>                       <input type="text" name="name" placeholder="name" required />                   </li>                 </ul>                 <ul class="telephone">                     <li class="telephone">                         <label class="telephone" for="telephone"></label>                         <input type="text" name="tel" class="telephone" placeholder="phone" required />                     </li>                   </ul>                   <button id="send "type="submit" name="submit1"><img src="images/submit.png"></button>             </form>         </div>       </div>   </body> </html>

css:

body {   margin: 0;   width: 100%;   overflow: hidden; } #content{  } #shadow {   float: left;   position: relative;   width: 1920px;   height: 397px;   margin-top: 803px;   margin-left: 0;   z-index: 11; }  #bg {   float: left;   position: relative;   width: 1920px;   height: 841px;   margin-top: 0;   margin-left: -1920px;   z-index: 1;   background-color: #2f3a42;   background-image: -moz-linear-gradient(top, rgba(28,40,46,1) 0%, rgba(113,127,141,1) 100%),-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(28,40,46,1)), color-stop(100%,rgba(113,127,141,1))),-webkit-linear-gradient(top, rgba(28,40,46,1) 0%,rgba(113,127,141,1) 100%),-ms-linear-gradient(top, rgba(28,40,46,1) 0%,rgba(113,127,141,1) 100%),linear-gradient(to bottom, rgba(28,40,46,1) 0%,rgba(113,127,141,1) 100%);   -ms-filter: "progid:dximagetransform.microsoft.gradient(startcolorstr='#ff1c282e',endcolorstr='#ff717f8d',gradienttype=0)"; }  #form {   float: left;   position: relative;   width: 591px;   height: 323px;   margin-top: 473px;   margin-left: -1562px;   z-index: 41; }    #ul1 {   float: left;   position: relative;   width: 238px;   margin-top: 487px;   margin-left: -1342px;   z-index: 45;   min-height: 50px; }

you need include various media queries / break-points specific screen sizes.

e.g. - 

/* smartphones (portrait , landscape) ----------- */ @media screen , (min-device-width : 320px) , (max-device-width : 480px) { /* styles */ }  /* smartphones (landscape) ----------- */ @media screen , (min-width : 321px) { /* styles */ }  /* smartphones (portrait) ----------- */ @media screen , (max-width : 320px) { /* styles */ }  /* ipads (portrait , landscape) ----------- */ @media screen , (min-device-width : 768px) , (max-device-width : 1024px) { /* styles */ }  /* ipads (landscape) ----------- */ @media screen , (min-device-width : 768px) , (max-device-width : 1024px) , (orientation : landscape) { /* styles */ }  /* ipads (portrait) ----------- */ @media screen , (min-device-width : 768px) , (max-device-width : 1024px) , (orientation : portrait) { /* styles */ } /********** ipad 3 **********/ @media screen , (min-device-width : 768px) , (max-device-width : 1024px) , (orientation : landscape) , (-webkit-min-device-pixel-ratio : 2) { /* styles */ }  @media screen , (min-device-width : 768px) , (max-device-width : 1024px) , (orientation : portrait) , (-webkit-min-device-pixel-ratio : 2) { /* styles */ } /* desktops , laptops ----------- */ @media screen  , (min-width : 1224px) { /* styles */ }  /* large screens ----------- */ @media screen  , (min-width : 1824px) { /* styles */ }  /* iphone 4 ----------- */ @media screen , (min-device-width : 320px) , (max-device-width : 480px) , (orientation : landscape) , (-webkit-min-device-pixel-ratio : 2) { /* styles */ }  @media screen , (min-device-width : 320px) , (max-device-width : 480px) , (orientation : portrait) , (-webkit-min-device-pixel-ratio : 2) { /* styles */ }  /* iphone 5 ----------- */ @media screen , (min-device-width: 320px) , (max-device-height: 568px) , (orientation : landscape) , (-webkit-device-pixel-ratio: 2){ /* styles */ }  @media screen , (min-device-width: 320px) , (max-device-height: 568px) , (orientation : portrait) , (-webkit-device-pixel-ratio: 2){ /* styles */ }  /* iphone 6 ----------- */ @media screen , (min-device-width: 375px) , (max-device-height: 667px) , (orientation : landscape) , (-webkit-device-pixel-ratio: 2){ /* styles */ }  @media screen , (min-device-width: 375px) , (max-device-height: 667px) , (orientation : portrait) , (-webkit-device-pixel-ratio: 2){ /* styles */ }  /* iphone 6+ ----------- */ @media screen , (min-device-width: 414px) , (max-device-height: 736px) , (orientation : landscape) , (-webkit-device-pixel-ratio: 2){ /* styles */ }  @media screen , (min-device-width: 414px) , (max-device-height: 736px) , (orientation : portrait) , (-webkit-device-pixel-ratio: 2){ /* styles */ }  /* samsung galaxy s3 ----------- */ @media screen , (min-device-width: 320px) , (max-device-height: 640px) , (orientation : landscape) , (-webkit-device-pixel-ratio: 2){ /* styles */ }  @media screen , (min-device-width: 320px) , (max-device-height: 640px) , (orientation : portrait) , (-webkit-device-pixel-ratio: 2){ /* styles */ }  /* samsung galaxy s4 ----------- */ @media screen , (min-device-width: 320px) , (max-device-height: 640px) , (orientation : landscape) , (-webkit-device-pixel-ratio: 3){ /* styles */ }  @media screen , (min-device-width: 320px) , (max-device-height: 640px) , (orientation : portrait) , (-webkit-device-pixel-ratio: 3){ /* styles */ }  /* samsung galaxy s5 ----------- */ @media screen , (min-device-width: 360px) , (max-device-height: 640px) , (orientation : landscape) , (-webkit-device-pixel-ratio: 3){ /* styles */ }  @media screen , (min-device-width: 360px) , (max-device-height: 640px) , (orientation : portrait) , (-webkit-device-pixel-ratio: 3){ /* styles */ }

you may include many screen sizes want. more information may please refer - http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

though can manage responsive nature of web page without using media queries or break-points best practice , recommended option.


-

Comments

Post a Comment

Popular posts from this blog

facebook - android ACTION_SEND to share with specific application only -

in android application have 4 buttons facebook , viber , telegram , whatsapp , want share different content based on each button. for example if user clicks on viber button want user action_send share content viber only. i found this explains how facebook , twitter seems it's calling specific class name of application don't know applications wanna use except facebook. all android apps have unique id, first have check if these apps installed in user's device , can pass unique id via intent sharing. according below: unique ids different apps : viber : com.viber.voip telegram : org.telegram.messenger whatsapp : com.whatsapp check if these apps installed , if installed send messages through intent. private void sendmessage(context context,string message, string appids) { final boolean isappinstalled =isappavailable(context, appids); if (isappinstalled) { intent myintent = new intent(intent.action_send); myintent.settype("text/p...
Read more

python - Creating a new virtualenv gives a permissions error -

i'm getting following output when running virtualenv newvenv . traceback (most recent call last): file "/usr/local/bin/virtualenv", line 5, in <module> pkg_resources import load_entry_point file "/usr/lib/python2.7/dist-packages/pkg_resources.py", line 2727, in <module> add_activation_listener(lambda dist: dist.activate()) file "/usr/lib/python2.7/dist-packages/pkg_resources.py", line 700, in subscribe callback(dist) file "/usr/lib/python2.7/dist-packages/pkg_resources.py", line 2727, in <lambda> add_activation_listener(lambda dist: dist.activate()) file "/usr/lib/python2.7/dist-packages/pkg_resources.py", line 2227, in activate self.insert_on(path) file "/usr/lib/python2.7/dist-packages/pkg_resources.py", line 2334, in insert_on self.check_version_conflict() file "/usr/lib/python2.7/dist-packages/pkg_resources.py", line 2373, in check_version_conflict...
Read more

javascript - cocos2d-js draw circle not instantly -

i wondering how draw circles (or other shapes also) not instantly. so far tried drawcircle(args...) in ccdrawnode.js , drawcircle(args...) in cc.drawingprimitivecanvas class, , draw circles popping out instantly on screen. what if want achieve effect circular progressive bar, completes circle based on percentage of initialization? or more generally, if want draw circle respect prolonged period? thinking there drawcircle function elapsed time argument fail find any. or have implement own? thanks suggestions, far out of ideas. i think have implement own. think can achieve update circle drawing on each time update() function called.
Read more