bootstrap nth:child css property not working - css

i have bunch of cards over here i just want that each first and third card in the row gets margin top of 50px but it is not working with bootstrap but using css it is working?is there any class in bootstrap through which i can do this? i know i can do it manually by doing .mt class but i have a php code which dynamically generate this so it fails over there please have a look at this codepen and help me with this.
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, hic.</div>
</div>
</div>
</div>
</div>
<style>
.card{
margin:30px 20px;
padding:20px;
}
</style>


.card is a child of col-sm-4 so you have to add CSS like below
.col-sm-4:nth-child(odd) .card{
margin: 50px 0 0 0;
background: red;
}

Related

How to Put 4 images aside each other with text beneath each of them?

I want to accomplish this with only HTML and CSS
Another example from bbc.com
I want them to be separated from each other.
this is the code I made so far
.newsitems {
display : inline-block;
}
<div class="newsitems">
<img src="download.jpg" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>
<div class="newsitems">
<img src="download.jpg" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>
<div class="newsitems">
<img src="download.jpg" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>
<div class="newsitems">
<img src="download.jpg" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>

Unfortunately I can't post code now, but it's simple
Just display all divs as block
Add the image inside the div, then
Write the text inside the div as well
Then in CSS just add something like this :
.divname{
position:absolute;
}
Then set the proper value(px) of right/left, top/bottom positions , and set a width and height

You can use flexbox to make it easly and keep it responsive:
main{
display:flex;
flex-flow:row wrap;
}
.newsitems{
width:200px;
}
<main>
<div class="newsitems">
<img src="http://via.placeholder.com/150x150" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>
<div class="newsitems">
<img src="http://via.placeholder.com/150x150" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>
<div class="newsitems">
<img src="http://via.placeholder.com/150x150" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>
<div class="newsitems">
<img src="http://via.placeholder.com/150x150" width="150" height="150" alt="" border="0">
<h2>heading here</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, ornare in lorem et, dignissim pharetra eros.</span>
</div>
</main>

you have two options either you use flex or you can also use the bootstrap class to acheive this (which is basically made up of flex)
1 : Bootstrap code
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-3"> div1 </div>
<div class="col-sm-4 col-md-3 col-lg-3"> div1 </div>
<div class="col-sm-4 col-md-3 col-lg-3"> div1 </div>
<div class="col-sm-4 col-md-3 col-lg-3"> div1 </div>
</div>
2: use pure css/ SCSS (using flex)
<div class="main-container">
<div class="item-container">
<img src=""/>
<div> Text area </div>
</div>
<div class="item-container">
<img src=""/>
<div> Text area </div>
</div>
<div class="item-container">
<img src=""/>
<div> Text area </div>
</div>
<div class="item-container">
<img src=""/>
<div> Text area </div>
</div>
</div>
SCSS
.main-container{
display:flex;
justify-content:center;
width:100%;
align-items:center;
flex-flow:row wrap;
}
.item-container
{
display:flex;
width:20%;
flex-flow:column nowrap;
img
{
width:100%;
height:200px;
}
div
{
font-size:12px;
}
}

css columns: last column is not filled [duplicate]

This question already has answers here:
CSS column-count not respected
(4 answers)
Closed 5 years ago.
I am trying to use column-count css property to render divs in 4 columns.
But when there are 3n items (3, 6, 9...) in columns wrapper, only three columns get filled, and fourth column is empty!
CSS:
.columns {
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
column-count: 4;
}
.item {
display: inline-block;
widtth: 100%;
border: 1px solid red;
}
HTML:
<div class="columns">
<div class="item">Lorem ipsum dolor sit amet 1</div><div class="item">Lorem ipsum dolor sit amet 2</div><div class="item">Lorem ipsum dolor sit amet 3</div>
<div class="item">Lorem ipsum dolor sit amet 4</div><div class="item">Lorem ipsum dolor sit amet 5</div><div class="item">Lorem ipsum dolor sit amet 6</div>
<div class="item">Lorem ipsum dolor sit amet 7</div><div class="item">Lorem ipsum dolor sit amet 8</div><div class="item">Lorem ipsum dolor sit amet 8</div>
</div>
Here is a JSFiddle.
How do I get elements in all 4 columns?

