css - Going from 2 to 3 columns when expanding the width of screen -

-

when screen expands past width i'd add column unordered list items, 2 columns 3 columns. i'm not sure how this? bootstrap seems has solution i've never used it. here jsfiddle: http://jsfiddle.net/en9qm/

the html

<div class="sidebar">    <div class="search-filters">filters</div>    <div class="search-results">       <div class="listings">          <ul>             <li>hello</li>             <li>byebye</li>             <li>chuck</li>             <li>paul</li>          </ul>       </div>       <div class="listings-footer"></div>    </div> </div>

the css

.sidebar {    position: fixed;    top: 47px;    right: 0;    bottom: 0;    width: 60 % ;    overflow - y: scroll;    /*-webkit-overflow-scrolling: touch;     background: #f7f7f7;*/    background - color: aqua;    /*border: 3px solid black;*/ }    .search - filters {       background - color: white;       height: 40 % ; }    .search - results {       padding: 10px 0 20px 20px;       border: 3px solid black;       height: 100 % ; }    .listings {       border: 3px solid red;       height: 100 % ; }    .listings - footer {       border: 3px solid blue;       /*height: 92px;     height: 100%;*/ } ul {    /*width:100%;*/    list - style - type: none;    /*height: 100%;*/    background - color: pink; } li {    background: green;    float: left;    height: 250px;    margin: 0 10px 10px 0;    width: 45 % ; }@ media(min - width: 1200px) {    li {       width: 25 % ;    } } li: nth - child(even) {    margin - right: 0; }

you on right track media query. have change width inside it.

@media (min-width: 1200px) {     li, li:nth-child(even) {         width:30%;         margin-right: 3.33%;     } }

(see jsfiddle) means when screen @ least 1200px wide, columns occupy 30% of container, plus 3.33% of right margin. overrode li:nth-child(even) second column have right margin well.

bootstrap uses grid system of 12 columns, 12 columns means 100% of parent's width. is, if element has class col-lg-6 col-sm-3, means in large (lg) screens, element have width: 50% (6 columns out of 12 total, that's 1/2), , in small (sm) screens, have width: 25% (3 columns out of 12 total, that's 1/4).

in case, li elements should have class col-lg-4 col-md-6, means take 1/3 of parent's width in large screens , 1/2 in medium-width devices. (large means screens wider 1200px, , media means screens between 992px , 1199px. sizes documented here.)

check jsfiddle. notice because didn't specify col-sm-x class, in small screens default every li takes 100% of width. can force specifying class each screen size, if want. (all easier understand once read bootstrap documentation.)

using bootstrap can avoid lot of media queries , focus in keeping css shorter , clearer.


Comments

Post a Comment

Popular posts from this blog

database - VFP Grid + SQL server 2008 - grid not showing correctly -

-
i having problem, have grid called "gridbasica" , this: thisform.gridbase.recordsource = "sgviemp" sgviemp cursor made executing select sqlserver command sqlexec. when want modify registry, go form , the update there. so, when come form grid, grid isnt grid anymore, big white rectangle. reading around said: delete recordsource , asingt again. thisform.gridbase.recordsource = "" *--i sqlexe here thisform.gridbase.recordsource = "sgviemp" i , works, but, when click button modify again cursos updated modify form doesnt load fields did first time. could me out that? thanks in advance. --------------- edit ------------------ i have been doing recommended: lnselect = select(0) n = sqlexec(thisform.conexion,"select emp_ccodigo codigo, emp_cnombre 'nombre o razon social', emp_cnumrif 'r.i.f' sgviempr","sgviemp1") set echo on suspend select sgviemp zap in sgviemp *-- browse *--zaps correct
Read more

jquery - Set jPicker field to empty value -

-
im using jpicker color selector in form. have clear value set window/icon 'no color selected' state. i've tried following: $(':input[name="color"]').val(''); //access value directly. (does not affect jpicker) 2: $.jpicker.list[0].color.active.val('hex', '', this); //set color black , input value 000000, instead of empty string 3: $.jpicker.list[0].color.active.val(null, '', this); //does nothing none of 3 methods seems behave properly. in advance. this works me :) $.jpicker.list[0].color.active.val('v', null); here example: http://jsfiddle.net/3up7n/
Read more

.htaccess - htaccess convert request to clean url and add slash at the end of the url -

-
ok , searched more 4 days , more 20 posts here in stach or in websites without kind of success first here htaccess file rewriteengine on rewriterule ^([a-za-z0-9_]+)/?$ index.php?page=$1 [nc] rewriterule ^([a-za-z0-9_]+)\/([a-za-z0-9_]+)\/?$ index.php?page=$1&action=$2 [nc] i tried many codes 1 worked me can call request , works me www.example.com/pagename => www.example.com/index.php?page=pagename here questions , please provide me information "in detail" understand code well 1- how convert request automatically www.example.com/index.php?page=pagename www.example.com/pagename 2- if tried add slash @ end shows me page without images or styling mean www.example.com/pagename => works www.example.com/pagename/ => doesn't work that's :) for first part need 301 rule this: rewritecond %{the_request} /index\.php\?page=([^\s&]+) [nc] rewriterule ^ /%1? [r=301,l] for second part use absolute path in css, js, images files r
Read more