html - New to Boostrap; how can I clean this code up + achieve the desired affect? -


edit: see updated js fiddle link @ bottom of question; achieved desired affect still feel though code can "cleaner"!

i've been experimenting html/css while i'm building first layout using twitter-bootstrap. first question i've had ask, appreciate input.

i feel section of code i'm sharing can "cleaned up." i've got looking mostly want can't think there's easier way achieve want.

see js fiddle.

what i'm trying this: on md+ size screens have 2 rows of diamonds, 4 on first row , 3 on second. when user on small or x-small screen, diamonds shift 3 rows, 3 on first row, 2 on second, , 3 on third. want them spaced apart. seeing js fiddle, i've got looking how want on md+ screens, problem can't seem row 1 , 3 on small , x-small screens align second row.

what best way this? way seems messy. i'd use html/css in case has js disabled. thank you. :)

<section class="container-fluid diamonds"> <div class="row">   <div class="col-md-10 col-md-offset-1">       <div class="xsrow1">         <div class="col-md-3 col-xs-6 xsright no-padding"><img src="http://i57.tinypic.com/o5565j.png"></div>         <div class="col-md-3 col-xs-6 no-padding"><img src="http://i57.tinypic.com/o5565j.png"></div>       </div>       <div class="xsrow2">         <div class="col-md-3 col-xs-4 no-padding"><img src="http://i57.tinypic.com/o5565j.png"></div>         <div class="col-md-3 col-xs-4 no-padding"><img src="http://i57.tinypic.com/o5565j.png"></div>       </div>     </div>   <div class="col-md-8 col-md-offset-2 mdrow2">       <div class="xsrow2">     <div class="col-md-4 col-xs-4 no-padding"><img src="http://i57.tinypic.com/o5565j.png"></div>       </div>       <div class="xsrow3">     <div class="col-md-4 col-xs-6 xsright no-padding"><img src="http://i57.tinypic.com/o5565j.png"></div>     <div class="col-md-4 col-xs-6 no-padding"><img src="http://i57.tinypic.com/o5565j.png"></div>     </div>   </div> </div> </section>   .no-padding {   padding: 0!important;   padding-right: 3px!important;   padding-left: 3px!important;   margin: 0!important; }  .diamonds {   position: relative; }  .diamonds img {   width: 100%;   height: auto; }  @media (max-width: 991px) {   .xsrow1 img, .xsrow3 img {     width: 66.66667%!important;     height: auto;   }   .xsright {     text-align: right;   } }  @media (min-width: 992px) {   .mdrow2 {     position: absolute;     top: 51%;     left:0%;     padding-left: 3%;     padding-right: 3%;   } }

edit: well, figured out method works me, although still feel messy. updated js fiddle here. if has easier method please feel free share. :)

you use preprocessor, add more semantic classes markup , remove layout classes (col etc), mixin styles want classes.


Comments

Post a Comment

Popular posts from this blog

cakephp - simple blog with croogo -

i not problem, made simple blog in croogo, problem is not adding or modifying or delete, because arabic language ?? function add in controller `public function admin_add() { $this->set('title_for_layout', __('add part')); if (!empty($this->request->data)) { $this->part->create(); if ($this->part->save($this->request->data)) { $this->session->setflash(__('the part has been saved'), 'default', array('class' => 'success')); $this->redirect(array('action' => 'index'));//, $this->part->id)); } else { $this->session->setflash(__('the part not saved. please, try again.'), 'default', array('class' => 'error')); } } }` => model `class part extends appmodel { public $name = 'part'; var $belongst...
Read more

How to group boxplot outliers in gnuplot -

i have large set of data points. try plot them boxplot, of outliers exact same value , represented on line beside each other. found how set horizontal distance between outliers in gnuplot boxplot , doesn't much, apparently not possible. is possible group outliers together, print 1 point , print number in brackets beside indicate how many points there are? think make more readable in graph. for information, have 3 boxplots 1 x value , times 6 in 1 graph. using gnuplot 5 , played around pointsize, doesn't reduce distance anymore. hope can help! edit: set terminal pdf set output 'dat.pdf' file0 = 'dat1.dat' file1 = 'dat2.dat' file2 = 'dat3.dat' set pointsize 0.2 set notitle set xlabel 'x' set ylabel 'y' header = system('head -1 '.file0); n = words(header) set xtics ('' 1) set [i=1:n] xtics add (word(header, i) i) set style data boxplot plot file0 using (1-0.25):1:(0.2) boxplot lw 2 lc rgb '#8b0000...
Read more

bash - Performing variable substitution in a string -

i have string contains use of variable, , i'd substitute variable's value string. right best have is #!/bin/bash foo='$name; echo bar' name="the name" expanded="$(eval echo "$foo")" echo "$expanded" which has obvious defects: prints the name bar while i'd print the name; echo bar instead of eval can bash's regex matching bash's string replacement: foo='$name; echo bar' name="the name" [[ "$foo" =~ \$([[:alnum:]]+) ]] && s="${!bash_rematch[1]}" && expanded="${foo/\$${bash_rematch[1]}/$s}" echo "$expanded" name; echo bar
Read more