css - Bootstrap grid of images for small resolution -

-

i have simple home page: https://jsfiddle.net/1lotp6ce/1/

there 6 images in 2 rows (3 x 2). works fine larger screens, once gets sm images start overlapping. how may fix sm 2 images x 3 rows without overlapping.

update: i'd need not not overlap have spaces between rows.

you can using 1 .row element parent , other child. keep in mind size of images should pixel perfect each other (i.e. image sizes should 200x200).

and use .img-responsive class on <img> tags.

and use column classes <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">...</div>

something like:

<div class="row">   <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">     <a href="#"><img class="img-responsive" src="img-url"></a>   </div>   <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">     <a href="#"><img class="img-responsive" src="img-url"></a>   </div>   <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">     <a href="#"><img class="img-responsive" src="img-url"></a>   </div>   <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">     <a href="#"><img class="img-responsive" src="img-url"></a>   </div>   <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">     <a href="#"><img class="img-responsive" src="img-url"></a>   </div>   <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">     <a href="#"><img class="img-responsive" src="img-url"></a>   </div> </div>

working code snippet (use full screen):

/*header*/    @import url('http://getbootstrap.com/dist/css/bootstrap.css');  #logo {    margin-top: 12px;  }      /*body*/    body {    background-color: #262626;    padding-top: 70px;  }    @media (min-width: 1200px) {    .container {      max-width: 1080px;    }  }    .row > div > > img {    width: 100%;    display: block;    margin: 10px 0;  }    .top-buffer {    margin-top: 25px;  }    .mail {    /*color: */  }    .mail:hover {}      /*footer*/    .footer-bottom {    min-height: 30px;    width: 100%;  }    .copyright {    color: #777;    line-height: 30px;    min-height: 30px;    padding: 10px 0;  }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>  <body>      <nav class="navbar navbar-inverse navbar-fixed-top container-fluid">      <div class="container">        <a href="http://feanor.cz/">          <img class="navbar-left" id="logo" src="http://feanor.cz/public/img/web/logo_studio.gif" width="200" alt="feanor studio">        </a>        <ul class="nav navbar-nav navbar-right">          <li>            <a href="#">home</a>          </li>          <li>            <a href="#">contact</a>          </li>        </ul>      </div>    </nav>    <div class="container">      <div class="row">        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">          <a href="#">            <img class="img-responsive" src="http://feanor.cz/public/img/painting/oil/8t.jpg">          </a>        </div>        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">          <a href="#">            <img class="img-responsive" src="http://feanor.cz/public/img/photo/portrait/32t.jpg">          </a>        </div>        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">          <a href="#">            <img class="img-responsive" src="http://feanor.cz/public/img/photo/wedding/26t.jpg">          </a>        </div>        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">          <a href="#">            <img class="img-responsive" src="http://feanor.cz/public/img/photo/car/5t.jpg">          </a>        </div>        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">          <a href="#">            <img class="img-responsive" src="http://feanor.cz/public/img/photo/product/10t.jpg">          </a>        </div>        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">          <a href="#">            <img class="img-responsive" src="http://feanor.cz/public/img/photo/interior/4t.jpg">          </a>        </div>      </div>    </div>      <div class="footer-bottom navbar-inverse navbar-fixed-bottom container-fluid">      <div class="container">        <div class="copyright navbar-left">          © 2016, feanor, rights reserved        </div>        <ul class="nav navbar-nav navbar-right navbar-right">          <li>            <a target="_blank" href="#">              <i class="fa fa-instagram fa-2x faicon"></i></a>          </li>          <li>            <a target="_blank" href="#">              <i class="fa fa-envelope fa-2x faicon"></i></a>          </li>          <li>            <p>lybvit@gmail.com</p>          </li>        </ul>      </div>    </div>  </body>


Comments

Post a Comment

Popular posts from this blog

php - How to display all orders for a single product showing the most recent first? Woocommerce -

-
i have password protected page on frontend. on page, want display full list of purchases associated single woocommerce product id. option 1: i've looked through woocommerce docs , , found: wc_cli_order , list_( $args, $assoc_args ) function lists orders. presumably, orders can filtered product id [--=] filter orders based on order property. line item fields (numeric array, started index zero): line_items.0.product_id option 2: i found article , based on customer id. i've modified code based on guesses meta_key , meta_value. $customer_orders = get_posts( array( 'numberposts' => -1, 'meta_key' => '_product', 'meta_value' => get_product_id(), 'post_type' => wc_get_order_types(), 'post_status' => array_keys( wc_get_order_statuses() ), ) ); how display orders single product showing recent order first? here solution put based on these articles: http://www.w...
Read more

asp.net - How to correctly use QUERY_STRING in ISAPI rewrite? -

-
i'm having difficult time , hope guys can help. using helicon isapi rewrite version 3.1.0.104 on our iis server. edit http.conf file , have tried , still fail. this trying do: redirect url: https://www.domain.com/switch-by-version?version=2.8.5.2594 to: https://test.domain.com/load/load.aspx?tver=2.8.5.2594 the version number @ end source url change, , need target url have same version number @ end of url example above shows. i tried following not work: rewritecond %{query_string} ^version=(\d\d?)\.(\d\d?)\.(\d\d?)\.(.*)$ [nc] rewriterule ^/switch-by-version(.*)$ https://test.domain.com/load/load.aspx?tver=%1 [r=307,nc,l] any appreciated! thanks. if it's running in equivalent context of .htaccess , rule shouldn't start / . here's simpler version: rewritecond %{query_string} ^version=(\d+\.\d+\.\d+(?:\..+)?)$ [nc] rewriterule ^switch-by-version/?$ https://test.domain.com/load/load.aspx?tver=%1 [r=307,nc,l]
Read more

angularjs - How restrict admin panel using in backend laravel and admin panel on angular? -

-
https://scotch.io/tutorials/token-based-authentication-for-angularjs-and-laravel-apps following tutorials, try write authentication restrict admin panel, didn't understood how can that. this admin panel, admin panel don't want show , request database unauthenticated users. my laravel-routes route::get('/admin',function(){ return view('index'); }); route::get('/api/v1/employees/{id?}', 'employees@index'); route::get('/api/v1/users/{id?}', 'employees@users'); route::post('/api/v1/employees', 'employees@store'); route::post('/api/v1/employees/{id}', 'employees@update'); route::delete('/api/v1/employees/{id}', 'employees@destroy'); route::group(['prefix' => 'api'], function() { route::resource('authenticate', 'authenticatecontroller', ['only' => ['index']]); route::post('authenticate', 'authentic...
Read more