I have site and using Bootstrap 3. I have problem with my product grid. I need to remove padding from my product list.
www.shop11.kg
Sorry my English.
Thanks
<div class="tab-content">
<!-- Start gridview products -->
<div id="grid-view" class="tab-pane fade in active" role="tabpanel">
<div class="row">
<!-- Start Single profuct -->
<div class="col-md-3 col-sm-4 col-lg-3 col-xs-12">
<div class="single-product">
<div class="product-thumb">
<a href="/product/1264">
<img class="front-img" src="/public/images/noimage/noimage_262.jpeg" alt="img">
</a>
</div>
<div class="product-info">
<div class="pro-title">
<h4>
<a href="/product/1264" title="ARIEL COLOR Стиральный порошок для цветного белья автомат 15 кг ">
ARIEL COLOR Стиральный порошок для цветного белья автомат 15 кг
</a>
</h4>
</div>
<div class="pro-price-ratting">
<div class="price-box">
<span class="price">1580 сом</span>
</div>
</div>
<div class="product-action">
Купить
</div>
</div>
</div>
</div>
<!-- End Single profuct -->
</div>
</div>
<!-- End gridview products -->
You can use display:flex and flex-flow:row wrap in your row class so all the items will be wrapped properly i.e
.row{
margin-right: -15px;
margin-left: -15px;
display: flex;
flex-flow: row wrap;
}
You can give css like
.cp-right-products .tab-pane .col-md-3:nth-child(4n+1) {
clear: both;
}
in tablet view you can give css like
.cp-right-products .tab-pane .col-md-3:nth-child(3n+1) {
clear: both;
}
then all items will be arrange properly.
Related
Hey StackOverFlow Community,
I need to get these images touching together. They will eventually be much larger and touching the edge of the browser. These will be tiles that lead to examples of film work, currently have placeholder images.
I have tried and tried to get these images touching, but I'm not sure what is going on... set the margin and padding to 0.
Here is the code.
HTML
<section id="video-section" class="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h2>Video Production</h2>
<hr class="small">
</div>
<div class="container-fluid full-width has-inner">
<div class="row row-no-gutter">
<div class="col-md-4 nogut">
<div id="image1" class="video-item">
<a href="https://vimeo.com/208403633">
<img id="portfolio1" class="img-full-width" src="img/image1.jpg">
</a>
</div>
</div>
<div class="col-md-4 nogut">
<div id="image2" class="video-item">
<a href="#">
<img class="img-full-width" src="img/image2.jpg">
</a>
</div>
</div>
<div class="col-md-4 nogut">
<div id="image3" class="video-item">
<a href="#">
<img class="img-full-width" src="img/image3.jpg">
</a>
</div>
</div>
</div>
<div class="row row-no-gutter">
<div class="col-md-4">
<div id="image4" class="video-item">
<a href="#">
<img class="img-full-width" src="img/image4.jpg">
</a>
</div>
</div>
<div class="col-md-4">
<div id="image5" class="video-item">
<a href="#">
<img class="img-full-width" src="img/image5.jpg">
</a>
</div>
</div>
<div class="col-md-4">
<div id ="image6" class="video-item">
<a href="#">
<img class="img-full-width" src="img/image6.jpg">
</a>
</div>
</div>
</div>
<!-- /.row (nested) -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
CSS
#video-section {
padding: 10px;
background: #353030;
color: white;
}
.containter-fluid .full-width {
padding-left: 0px;
padding-right: 0px;
overflow-x: hidden;
}
.row .row-no-gutter {
margin: 0px;
padding: 0px;
}
.nogut {
margin: 0px;
}
.img-full-width {
width: 100.5%;
height: auto;
}
Been spending a few hours trying to figure this out, what am I doing wrong?
Paddings are not on rows but on cols.
And it's not margin, so you .nogut will not work :)
You had almost the right answer, try this :
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
Then in your html :
<div class="row no-gutter">
First, right click in browser and use inspect (I think it is best in chrome.) Klick on this icon. Hover over your images and you will able to see which element the gap belongs to. When clicking the element you can in the styles section untick (and add) different css properties and see what happens. Very powerfull tool.
For you, I would also recommend to add padding: 0px; to .nogot and add that class to the second row also.
I am trying to put these two elements side by side. I tried using the float: right or float left, but so far no luck. Here is my html code.
#idd11 {
float: left;
width 100px;
height 100px;
}
<div class="row row-bottom-padded-sm" id="idd11" style="display: block">
<div class="col-md-4 col-md-9 col-xxs-9">
<div class="fh5co-project-item to-animate">
<div class="fh5co-text">
<span><br></span>
<h2 align="center">Items List</h2>
<span><br></span>
<div id="MainMenu">
<div class="list-group panel">
<a href="#item1" class="list-group-item list-group-item-default strong item1" data-toggle="collapse" data-parent="#MainMenu">
Item 1
<i class="fa fa-caret-down"></i>
</a>
<div class="collapse" id="item1"></div>
</div>
<div class="list-group panel">
<a href="#item2" class="list-group-item list-group-item-default strong item2" data-toggle="collapse" data-parent="#MainMenu">
Item 2
<i class="fa fa-caret-down"></i>
</a>
<div class="collapse" id="item2"></div>
</div>
</div>
<h2 id="answer">Footer</h2>
</div>
</div>
<!--Answer A-->
<div class="row row-bottom-padded-sm" id="floating" style="display: block">
<div class="col-md-4 col-md-3 col-xxs-3">
<div class="fh5co-project-item to-animate">
<div class="fh5co-text">
<span><br></span>
<div id="MainMenu">
<h1 id="newAnswer">A</h1>
</div>
</div>
</div>
</div>
</div>
<!--Answer A-->
</div>
</div>
If anybody can help me with it, it would be greatly appreciated. I tried at least :p. I attached a screenshot too: I want to put the A element in the right side of the Items list.
Use display: flex; for the id="MainMenu" . you can then adjust the width and height for its child elements too..
Try learning more about css3 flexbox property
You need three divs to do this. One div to hold the other two child divs. Then float the two child divs next to each other. So put the things you want floated next to each other inside a div and try to float them.
HTML
<div id='parent'>
<div id='child1'>
...
</div> <!-- End child1 div -->
<div id='child2'>
...
</div> <!-- End child2 div -->
</div> <!-- End parent div -->
CSS
#parent{
width: 500px;
}
#child1{
float: left;
width: 40%;
}
#child2{
float: right;
width: 40%;
}
In your code, you have the div you are trying to float to the right within the div you are trying to float to the left. You need to make sure your divs are separated and put into a parent div. Take a look at my example and notice how my divs are separate from each other, but inside a parent div
<div id='parent'> <!-- Look here -->
<div class="row row-bottom-padded-sm" id="idd11" style="display: block">
<div class="col-md-4 col-md-9 col-xxs-9">
<div class="fh5co-project-item to-animate">
<div class="fh5co-text">
<span><br></span>
<h2 align="center">Items List</h2>
<span><br></span>
<div id="MainMenu">
<div class="list-group panel">
<a href="#item1" class="list-group-item list-group-item-default strong item1" data-toggle="collapse" data-parent="#MainMenu">
Item 1
<i class="fa fa-caret-down"></i>
</a>
<div class="collapse" id="item1"></div>
</div>
<div class="list-group panel">
<a href="#item2" class="list-group-item list-group-item-default strong item2" data-toggle="collapse" data-parent="#MainMenu">
Item 2
<i class="fa fa-caret-down"></i>
</a>
<div class="collapse" id="item2"></div>
</div>
<h2 id="answer">Footer</h2>
</div>
</div>
</div>
</div> <!-- End the floating left section -->
<!--Answer A-->
<div class="row row-bottom-padded-sm" id="floating" style="display: block">
<div class="col-md-4 col-md-3 col-xxs-3">
<div class="fh5co-project-item to-animate">
<div class="fh5co-text">
<span><br></span>
<div id="MainMenu">
<h1 id="newAnswer">A</h1>
</div>
</div>
</div>
</div>
</div> <!-- End the floating right Section -->
<!--Answer A-->
</div> <!-- End parent div -->
I'm trying to get a simple grid-like webpage done where there are 8 DIVs spanning across 9 positions.
I've done the following for another part of the website using Bootstrap's grid system without running into any kind of issue (Not the actual content, just a mockup using Photoshop)
What I want to do is this:
Having in mind that when the site is viewed in a mobile device, the order of the elements must be more-or-less preserved. Also Bootstrap standard margins/paddings must be used
Ideally this would be fixed-height DIVs inside of which I'll put an image or some text, depending on which one. The double-height one will contain a picture
<div class="wrapper" id="mypage">
<section class="grid-container service">
<ul class="small-grid grid-col-3">
<li class="col-3">
<div id="subtitle">
SUBTITLE 1
</div>
</li>
<li class="col-3">
<div id="title">
TITLE
</div>
</li>
<li class="col-3">
<div id="subtitle">
SUBTITLE 2
</div>
</li>
<a href="">
<li class="col-3 img-dynamic-size" style="background-image: url('../1.jpg')">
</li>
</a>
<a href="">
<li class="col-3 img-dynamic-size" style="background-image: url('../2.jpg')">
</li>
</a>
Sample code of the 1st screen
Thank you, I can't figure out how to do it after thinking about it for some time...
Okay.. I think I'm following you, I've just drawn up some sample bootstrap code for you to see what I'm talking about. You can achieve this look by just stripping out relevant padding/margin and using the Bootstrap equal-height columns experiment
I have just stripped out all relevant margin and padding on the nested rows in the example but you can obviously play with these values only cancelling out or amending the vertical/horizontal margin/padding as required for your own use.
HTML
<div class="container">
<div class="row">
<div class="col-xs-4 border">
<div id="subtitle">SUBTITLE 1</div>
</div>
<div class="col-xs-4 border">
<div id="title">TITLE</div>
</div>
<div class="col-xs-4 border">
<div id="title">TITLE</div>
</div>
</div>
<div class="row row-eq-height">
<div class="col-xs-8 nopadding">
<div class="row nomargin">
<div class="col-xs-6 nomargin border">Some Content...</div>
<div class="col-xs-6 nomargin border">Some More Content...</div>
</div>
<div class="row nomargin">
<div class="col-xs-6 nomargin border">Some Content Below...</div>
<div class="col-xs-6 nomargin border">Some More Content Below...</div>
</div>
</div>
<div class="col-xs-4 border">Content matching height using the 'row-eq-height' class</div>
</div>
CSS
.nomargin {
margin:0;
}
.nopadding {
padding: 0;
}
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.border {
border: 1px solid red;
min-height: 50px;
}
You can see a jsFiddle here
Dropdown1 and Dropdown2 must float to right. Paging must be to the right.
Paging content may reduce and dropdown1 and 2 must adjust accordingly. I tried different ways but unable to get the solution. In mobile device all the three divs must be centered.
We are using bootstrap. Divs are as follows
<div class="row">
<div class="col-md-3 col-lg-3 col-sm-3 col-xs-12 alpha omega">
<!-- Title -->
</div>
<div class="col-md-6 col-lg-6 col-sm-6 col-xs-12 alpha omega">
<div style="float:right">
<ul class="nav">
<li class="dropdown">
Drop Down 2<b class="caret"></b>
<ul class="dropdown-menu " style="text-transform:uppercase;">
<li data-filterkind="$p" data-filtervalue="DESC">
<a href="./" >1</a>
</li>
<li data-filterkind="$p" data-filtervalue="ASC">
<a href="./" >2</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="pull-right">
<!-- Drop down 2 -->
</div>
</div>
</div>
<div class="col-md-3 col-lg-3 col-sm-3 col-xs-12 alpha omega">
<div style="float:right" >
<!-- Pagination -->
</div>
</div>
</div>
Please suggest
So like this?
HTML
<div class="container">
<div class="row">
<div class="col-sm-6 text-center heading1">
<p> Heading </p><!-- Heading -->
</div>
<div class="col-sm-6">
<div class="row">
<div class="float text-center">
<div class="col-sm-4">
<p> DD1</P><!-- Drop down 1 -->
</div>
<div class="col-sm-4">
<p> DD2</P><!-- Drop down 2 -->
</div>
<div class="col-sm-4">
<p> PAGINATION</P><!-- pagination -->
</div>
</div>
</div>
</div>
</div>
</div>
Then add the following additional stuff to your custom CSS:
#media (min-width: 768px)
{
.float
{
float: right;
}
.heading1
{
text-align: left;
}
}
FYI - The above is bootstrap, but the additional classes are needed to get the custom result you want.
My pen: http://codepen.io/helloworld/pen/yyoJGR
Why is the white separater and the list-grouping flowing through the divs or the parent row?
<div class="container columnStyle">
<div class="row">
<div class="row-same-height">
<div class="col-xs-3 col-xs-height">
<img class="img-responsive" src="http://s7.postimg.org/agarkavmj/whoiswho.png"></img>
</div>
<div class="col-xs-9 col-xs-height" >
<div class="container">
<div class="row">
<div class="page-header">
<h1>Who is who
<p>
<small>Organization & Processes</small>
</p>
</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<ul class="list-group">
<li class="list-group-item">Org Charts </li>
<li class="list-group-item">GAM / KAM Charts</li>
<li class="list-group-item">Process flow</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
.columnStyle{
background: #006AB3;
}
Because you use the class .containermultiple times.
This class has a fixed width of 1170px;
.container {
width: 1170px;
}
you should have only 1 .containerfor the wrapper and then, inside of it, remove the other .container and just use .row
See it in action : http://codepen.io/anon/pen/ogeLRb