In your example, there are 9 elements of equal size to be distributed into 4 columns. Since they won't fit into 4 columns when the first column contains 2 elements (which would add up to a maximum of 8), the first column will contain 3 elements. That defines the height of the container, so the second column will also get 3 elements, and so there's also 3 remaining for the third column and none for the fourth column. There are four columns, but the fourth one is simply empty...
In other words: The height of the container is determined by the minimum height which is needed to fit all elements into the number of columns. Once that is done, the content will be filled into the columns starting from the left, and each column will get as much content as fits into it.
ADDITION AFTER COMMENT:
To get a distribution of elements as you want it, you have to insert empty DIVs - there is no other way (reason: read above):
.columns {
-webkit-column-count: 4;
/* Chrome, Safari, Opera */
-moz-column-count: 4;
/* Firefox */
column-count: 4;
}
.item {
display: inline-block;
width: 100%;
border: 1px solid red;
}
.empty {
display: inline-block;
}
<div class="columns">
<div class="item">Lorem ipsum dolor sit amet 1</div>
<div class="item">Lorem ipsum dolor sit amet 2</div>
<div class="item">Lorem ipsum dolor sit amet 3</div>
<div class="item">Lorem ipsum dolor sit amet 4</div>
<div class="item">Lorem ipsum dolor sit amet 5</div>
<div class="empty"></div>
<div class="item">Lorem ipsum dolor sit amet 6</div>
<div class="item">Lorem ipsum dolor sit amet 7</div>
<div class="empty"></div>
<div class="item">Lorem ipsum dolor sit amet 8</div>
<div class="item">Lorem ipsum dolor sit amet 8</div>
</div>

Try 'flexbox' display: flex and this now no problem :)
https://jsfiddle.net/bnmkzrkx/4/
I hope help :)

It is just a formatting issue. The column CSS is getting confused by the spaces in your code. Someone may be able to give a more technical explenation as to why this happens.
https://jsfiddle.net/bnmkzrkx/1/
.columns {
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
column-count: 4;
}
.item {
display:inline-block;
border: 1px solid red;
}
<div class="columns">
<div class="item">Lorem ipsum dolor sit amet 2</div>
<div class="item">Lorem ipsum dolor sit amet 3</div>
<div class="item">Lorem ipsum dolor sit amet 4</div>
<div class="item">Lorem ipsum dolor sit amet 5</div>
<div class="item">Lorem ipsum dolor sit amet 6</div>
<div class="item">Lorem ipsum dolor sit amet 7</div>
<div class="item">Lorem ipsum dolor sit amet 8</div>
<div class="item">Lorem ipsum dolor sit amet 8</div>
</div>

bootstrap column will not extend to the bottom of the page

I would like to know how I can get the sidebar on this bootstrap page to extend all the way to the bottom like the main column on the right. height:vh doesn't seem to work. Neither does height:100%.
Is this a bug in Bootstrap? I have never encountered this problem before. The sidebar has less content than the main sections, but I need for it to extend all the way to the bottom of the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Column Test</title>
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="border:2px solid red; margin:20px 0 20px 0; height:100%">
<div class="row" style="border:2px solid black; height:100%">
<!-- left-side (sidebar) -->
<div class="col-xs-3" style="background-color: orange; height:100vh;">
<div class="sidebar-container" style="border: 1px solid blue;">
<h5 class="grey">TITLE 1</h5>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<hr>
</ul>
<h5>TITLE 2</h5>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<hr>
</ul>
<h5>TITLE 3</h5>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
</div>
</div>
<!-- /leftside (sidebar) -->
<!--right side (content)-->
<div class="col-xs-9" style="background-color:pink; height:100%;">
<div class=" row advertisement-container">
<div class="col-md-1" ></div>
<div class="col-md-10">
<h4>advertisement</h4>
<div class="advertisement"></div>
</div>
<div class="col-md-1"></div>
</div>
<div class="row">
<h3 class="col-md-12">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</h3>
<div class="cme">
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-1">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-2">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-3">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-4">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Stroke Systems of Care: Improving Outcomes</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-5">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Stroke Systems of Care: Improving Outcomes</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-6">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Stroke Systems of Care: Improving Outcomes</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-7">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Stroke Systems of Care: Improving Outcomes</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-8">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Stroke Systems of Care: Improving Outcomes</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-9">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Stroke Systems of Care: Improving Outcomes</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-10">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-11">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-12">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-13">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-14">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-15">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-16">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-17">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 cme-item cme-item-18">
<div class="cme-item-top">
<div class="cme-item-image">
<div class="cme-image-overlay">
<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="line"></div>
<p class="bottom-text">3 Parts | 3 Credits</p>
</div>
</div>
</div>
<div class="cme-item-bottom">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
<div class="line"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
</div>
</div>
</div>
</div>
<div class=" row advertisement-container margin-bottom-20">
<div class="col-md-1" ></div>
<div class="col-md-10">
<h4>advertisement</h4>
<div class="advertisement"></div>
</div>
<div class="col-md-1"></div>
</div>
</div>
<!--/right side-->
</div>
</div>
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>**strong text**

