Hello to all I have one problem and its about grid system,precisely with bootstrap. Here is my code http://codepen.io/WuDangTaoist/pen/gMprya and its all fine till when i change a screen size then its not responsive.I use this for div’s “col-xs-6 col-sm-4” but still its not responsive for mobile devices.Then I realized that is something wrong with my code.I put a content-fluid on a .col and on div called artikal so i changed width from 450px to 100%,then i removed margin left and right.After doing that,all my products are in a one collumn.How to do position of products like this http://www.thecompliancecenter.com/img_temp/labels/laser/lp11b23b_hi.gif .And when a change screen size to be responsive.
If the width is set to a fixed value like 450px, it will never fit on any device less than that size.
Setting width to 100% can make it bigger than the container, because you will add margins and padding to that, making it more than 100%. Instead use width: auto to fill the width of the container, though that is default for block elements anyway, so should not be needed in most cases.
But looking at your gif, it seems you want 2 items on a row, so 100% width makes no sense, it needs to be below 50%.
If you do use % for width, you can use box-sizing: border-box to make that width include the padding.
I don’t use Bootstrap, so some defaults may be different with that, I don’t know.
1 Like
I resolved that problem.I simply removed on class .artikal margin and height:auto; Now its working fine.And in html section i used a grid .col-sm-6 .
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.