jquery - bootsrap grid system distort on mobile view -
<div class = "container"> <div class="row"> <div class="col-lg-6" > <div id="carousel"> <br><br><br> <!-- <div id="wrapper">--> <img src="<?php echo $pic1 ;?>" alt="c1" width="300" height="495"/> <img src="<?php echo $pic2 ;?>" alt="c2" width="300" height="500" /> <img src="<?php echo $pic3 ;?>" alt="c3" width="300" height="500" /> </div> <div id="thumbnails"> <img src="<?php echo $pic1 ;?>" alt="c1" width="100" height="100" /> <img src="<?php echo $pic2 ;?>" alt="c2" width="100" height="100" /> <img src="<?php echo $pic3 ;?>" alt="c3" width="100" height="100" /> </div> </div> <div class="col-lg-6 text-right" > <div class="well"> <div id="lt"> <h2><?php echo $name ;?></h2> <h2>₹.<?php echo $price;?></h2> <ul> <li><?php echo strstr($screen, '<br>', true);?>cm</li> <li><?php echo $os; ?></li> <li><?php echo $mem; ?></li> <li><?php echo $sim; ?></li> <li><?php echo $pic3 ;?></li> </ul> <input type = "submit" class="btn btn-primary" value = "add2kart" id = "<?php echo $id; ?>"> </div> </div> </div> </div> </div>
when shrink browser check mobile view text comes on slider, want mobile details below mobile slider .. , if view in desktop can see side side .. text coming on slider instead below of .. divided 2 columns distorted on mobile view. want whenever page loads automatically gets adjusted according device used already.
here need update bootstrap class used elements
col-lg-6 col-xs-6
also needs add .img-responsive class both images. these images re-sized @ mobile devices level not split 2 rows.
Comments
Post a Comment