I've this code
.container {
width: 960px;
margin: 0 auto;
}
p {
margin: 0;
padding: 0;
}
.col {
width: 50%;
display: inline-block;
}
.col:first-child{
float: left;
}
.col:last-child{
float: right;
}
.text {
background-color: lightblue;
}
<div class="container">
<div class="col">
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam placeat amet dolore asperiores et omnis voluptas dolorum natus nobis. Ad, provident exercitationem tempora vel laudantium iure libero possimus voluptates ipsa.</p>
</div>
<div class="img">
<img src="http://placehold.it/480x150">
</div>
</div>
<div class="col">
<div class="img">
<img src="http://placehold.it/480x50">
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
Without having any height declared. I want my two .col have the same height.
I need to take care about responsive too.
I already try to set a fixed height to my last .text div but it does not help me..
Thanks for your help !
Flexbox can do that:
.container {
width: 960px;
margin: 0 auto;
display: flex;
}
p {
margin: 0;
padding: 0;
}
.col {
border: 1px solid grey;
background:plum;
}
.text {
background-color: lightblue;
}
<div class="container">
<div class="col">
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam placeat amet dolore asperiores et omnis voluptas dolorum natus nobis. Ad, provident exercitationem tempora vel laudantium iure libero possimus voluptates ipsa.</p>
</div>
<div class="img">
<img src="http://placehold.it/480x150">
</div>
</div>
<div class="col">
<div class="img">
<img src="http://placehold.it/480x50">
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
Related
Do you know why, when I resize my browser down and the flex direction is changed to columns, that my images and text no longer sits in the middle and looks left aligned? There's a huge space on the right hand side and I want the content to always sit in the center no matter what size the browser is. I used the obvious tricks like left-align and center etc, but the space remains.
Code below:
HTML:
<body>
<div class="container">
<div class="products">
<div class="product product-1">
<img src="images/product-1.jpg">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta fugit ad in dolores
veniam hic cupiditate aliquam perferendis velit odit.
</p>
</div>
<div class="product product-1">
<img src="images/product-2.jpg">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta fugit ad in dolores
veniam hic cupiditate aliquam perferendis velit odit.
</p>
</div>
<div class="product product-1">
<img src="images/product-3.jpg">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta fugit ad in dolores
veniam hic cupiditate aliquam perferendis velit odit.
</p>
</div>
</div>
</div>
</body>
CSS:
.container {
width: 95%;
max-width: 1280px;
margin: 0 auto;
}
img {
max-width: 100%;
width: 400px;
}
.products {
display: flex;
justify-content: space-evenly;
}
.product-1 {
width: 33%;
margin: 0 0.50em;
}
#media (max-width: 600px) {
.products {
flex-direction: column;
}
.product-1 {
width: 100%;
}
p {
width: 75%;
}
}
You should use flexbox in your product-1 to center items
.product-1 {
display: flex;
flex-flow: column;
align-items: center;
width: 100%;
}
.container {
width: 95%;
max-width: 1280px;
margin: 0 auto;
}
img {
max-width: 100%;
width: 400px;
}
.products {
display: flex;
justify-content: space-evenly;
}
.product-1 {
width: 33%;
margin: 0 0.50em;
}
#media (max-width: 600px) {
.products {
flex-direction: column;
}
.product-1 {
display: flex;
flex-flow: column;
align-items: center;
width: 100%;
}
p {
width: 75%;
}
}
<body>
<div class="container">
<div class="products">
<div class="product product-1">
<img src="images/product-1.jpg">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta fugit ad in dolores
veniam hic cupiditate aliquam perferendis velit odit.
</p>
</div>
<div class="product product-1">
<img src="images/product-2.jpg">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta fugit ad in dolores
veniam hic cupiditate aliquam perferendis velit odit.
</p>
</div>
<div class="product product-1">
<img src="images/product-3.jpg">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta fugit ad in dolores
veniam hic cupiditate aliquam perferendis velit odit.
</p>
</div>
</div>
</div>
</body>
This question already has answers here:
Prevent content from expanding grid items
(3 answers)
Closed 3 years ago.
When using a CSS Grid, I can't seem to manage to make the text-overflow:ellipsis work, even though I am applying it to the dom object containing the text that I want to shorten.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
.grid-item { border: 1px solid red;}
.grid-item .content{
background-color: lightgray;
}
&.with-ellipsis {
.title {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
}
This is the pen where my code is: https://codepen.io/dbugger/pen/qBBKLgX?editors=1100
Set min-width: 0; on the .grid-item. It's an old solution for ellipsis on children of flexbox items (and grid), and you can read more about it here.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.grid .grid-item {
min-width: 0;
border: 1px solid red;
}
.grid .grid-item .content {
background-color: lightgray;
}
.grid.with-ellipsis .title {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.demo {
display: inline-block;
width: 33%;
border: 1px solid red;
}
.demo .content {
background-color: lightgray;
}
.demo .title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<h1>But what happens when you want some content inside the cell to have text-overflow: ellipsis</h1>
<div class="grid with-ellipsis">
<div class="grid-item">
<div class="image">Some image</div>
<div class="content">
<div class="title">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt excepturi obcaecati odio pariatur ipsam doloremque vel labore ipsa explicabo quos.</div>
</div>
</div>
<div class="grid-item">
<div class="image">Some image</div>
<div class="content">
<div class="title">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt excepturi obcaecati odio pariatur ipsam doloremque vel labore ipsa explicabo quos.</div>
</div>
</div>
<div class="grid-item">
<div class="image">Some image</div>
<div class="content">
<div class="title">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt excepturi obcaecati odio pariatur ipsam doloremque vel labore ipsa explicabo quos.</div>
</div>
</div>
<div class="grid-item">
<div class="image">Some image</div>
<div class="content">
<div class="title">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt excepturi obcaecati odio pariatur ipsam doloremque vel labore ipsa explicabo quos.</div>
</div>
</div>
<div class="grid-item">
<div class="image">Some image</div>
<div class="content">
<div class="title">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt excepturi obcaecati odio pariatur ipsam doloremque vel labore ipsa explicabo quos.</div>
</div>
</div>
<div class="grid-item">
<div class="image">Some image</div>
<div class="content">
<div class="title">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt excepturi obcaecati odio pariatur ipsam doloremque vel labore ipsa explicabo quos.</div>
</div>
</div>
</div>
I have a problem with a layout I'm trying to achieve with flexbox. I'd like to offset my columns a little more than the previous one to have a diagonal/stairs effect, but I'd also like them to keep the same height grown to the tallest one as flexbox automagically provides.
At first, I thought to myself: I just need to make them the same height with flexbox and then offset them with margins, but it seems that vertical margins are handled quite differently with flexbox as they push the upper side of the box, but not the whole box... this results in all my columns having their bottoms aligned, but that's not what I'd like to achieve.
Note : I know this can be achieved many other ways like relative positioning, adding padding on the parent, setting a min-height, with JavaScript and others, but I'd like to keep the document flow intact, keep ignoring the object's sizes and avoid using JS. I've also read that an upcoming flex-gap or item-gap would probably solve such issues in the future, but it's still an open issue / idea in the CSS Working Group draft.
Here's a text doodle for documentation's perennity.
Flex Expected
- -
| - | -
| | - | | -
| | | | | |
- - - - | |
- |
-
Here's a live demo of what I want to achieve and the current result with flexbox spec :
*{
box-sizing:border-box;
}
.wrap{
display:flex;
flex-direction: row;
width: 100%;
}
.box{
flex:0 0 33%;
padding:0 10px;
}
.box:nth-child(2){
margin-top: 60px;
}
.box:nth-child(3){
margin-top: 120px;
}
.box-inner{
height: 100%;
text-align:center;
background:#ccc;
border-radius:10px;
padding: 20px;
box-shadow:5px 5px 15px rgba(0,0,0,0.2);
}
.wrap2{
overflow:hidden;
}
.box2{
float:left;
width:33%;
padding: 0 10px;
}
.box2:nth-child(2){
margin-top: 60px;
}
.box2:nth-child(3){
margin-top: 120px;
}
.box-inner2{
min-height:300px;
text-align:center;
background:#ccc;
border-radius:10px;
padding: 20px;
box-shadow:5px 5px 15px rgba(0,0,0,0.2);
}
<h2>Flexbox</h2>
<div class="wrap">
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam eos molestias dicta nemo, accusantium, mollitia iste hic numquam dolorum vero!</div>
</div>
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perferendis.</div>
</div>
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, placeat?</div>
</div>
</div>
<h2>Expected</h2>
<div class="wrap2">
<div class="box2">
<div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam eos molestias dicta nemo, accusantium, mollitia iste hic numquam dolorum vero!</div>
</div>
<div class="box2">
<div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perferendis.</div>
</div>
<div class="box2">
<div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, placeat?</div>
</div>
</div>
Thanks!
Play with bottom margin. See below.
* {
box-sizing: border-box;
}
.wrap {
display: flex;
flex-direction: row;
width: 100%;
}
.box {
flex: 0 0 33%;
padding: 0 10px;
}
.box:nth-child(2) {
margin-top: 60px;
margin-bottom: -60px;
}
.box:nth-child(3) {
margin-top: 120px;
margin-bottom: -120px;
}
.box-inner {
height: 100%;
text-align: center;
background: #ccc;
border-radius: 10px;
padding: 20px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}
.wrap2 {
overflow: hidden;
}
.box2 {
float: left;
width: 33%;
padding: 0 10px;
}
.box2:nth-child(2) {
margin-top: 60px;
}
.box2:nth-child(3) {
margin-top: 120px;
}
.box-inner2 {
min-height: 300px;
text-align: center;
background: #ccc;
border-radius: 10px;
padding: 20px;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}
<h2>Flexbox</h2>
<div class="wrap">
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam eos molestias dicta nemo, accusantium, mollitia iste hic numquam dolorum vero!</div>
</div>
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perferendis.</div>
</div>
<div class="box">
<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, placeat?</div>
</div>
</div>
<h2>Expected</h2>
<div class="wrap2">
<div class="box2">
<div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam eos molestias dicta nemo, accusantium, mollitia iste hic numquam dolorum vero!</div>
</div>
<div class="box2">
<div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perferendis.</div>
</div>
<div class="box2">
<div class="box-inner2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, placeat?</div>
</div>
</div>
I have 6 images, i want to make them responsive when resizing screen.
On medium devices, 2 images must be shown in a row, on small devices 1 image, as well i cannot figure out how to make Heading text responsive too, when resizing it should get smaller, i used max-with for the .overlay-header
Here is my code:
UPDATED:
JsFiddle
HTML:
<div class="container">
<div class="row">
<div class="image-container">
<div class="image-portfolio col-lg-3 col-md-4 col-sm-6">
<div class="img-block">
<img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt="">
</div>
<div class="overlay-header">
<h1>Heading</h1>
</div>
<div class="text-overlay">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p>
</div>
</div>
<div class="image-portfolio col-lg-3 col-md-4 col-sm-6">
<div class="img-block">
<img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt="">
</div>
<div class="overlay-header">
<h1>Heading</h1>
</div>
<div class="text-overlay">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p>
</div>
</div>
<div class="image-portfolio col-lg-3 col-md-4 col-sm-6">
<div class="img-block">
<img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt="">
</div>
<div class="overlay-header">
<h1>Heading</h1>
</div>
<div class="text-overlay">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p>
</div>
</div>
<div class="image-portfolio col-lg-3 col-md-4 col-sm-6">
<div class="img-block">
<img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt="">
</div>
<div class="overlay-header">
<h1>Heading</h1>
</div>
<div class="text-overlay">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p>
</div>
</div>
<div class="image-portfolio col-lg-3 col-md-4 col-sm-6">
<div class="img-block">
<img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt="">
</div>
<div class="overlay-header">
<h1>Heading</h1>
</div>
<div class="text-overlay">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p>
</div>
</div>
<div class="image-portfolio col-lg-3 col-md-4 col-sm-6">
<div class="img-block">
<img src="http://listtoday.org/wallpaper/2015/12/latest-computer-technology-6-widescreen-wallpaper.jpg" alt="">
</div>
<div class="overlay-header">
<h1>Heading</h1>
</div>
<div class="text-overlay">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, minus aliquid. Atque accusamus, minima recusandae unde, velit ea laborum accusantium aut amet consequatur. Quaerat, libero, omnis eos maiores nulla nam!</p>
</div>
</div>
</div>
</div>
</div>
CSS:
.image-container {
margin-top: 50px;
text-align: center;
}
.image-portfolio {
margin:2px;
height: 250px;
width: 30%;
overflow: hidden;
}
.img-block img {
height: 250px;
max-width: 100%;
float: left;
transition: all 0.5s;
}
.overlay-header {
position: absolute;
max-width: 225px;
height: 55px;
background: rgba(202,205,206,.7);
margin-top: 50px;
}
.overlay-header h1 {
line-height: 20px;
}
.text-overlay {
position: relative;
text-align: center;
font-size: 16px;
line-height: 22px;
bottom: 120px;
color: white;
visibility: hidden;
}
.image-portfolio:hover .img-block img {
cursor:pointer;
transform: scale(1.3);
}
.image-portfolio:hover {
cursor:pointer;
}
.image-portfolio:hover .text-overlay {
visibility: visible;
}
.image-portfolio:hover .img-block img {
filter: brightness(40%);
}
As you want to show only 2 images in a row on medium devices, you should use col-md-6 class this means out of 12 columns on the medium device, your one image will take 6 columns.
And then you want only 1 image in a row on small devices, you should use col-sm-12 class this means out of 12 columns on the small device, your one image will take all 12 columns.
col-lg-3 means on a larger device, 4 images will show up in a row.
<div class="image-portfolio col-lg-3 col-md-6 col-sm-12">
For reference
.col-xs = *Extra small devices (ie Phones) (<768px)
.col-sm = Small devices (ie Tablets) (≥768px)
.col-md = Medium devices (ie laptops, or small desktops) (≥992px)
.col-lg = Large devices (ie Desktops) (≥1200px)*
Image Responsive
For making image responsive simply add img-responsive class
<img class="img-responsive" src="link/to/your/image">
For header you have to write css at different widths
#media(max-width:768px){
h1{
font-size:20px;
}
}
something like above
Using flexbox, and based on the following markup, is it possible to get the last item in the list to visually move up and "pack" itself into the available space?
I know this could be accomplished with different markup (3 columns and items within each column), using either floats or flexbox, but I am curious if this is something flexbox can do with this markup.
html,
body {
height: 100%;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.layout {
background-color: yellow;
display: flex;
flex-flow: row wrap;
align-items: flex-start;
}
.layout__item {
background-color: red;
width: 33.33%;
padding-right: 15px;
}
/* Every 3rd item. */
.layout__item:nth-child(3n) {
padding-right: 0;
}
/* Every item after the first 3. */
.layout__item:nth-child(n+4) {
padding-top: 15px;
}
.layout__item-content {
background-color: green;
height: 100%;
}
.layout__item-img {
background-color: blue;
height: 100%;
}
<ul class="layout">
<li class="layout__item">
<div class="layout__item-content">
<div class="layout__item-img" style="height:300px"></div>
<div class="layout__item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quos voluptates impedit optio id, fugit, nobis assumenda eveniet, veniam deserunt eum magni. Voluptates quam, deserunt sit pariatur ducimus omnis eligendi!</div>
</div>
</li>
<li class="layout__item">
<div class="layout__item-content">
<div class="layout__item-img" style="height:100px"></div>
<div class="layout__item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, saepe!</div>
</div>
</li>
<li class="layout__item">
<div class="layout__item-content">
<div class="layout__item-img" style="height: 200px;"></div>
<div class="layout__item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia placeat quidem, illum cumque nisi repellat excepturi iusto aperiam tempore quam.</div>
</div>
</li>
<li class="layout__item">
<div class="layout__item-content">
<div class="layout__item-img" style="height:150px;"></div>
<div class="layout__item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas natus odio quae nam officia libero.</div>
</div>
</li>
<li class="layout__item">
<div class="layout__item-content">
<div class="layout__item-img" style="height: 321px;"></div>
<div class="layout__item-text">Lorem ipsum dolor sit amet.</div>
</div>
</li>
</ul>
The answer to this question is quite simply no.
A good explanation as to why is available on a similar question: Horizontal masonry layout with flexbox CSS only