Slick Slider slide overflow issue

I am trying to scale my slides on hover. But if i enable the overflow of the wrapper, it overflows in x-axis as well, i only want it to overflow vertically.
Please see the codepen: http://codepen.io/faranali9/pen/qRPXGq
HTML:
<div class="wrapper">
<div class="container slider">
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
<div class="slide">
<img src="http://www.lorempixel.com/400/200/" alt="" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eligendi ipsum molestiae nam voluptatum.</div>
</div>
</div>
</div>
CSS:
.wrapper{
padding:0 30px;
}
img{
max-width:100%;
}
.slide{
transition:all 0.3s;
transform-origin:center;
}
.slide:hover{
transform:scale(1.3);
}
.description{
display:none;
}
.slide:hover .description{
display:block;
}
JS:
$('.slider').slick(
{
slidesToShow:5,
arrows:true
});

I think you should be scaling the img instead of the .slide. I also added some padding to the .slide to accommodate the top overflow.
https://codepen.io/anon/pen/egGyKw

Adjust div height based on its content

I'm working on building mega menu. I have trouble when arrange div.
Here's the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mega Menu Layout Test</title>
<style>
h1
{
margin:0px;
font-size:16px;
}
.wrapper
{
position:absolute;
width:400px;
background:#CCC;
}
.category
{
float:left;
margin:10px;
width:180px;
}
.subcategory
{
}
</style>
</head>
<body>
<div class="wrapper" >
<div class="category">
<h1>Lorem Ipsum 1</h1>
</div>
<div class="category">
<h1>Lorem Ipsum 2</h1>
</div>
<div class="category">
<h1>Lorem Ipsum 3</h1>
<div>
Dolor Sit Amet
</div>
</div>
<div class="category">
<h1>Lorem Ipsum 4</h1>
<div>
Dolor Sit Amet
Consectetuer
Adipiscing Elit
</div>
</div>
<div class="category">
<h1>Lorem Ipsum 5</h1>
</div>
<div class="category">
<h1>Lorem Ipsum 6</h1>
<div>
Dolor Sit Amet
Phasellus Congue
Fringilla Accumsan
Praesent aliquam
Suspendisse non purus
</div>
</div>
<div class="category">
<h1>Lorem Ipsum 7</h1>
<div>
Dolor Sit Amet
Consectetuer
Adipiscing Elit
</div>
</div>
<div class="category">
<h1>Lorem Ipsum 8</h1>
<div>
Dolor Sit Amet
Consectetuer
Adipiscing Elit
</div>
</div>
</div>
</body>
</html>
Produces output like this:
This menu create dynamically so im difficult to set fixed height each div
Is better way How to remove empty space between Lorem Ipsum 3 and Lorem Ipsum 5; Lorem Ipsum 5 and Lorem Ipsum 7 ?

I answer my own question:
(1) Hard way: use a jQuery Masonry
(2) Simple way: Add new div for each colum, here the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mega Menu Layout</title>
<style>
h1
{
margin:0px;
font-size:16px;
}
.wrapper
{
position:absolute;
width:400px;
background:#CCC;
}
.category
{
float:left;
margin:10px;
width:90%;
}
.col
{
float:left;
width:45%
}
</style>
</head>
<body>
<div class="wrapper" >
<div class="col">
<div class="category">
<div>
<h1>Lorem Ipsum 1</h1>
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 2</h1>
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 3</h1>
Dolor Sit Amet
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 4</h1>
Dolor Sit Amet
Consectetuer
Adipiscing Elit
</div>
</div>
</div>
<div class="col">
<div class="category">
<div>
<h1>Lorem Ipsum 5</h1>
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 6</h1>
Dolor Sit Amet
Phasellus Congue
Fringilla Accumsan
Praesent aliquam
Suspendisse non purus
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 7</h1>
Dolor Sit Amet
Consectetuer
Adipiscing Elit
</div>
</div>
<div class="category">
<div>
<h1>Lorem Ipsum 8</h1>
Dolor Sit Amet
Consectetuer
Adipiscing Elit
</div>
</div>
</div>
</div>
</body>
</html>
and here the output:

I would remove the spaces, yes. The other way, you'll need some wrapping div's for each 'row' you have.

Resources