.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;
}
Related
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 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%;
}
I have 3 divs inside a div. When I float them left, they line up side by side. I want to position them for example 500px from top using nth-child in CSS, but then they position themselves on top of each-other. How can solve this problem?
.wrapper{
content:"";
display:block;
clear:both;
}
.sevice p{
margin: 10px 0;
text-align: center;
}
.service{
float: left;
background-color: rgba(255,255,255,0.7);
width: 26%;
margin: 1%;
padding: 1%;
height: 200px;
position: absolute;
}
.service:nth-child(1){
top: 500px;
}
.service:nth-child(2){
top: 500px;
}
.service:nth-child(3){
top: 500px;
}
<div class="wrapper">
<div class="service">
<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
</p>
</div>
<div class="service">
<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
</p>
</div>
<div class="service">
<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
</p>
</div>
</div>
I think I understand what you are saying. You would like them to be positioned side by side, each with the same top value. Floating will position them side by side automatically (if there is room), but if you want to do that with absolute positioning, you need to set both the top and the left values of each element. If you don't set the left value, your elements will all be set all the way to the left. I've revised the snippet below to give an example (and clean up a couple of things).
The general rule is that when you use absolute positioning, you have to specify the x,y coordinates of one of the corners of the element, relative to the analogous corner of its container. To do that, you can use either top or bottom, along with either right or left. So, top and left will position the top left corner of your element relative to the top left corner of the container, bottom and left will do the same with the two bottom left corners, and so on.
If you don't specify, then the values will all be zero, and your element will be in the top left corner of your container. In your case, you didn't specify left or right, so all three elements were positioned at left: 0. In other words, they were all on top of each other as you observed.
/* Don't need any of this
.wrapper{
content:"";
display:block;
clear:both;
}
*/
.service p { /* You had ".sevice p," which is why you didn't get centering */
/* margin: 10px 0;
Don't really need margin with absolute positioning, just change top/left
values to make adjustments to position */
text-align: center;
}
.service {
/* float: left; don't need this any more */
top: 500px; /* put this here if it's the same for all of them */
background-color: rgba(255, 255, 255, 0.7);
width: 26%;
margin: 1%;
padding: 1%;
height: 200px;
position: absolute;
}
.service:nth-child(1) {
left: 0px;
/* here */
}
.service:nth-child(2) {
left: 27%;
/* here */
}
.service:nth-child(3) {
left: 54%;
/* and here */
}
<div class="wrapper">
<div class="service">
<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
</p>
</div>
<div class="service">
<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
</p>
</div>
<div class="service">
<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
</p>
</div>
</div>
I need to do the same of the snnipet, but without height in .footer
.footer {
background: blue;
width: 1200px;
height: 250px; //I NEED TO CHANGE THIS
}
.footer .container {
width: 100%;
height: 100%;
margin: 0 auto;
}
.footer .container .col-25 {
width: 25%;
float: left;
box-sizing: border-box;
height: 100%;
padding: 0 30px;
}
.footer .container .col-25 .footer-col {
color: #fff;
height: 100%;
display: inline-block;
position: relative;
}
.footer .container .col-25 .footer-col h2 {
font-size: 18px;
}
.footer .container .col-25 .footer-col input[type="button"] {
font-size: 16px;
color: #3da6cc;
background: #fff;
padding: 10px;
width: 100%;
border: none;
border-radius: 3px;
position: absolute;
bottom: 10px;
}
.footer .container .col-25 .footer-col.present .text-centered-y {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.footer .container .col-25 .footer-col.present .text-centered-y h1 {
font-style: italic;
}
.footer .container .col-25 .footer-col.present .text-centered-y h1 span {
color: #29738e;
}
.footer .container .col-25 .footer-col.present .text-centered-y h3 {
font-weight: lighter;
}
<div class="footer">
<div class="container">
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<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...</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<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...</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<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...</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
</div>
</div>
Here is the code. Even you don't need to set height. Or you can change too. Or You can extend paragraph/content
.footer {
background: blue;
width: 1200px;
}
.footer .container {
width: 100%;
height: 100%;
margin: 0 auto;
display: flex;
}
.footer .container .col-25 {
width: 25%;
box-sizing: border-box;
padding: 0 30px;
padding-bottom: 50px;
}
.footer .container .col-25 .footer-col {
color: #fff;
height: 100%;
display: inline-block;
position: relative;
}
.footer .container .col-25 .footer-col h2 {
font-size: 18px;
}
.footer .container .col-25 .footer-col input[type="button"] {
font-size: 16px;
color: #3da6cc;
background: #fff;
padding: 10px;
width: 100%;
border: none;
border-radius: 3px;
position: absolute;
top: 100%;
}
.footer .container .col-25 .footer-col.present .text-centered-y {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.footer .container .col-25 .footer-col.present .text-centered-y h1 {
font-style: italic;
}
.footer .container .col-25 .footer-col.present .text-centered-y h1 span {
color: #29738e;
}
.footer .container .col-25 .footer-col.present .text-centered-y h3 {
font-weight: lighter;
}
<div class="footer">
<div class="container">
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<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...</p><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...</p><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...</p><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...</p><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...</p><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...</p><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...</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<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...</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<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...</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
<div class="col-25">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<input type="button" value="Lorem Ipsum" />
</div>
</div>
</div>
</div>
Is there a precise way to get the top and left sides of the paragraph flowing around the floated img to align. When I zoom in and use developer tools they are not perfectly aligned but very close.
http://codepen.io/BennyHH/pen/mPBEvG
* {
box-sizing: border-box;
}
.contain {
width: 500px;
margin: 0 auto;
background-color: silver;
}
.box {
width: 200px;
height: 100px;
background: blue;
float: left;
margin: 15px 15px 0;
}
p {
padding: 15px;
}
<section class="contain">
<div class="box"></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. 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</p>
</section>
It can work like that.
* {
box-sizing: border-box;
}
.contain {
width: 500px;
margin: 0 auto;
background-color: silver;
}
.box {
width: 200px;
height: 100px;
background: blue;
float: left;
margin: 15px 15px 0;
}
p {
padding: 15px;
width: calc(100% - 215px);
margin-left: 215px;
}
<section class="contain">
<div class="box"></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. 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</p>
</section>
just put overflow:hidden on <p> tag
* {
box-sizing: border-box;
}
.contain {
width: 500px;
margin: 0 auto;
background: silver;
}
.box {
width: 200px;
height: 100px;
background: blue;
float: left;
margin: 15px 15px 0;
}
p {
padding: 13px 15px;
overflow: hidden;
/* text-align: justify; */
}
<section class="contain">
<div class="box"></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. 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.</p>
</section>