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>
Related
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>
Here is my codepen with the problem : http://codepen.io/Golgota/pen/gwvGGj
And my CSS :
.bloc {
background-color:white;
float:left;
width:100%;
margin: 10px;
padding: 10px;
height: 500px;
}
img {
max-width:100%;
max-height:100%;
}
#media all and (min-width: 40em) {
.bloc {
float: left;
width: 31%;
margin: 10px;
height: 500px;
}
}
I have 3 responsive div .bloc I would like to keep them at the same height. The problem comes from the images which have different sizes.
Is there a way to have 3 .bloc with the same height without changing the images' resolutions or scrolling ?
Cheers !
/* item styles */
.item-image {
position: relative;
overflow: hidden;
padding-bottom: 50%;
border: 1px solid #ddd;
}
.item-image img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.item-content {
padding: 15px;
background: #72cffa;
}
.item-text {
position: relative;
overflow: hidden;
height: 100px;
}
/* centering styles for jsbin */
html,
body {
width: 100%;
height: 100%;
}
html {
display: table;
}
body {
display: table-cell;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Css aspect ratio to have images of same height</title>
<meta name="description" content="Css aspect ratio to have images of same height">
<!-- include bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4 col-sm-4">
<div class="item-image">
<img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" class="img-responsive">
</div>
<div class="item-content">
<div class="item-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="item-image">
<img src="http://s11.favim.com/orig/160919/forum-communaute-topic-9808-hd-putlocker-watch-hell-or-high-water-online-full-movie-1080p-Favim.com-4740061.jpeg" class="img-responsive">
</div>
<div class="item-content">
<div class="item-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="item-image">
<img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg" class="img-responsive">
</div>
<div class="item-content">
<div class="item-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec velit nulla. Cras finibus mollis dolor, ac rhoncus diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin gravida iaculis orci eget malesuada. Morbi pulvinar, purus sit amet porta laoreet, quam orci fermentum leo, in interdum ligula elit id magna. Nam justo massa, ultrices eget dictum vitae, porttitor eget eros.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
you can use the object fit, but check the support first,
you can do this,
body {
background-color: orange;
padding: 5%;
margin: auto;
box-sizing: border-box;
}
.block-holder .bloc {
background-color: white;
float: left;
width: 32.66%;
padding: 10px;
height: 100%;
margin: 0;
}
.block-holder .bloc:not(:first-child):not(:last-child){
margin: 0 1%;
}
img {
width: 100%;
height: 50vh;
object-fit: cover;
}
*, *:before, *:after {
box-sizing: border-box;
}
<div class="block-holder">
<div class="bloc">
<img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg">
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora.
<p>
</div>
<div class="bloc">
<img src="http://s11.favim.com/orig/160919/forum-communaute-topic-9808-hd-putlocker-watch-hell-or-high-water-online-full-movie-1080p-Favim.com-4740061.jpeg" />
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora.
<p>
</div>
<div class="bloc">
<img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg" />
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora.
<p>
</div>
</div>
Try this. I just changed the image min-height into pixels rather than %.
body {
background-color:orange;
padding: 5%;
margin:auto;
}
.bloc {
background-color:white;
float:left;
width:100%;
margin: 10px;
padding: 10px;
height: 500px;
}
img {
max-width:100%;
min-height: 270px;
}
#media all and (min-width: 40em) {
.bloc {
float: left;
width: 31%;
margin: 10px;
height: 500px;
}
}
<div class="bloc">
<img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg">
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora.
<p>
</div>
<div class="bloc">
<img src="http://s11.favim.com/orig/160919/forum-communaute-topic-9808-hd-putlocker-watch-hell-or-high-water-online-full-movie-1080p-Favim.com-4740061.jpeg"/>
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora.
<p>
</div>
<div class="bloc">
<img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg"/>
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora.
<p>
</div>
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>
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