css - My responsive website doesn't scale perfect on mobile and other devices -


i made responsive website bootstrap 3. it's portfolio website image gallery. website work responsive when view mobile or other device doesn't scale perfectly. when reload page looks right @ first when finished loading changes. have idea went wrong?

<!doctype html> <html lang="en">   <head>      <meta charset="utf-8">     <meta http-equiv="x-ua-compatible" content="ie=edge">     <meta name="viewport" content="width=device-width, initial-scale=1">     <!-- above 3 meta tags *must* come first in head; other head content must come *after* these tags -->     <title></title>      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous">       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">       <link href="https://fonts.googleapis.com/css?family=roboto:100,300,400,500,700" rel="stylesheet">      <link rel="stylesheet" href="styles/main.css">    </head>   <body>    <section class="main">     <div class="container">      <div class="row">         <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 box">           <a href="#" class="img">            <img src="" alt="" class="img-responsive">           <div class="imgoverlay">            <div class="text"></div>           </div></a>         </div>       <!--///////////// pop /////////////////////-->         <div id="popup1" class="overlay">           <div class="col-md-12 popup">                <div class="col-md-6 col-md-offset-1 iframe">               <iframe src="" frameborder="0" allowfullscreen></iframe>              </div>             <div class="col-md-4 content">               <h2></h2>              <p class="info"></p>             </div>             <a class="col-md-1 close" href="#">&times;</a>           </div>         </div>       </div>       </div>        </section>      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="anonymous"></script>   </body> </html>  body {    padding: 0;   border: 0;   vertical-align: baseline   }  .main {   margin-top: 170px;   margin-right: auto;   margin-left: auto;   margin-bottom: 20px; }  .navbar {   min-height: 130px;   margin-bottom: 20px; } .navbar-toggle {   margin-top: 25px; } @media (min-width: 768px) {   .navbar-nav.navbar-right:last-child {     margin-right: 0;   } }  .box {  padding: 5px;  margin: 0; }  .img {   display: block;   position: relative;   margin: 0px;   z-index: 1; }  .imgoverlay {      position: absolute;   top: 0;   bottom: 0;   left: 0;   right: 0; }  .img:hover .imgoverlay {   opacity: 0.75; }  .text {   position: absolute;   bottom: 0;   padding-bottom: 6px;   margin: auto auto auto 10px; }  /*///////////pop up////////*/ .overlay {   position: fixed;   top: 0;   bottom: 0;   left: 0;   right: 0;   visibility: hidden;   opacity: 0;   z-index: 2; }  .overlay:target {   visibility: visible;   opacity: 1; }  .popup {   margin: 150px auto;   position: relative; }  .popup .content {   max-height: 30%;   overflow: auto; }

use media queries

@media (min-width: 576px) { ... }

inside braces define styles

media queries used define rule used define different style different media types/devices.

if width of device's screen minimum 567px rendered defined style.


Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more