I have flexbox with few elemenets, for example paragraph and image. I would like to ignore image height when flexbox height is calculated. I want to image height be equal to max height of others elemenets in div
div{
display: flex;
background-color: pink;
}
p{
width: 200px;
}
img{
max-height: 100%;
}
<div>
<img src="https://dummyimage.com/300.png/"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
You can add the image as a background instead of inline the only downside might be that you will have to give it a defined width but if this is not a problem in your case I would recommend doing it like this.
div{
display: flex;
background-color: pink;
}
.image-wrapper {
background-image: url('https://dummyimage.com/300.png/');
width: 200px;
background-position: center;
background-size: contain;
}
p{
width: 200px;
}
img{
max-height: 100%;
}
<div>
<div class="image-wrapper">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
Try
img{
display: flex
max-height: 100%;
}
Related
Here's what I want to achieve both for desktop and mobile:
And here's how far I've gotten with it
.container {
background-image: url("https://houniqueconstruction.com/wp-content/uploads/2023/02/peng-chen-WFgSotZQECo-unsplash-copy-1024x803.jpg");
background-repeat: no-repeat;
background-size: cover;
min-height:700px;
}
.flexbox {
display:flex;
justify-content:center;
align-items: center;
min-height: 700px;
}
.text-box {
max-width:350px;
background:#f6f6f6;
padding: 30px 20px;
}
<div class="container">
<div class="flexbox">
<div class="text-box">
<h1>Complete Remodeling</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrude dolore magna.</p>
<a>CONTACT US</a>
</div>
</div>
</div>
I tried to achieve a layout with the CSS property background-image, however I lack the knowledge to achieve what I was expecting
For desktop we use margin-left on the container and offset the .text-box in the opposite direction.
For mobile we need to add an absolutely-positioned semi-transparent background element inside .text-box.
body {
background-color: #f6f6f6;
}
.container {
background-image: url("https://houniqueconstruction.com/wp-content/uploads/2023/02/peng-chen-WFgSotZQECo-unsplash-copy-1024x803.jpg");
background-repeat: no-repeat;
background-size: cover;
min-height:700px;
}
.container.desktop {
margin-left: 175px;
}
.flexbox {
display:flex;
align-items: center;
min-height: 700px;
}
.container.mobile .flexbox {
justify-content: center;
}
.text-box {
position: relative;
max-width:350px;
padding: 30px 20px;
}
.container.desktop .text-box {
left: -175px;
}
.text-background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #f6f6f6;
}
.container.mobile .text-background {
opacity: 0.5;
}
.text-content {
position: relative;
z-index: 1;
}
<div class="container desktop">
<div class="flexbox">
<div class="text-box">
<div class="text-background"></div>
<div class="text-content">
<h1>Complete Remodeling</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrude dolore magna.</p>
<a>CONTACT US</a>
</div>
</div>
</div>
</div>
<div class="container mobile">
<div class="flexbox">
<div class="text-box">
<div class="text-background"></div>
<div class="text-content">
<h1>Complete Remodeling</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrude dolore magna.</p>
<a>CONTACT US</a>
</div>
</div>
</div>
</div>
I am using a flexbox on my site to display post previews as tiles. Each one is a fixed size (384*384px) and displays as a grid that fits as many tiles in each row as it can horizontally and it rearranges itself dynamically as the page is resized. This is the current CSS for this:
.post-list { display: flex; flex-wrap: wrap; }
.post-tile { flex: 0 0 384px; width: 384px; height: 384px; margin: 10px; padding: 30px; box-sizing: border-box; overflow: hidden; border-radius: 32px; }
I would like it to do one extra thing though if possible: If the window is narrower than the width of one of the tiles I would like it to resize the tiles down to fit in the screen while also keeping the height and width the same, but I don't know how to accomplish this.
Here is a JS Fiddle with this CSS filled out with a few basic tiles.
Currently you have it like this
flex: 0 0 384px
Change it to
flex: 0 1 384px
That second value is flex-shrink. It will solve the problem.
You are probably looking for flex-shrink: 1; which allows your item to shrink.
Note: You probably also want to play around with your padding for the .post-list element
See Example below
.post-list {
display: flex;
flex-wrap: wrap;
/*below two properties are for demonstration only*/
max-width: 200px;
border: 1px solid black;
}
.post-tile {
flex: 0 0 384px;
width: 384px;
height: 384px;
margin: 10px;
padding: 30px;
box-sizing: border-box;
overflow: hidden;
border-radius: 32px;
background-color:lightgrey;
flex-shrink: 1; /* this allows to shrink your item */
}
<ul class="post-list">
<li class="post-tile">
<h3>
Title 1
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li class="post-tile">
<h3>
Title 2
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li class="post-tile">
<h3>
Title 3
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li class="post-tile">
<h3>
Title 4
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
<li class="post-tile">
<h3>
Title 5
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</li>
</ul>
.I want the breakpoint at 800px to place all three review divs side by side with 20px of padding around them but for whatever reason, it's not working. Can someone tell me where I went wrong? Currently, Reviewer 1 and 2 are stacked on top of each other to the left side of the container, while Review 3 is all by it's lonesome on the right. How do I change this?
Code snippet below:
HTML:
<div class="wrapper">
<div class="card-1">
<h3>Reviewer 1</h3>
<p class="border">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam."</p>
</div>
<div class="card-2">
<h3>Reviewer 2</h3>
<p class="border">"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam."</p>
</div>
</div>
<div class="card-3">
<h3>Reviewer 3</h3>
<p class="border">"Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam."</p>
</div>
</div>
CSS:
.cards {
display: flex;
flex-direction: column;
align-items: center;
}
#media screen and (min-width: 800px) {
.cards {
display: flex;
flex-direction: row;
padding: 10px;
border: 1px black solid;
}
.border {
width: 75%;
padding: 10px;
margin: auto;
}
}
So I figured it out ironically enough. I just changed the .wrapper div as follows:
.wrapper {
display: flex;
flex-direction: row;
}
I am learning flexbox and still not sure I fully understand how all the parts fit together. I would like to vertically align these columns so that the gray boxes line up with each other: http://codepen.io/anon/pen/EPZQZq (I updated the Codepen HTML/CSS to better reflect the challenge with my responsive layout.)
Some additional context: this is for a site that is responsive, so the width: 800px may be a bit misleading. And the gray bars can't be replaced by borders, they're meant to be stand-ins for actual content.
Code:
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
#container {
width: 800px;
font: 14px/22px "helvetica neue", sans-serif;
display: flex;
}
.item {
width: 33.33%;
display: flex;
flex-direction: column;
padding: 0 10px;
}
.item .blob {
width: 100%;
height: 20px;
background: #dedede;
}
<div id="container">
<div class="item">
<h1>Title TK</h1>
<div class="blob"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="item">
<h1>A longer title TK TK TK</h1>
<div class="blob"></div>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="item">
<h1>A title that nobody could have possibly accounted for</h1>
<div class="blob"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
You want to control the height of .item h1. You can do it by either:
.item h1 {
min-height: 90px;
max-height: 90px;
}
or, the flexbox way:
.item h1 {
flex-basis: 90px;
flex-shrink: 0; /* if you don't want it to shrink */
flex-grow: 0; /* if you don't want it to grow */
}
Flexbox can't align or equalise items that do not share a common parent...so there is no native flexbox method here.
The header would need to be the same height in each column.
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
#container {
width: 90%;
font: 14px/22px"helvetica neue", sans-serif;
display: flex;
}
.item {
width: 33.33%;
display: flex;
flex-direction: column;
padding: 0 10px;
border: 1px solid grey;
}
.item h1 {
height: 120px;
}
.item .blob {
width: 100%;
height: 20px;
background: #dedede;
}
<div id="container">
<div class="item">
<h1>Title TK</h1>
<div class="blob"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="item">
<h1>A longer title TK TK TK</h1>
<div class="blob"></div>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="item">
<h1>A title that nobody could have possibly accounted for</h1>
<div class="blob"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
I want to place my link button in the bottom right corner of its containing div and have the text wrap around it. The only way I can think is to use the code below (absolute positioning) and put break tags in my paragraph to force the text not to overlap the image button. Is there CSS that can acheive the same without needing to use the break tags in the HTML? The word 'aliqua' should drop onto the next line (below).
Here is my code:
#teaser-cell {
float: left;
width: 164px;
height: 164px;
}
#teaser-cell .link-button {
display: block;
width: 35px;
height: 35px;
position: relative;
bottom: 35px;
left: 129px;
background: url(sprite.png) 70px;
}
<div id="teaser-cell">
<span>Teaser 1</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="link-button" href="#"></a>
</div>
Try this http://jsfiddle.net/A26bG/:
#teaser-cell {
width: 180px;
}
#teaser-cell .link-button {
display: inline-block;
width: 35px;
height: 35px;
background: url(...) 70px;
float: right;
}
<div id="teaser-cell">
<span>Teaser 1</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<a class="link-button" href="#"></a>
</p>
</div>