I want to put spacing between these columns, and in the image I've circled the spots with a red pen.
Here's my code:
.help-icons {
width: 90%;
margin-left: 4rem;
& > div {
height: 5rem;
width: 10rem;
float: left;
margin-left: 30px;
}
}
.help-icons
.icon-one
span.wfs-pie-chart
p.dark-text Lorem ipsum dolor sit amet
p.light-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.icon-two
span.wfs-user
p.dark-text Lorem ipsum dolor sit amet
p.light-text Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque.
.icon-three
span.wfs-git-branch
p.dark-text Lorem ipsum dolor sit amet
p.light-text Mauris nunc congue nisi vitae suscipit tellus mauris a diam.
.icon-four
span.wfs-database
p.dark-text Lorem ipsum dolor sit amet
p.light-text Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum.
.icon-five
span.wfs-trending-up
p.dark-text Lorem ipsum dolor sit amet
p.light-text Egestas sed sed risus pretium quam vulputate dignissim suspendisse in.
.icon-six
span.wfs-cloud
p.dark-text Lorem ipsum dolor sit amet
p.light-text Proin fermentum leo vel orci porta non pulvinar neque laoreet.
I'm using Pug instead of HTML and Sass instead of CSS.
Thanks!
EDIT: Here's an image of what I want to do.
Here's a starter:
.help-icons {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
> div {
flex: 0 0 calc(33.33% - 10px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
margin-bottom: 1rem;
padding: 1rem;
> span {
width: 4rem;
height: 4rem;
display: inline-block;
border-radius: 2rem;
color: white;
font-size: 2.4rem;
}
.dark-text {
font-size: 1.8rem;
}
}
}
Most importantly, don't use float for that layout or your boxes will start jumping around the moment they have different heights.
You might need to put some padding on
& > div {
Related
I'm trying to code this hero treatment.
The title and paragraph text is contained to a grid that has a max-width of 1200px and auto left and right margins.
The top and bottom borders should come from the left edge, but stop at the end of the centered 1200px text box.
I've coded them as HRs thinking that may be more helpful to style.
<div class="hero">
<img src="https://via.placeholder.com/1600x800" alt="">
<div class="hero-text">
<hr>
<div class="contain-to-grid">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget laoreet dolor. Etiam quis leo venenatis, suscipit nisi id, luctus urna. Aenean iaculis justo vel consectetur mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget laoreet dolor. Etiam quis leo venenatis, suscipit nisi id, luctus urna. Aenean iaculis justo vel consectetur mollis.</p>
</div>
<hr>
</div>
</div>
and here's my CSS (this is currently just making the HRs go full-width)
.hero {position: relative;}
.hero img {width: 100%; height: auto;}
.hero-text {position: absolute; bottom: 30px; width: 100%;}
.hero-text hr {border-color: #000; margin: 30px 0;}
.contain-to-grid {width: 100%; max-width: 1200px; margin: 0 auto;}
I'm stumped. Any ideas on how to code this? It does need to be responsive.
Just added '.inner' div and added css. Hope this help you.
.hero {
position: relative;
}
.hero img {
width: 100%;
height: auto;
}
.hero-text {
position: absolute;
bottom: 30px;
width: 100%;
}
.hero-text hr {
border-color: #000;
margin: 30px 0;
}
.contain-to-grid {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.inner {
float: left;
width: 100%;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
}
<div class="hero">
<img src="https://via.placeholder.com/1600x800" alt="">
<div class="hero-text">
<div class="contain-to-grid">
<div class="inner">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget laoreet dolor. Etiam quis leo venenatis, suscipit nisi id, luctus urna. Aenean iaculis justo vel consectetur mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget
laoreet dolor. Etiam quis leo venenatis, suscipit nisi id, luctus urna. Aenean iaculis justo vel consectetur mollis.</p>
</div>
</div>
</div>
</div>
This question already has answers here:
How to create fluid trapezoid image with css?
(3 answers)
Closed 6 years ago.
What is the best way to create a diagonal shape like this with pure CSS maybe only using :after and :before pseudo elements on the content div? Thanks.
maybe it:
.content {
position: relative;
perspective: 100vw;
padding: 30px;
}
.content::before {
content: '';
position: absolute;
z-index: -1;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 130%;
background: tomato;
transform-origin: 100% 50%;
transform: translate(-25%) rotateY(-20deg);
outline: 1px solid transparent;
}
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, laudantium.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate voluptatum recusandae quos soluta impedit! Deleniti facere enim, quia ut quisquam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti eligendi dignissimos adipisci voluptatem voluptate ex maiores consequuntur, cum ducimus voluptatum, ratione similique asperiores reiciendis, odit quis sed. Reprehenderit doloribus, delectus.
</div>
One way is to set a background on a container and rotate with a CSS transform.
Here's a simple example, use as many overlapping containers as needed:
body {
margin: 0;
overflow-x: hidden;
font-family: monospace;
color: #fff;
}
.container {
width: 110vw;
margin-top:10vh;
margin-left: -10vw;
padding-left: 10vw;
background: red;
box-shadow: 0 0 15px rgba(0, 0, 0, .33);
transform: rotate(-5deg);
}
.container-inner {
padding: 10vw;
max-width: 80vw;
transform: rotate(5deg);
}
h1 {
margin-left: 10%;
padding-top: 50px;
}
<div class="container">
<h1>Diagonal Background</h1>
<div class="container-inner">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
</p>
</div>
</div>
I was wondering if the layout I draw on the following image is possible using flexbox and this HTML structure:
<div class="box">
<img src="url..." alt="" />
<h5>Lorem Ipsum</h5>
<p>Lorem Ipsum Dolor Sit Amet...</p>
</div>
It would be great if this could be done with flexbox and without adding more boxes inside.
For fixed image width and height, it's possible. The main idea is in the following snippet.
.box {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: space-between;
height: 300px;
}
.img {
width: 300px; height: 300px;
}
h5, p {
/* 100% - image width - margin between */
width: calc(100% - 300px - 16px);
}
Since the height of the parent is the same as the height of the image, the content overflows and gets wrapped to the right. Then we have to manually set the width because it's otherwise going to 100% of the parent.
.box {
background-color: #ddd;
padding: 16px;
margin-bottom: 24px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 300px;
align-content: space-between;
}
.img {
background-color: #333;
color: #ddd;
width: 300px;
height: 300px;
}
h5, p {
padding: 0;
margin: 0;
background-color: #ccc;
/* 100% - image width - margin between */
width: calc(100% - 300px - 16px);
}
h5 {
font-size: 18px;
margin-bottom: 8px;
}
.box:nth-child(even) .img {
order: 3;
}
<div class="box">
<div class="img"><img></div>
<h5>Lorem Ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. Aliquam posuere ex ut lacus euismod dictum. Proin et ligula posuere leo viverra tempor a in tellus</p>
</div>
<div class="box">
<div class="img"><img></div>
<h5>Lorem Ipsum</h5>
<p>Lorem Ipsum Dolor Sit Amet...</p>
</div>
<div class="box">
<div class="img"><img></div>
<h5>Lorem Ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. Aliquam posuere ex ut lacus euismod dictum. Proin et ligula posuere leo viverra tempor a </p>
</div>
Full-height paragraph
You might want to extend your paragraph all the way to the bottom (maybe add some links there). It's easy to extend it so you can turn p into flexbox to snap something to the bottom, for example (this example not in the demo below, you can only notice this by the gray background).
.box {
/* ... */
justify-content: space-between;
}
p {
flex-grow: 1;
}
.box {
background-color: #ddd;
padding: 16px;
margin-bottom: 24px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 300px;
align-content: space-between;
justify-content: space-between;
}
.img {
background-color: #333;
color: #ddd;
width: 300px;
height: 300px;
}
h5, p {
padding: 0;
margin: 0;
background-color: #ccc;
/* 100% - image width - margin between */
width: calc(100% - 300px - 16px);
}
h5 {
font-size: 18px;
margin-bottom: 8px;
}
p {
flex-grow: 1;
}
.box:nth-child(even) .img {
order: 3;
}
<div class="box">
<div class="img"><img></div>
<h5>Version 2</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. Aliquam posuere ex ut lacus euismod dictum. Proin et ligula posuere leo viverra tempor a in tellus</p>
</div>
<div class="box">
<div class="img"><img></div>
<h5>Lorem Ipsum</h5>
<p>Lorem Ipsum Dolor Sit Amet...</p>
</div>
<div class="box">
<div class="img"><img></div>
<h5>Lorem Ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. Aliquam posuere ex ut lacus euismod dictum. Proin et ligula posuere leo viverra tempor a in tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. </p>
</div>
Both versions above breaks when the text cannot fit (try changing browser window size).
Doesn't show all, but never breaks
You can set the max-height for the paragraph if you don't want it to break and clip the text which cannot fit with overflow: hidden.
p {
max-height: 250px;
overflow: hidden;
}
.box {
background-color: #ddd;
padding: 16px;
margin-bottom: 24px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 300px;
align-content: space-between;
justify-content: space-between;
}
.img {
background-color: #333;
color: #ddd;
width: 300px;
height: 300px;
}
h5, p {
padding: 0;
margin: 0;
background-color: #ccc;
/* 100% - image width - margin between */
width: calc(100% - 300px - 16px);
}
h5 {
font-size: 18px;
margin-bottom: 8px;
}
p {
flex-grow: 1;
}
.box:nth-child(even) .img {
order: 3;
}
p {
max-height: 250px;
overflow: hidden;
}
<div class="box">
<div class="img"><img></div>
<h5>Version 3</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. Aliquam posuere ex ut lacus euismod dictum. Proin et ligula posuere leo viverra tempor a in tellus</p>
</div>
<div class="box">
<div class="img"><img></div>
<h5>Lorem Ipsum</h5>
<p>Lorem Ipsum Dolor Sit Amet...</p>
</div>
<div class="box">
<div class="img"><img></div>
<h5>Lorem Ipsum</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. Aliquam posuere ex ut lacus euismod dictum. Proin et ligula posuere leo viverra tempor a in tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. Aliquam posuere ex ut lacus euismod dictum. Proin et ligula posuere leo viverra tempor a in tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. Aliquam posuere ex ut lacus euismod dictum. Proin et ligula posuere leo viverra tempor a in tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis cursus hendrerit. Suspendisse potenti. Aliquam posuere ex ut lacus euismod dictum. Proin et ligula posuere leo viverra tempor a in tellus. </p>
</div>
I am experimenting a bit with calc on css to define some external space (like an external margin)
For example in this 3 column layout, the resulting width of the central column is a bit diferent than the other two, but I can not figure out how to make the text the same width.
There are some requirements I need.
I need to use only padding, not margin.
I can not add padding to the container C3 in this case.
I want to solve it using the logic under calc. I don't know if the percentages are applied first, or I need to define the paddings first to the computer later solve the percentages...
I prefer to use the border-box model, because it is solving me a lot of problems on other places of my code... but probably I can sacrifice this one.
body {
margin: 0;
padding 0;
}
* {
box-sizing: border-box;
}
p {
text-align: justify;
}
.C3 {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.C3>div {
width: 33.33%;
padding: 50px;
}
.C3>div:first-child {
background-color: #DFD;
width: calc(33.33% + 140px);
padding-left: 140px;
}
.C3>div:last-child {
background-color: #FEE;
width: calc(33.33% + 140px);
padding-right: 140px;
}
<section class="C3">
<div>
<p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros.Nunc est augue, varius sagittis aliquam a, mollis et sapien. In mollis adipiscing leo non bibendum.</p>
</div>
<div>
<p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros.</p>
</div>
<div>
<p>3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros. Nunc est augue, varius sagittis aliquam a, mollis et sapien. In mollis adipiscing leo non bibendum.</p>
</div>
</section>
Any ideas?
Since you're using box-sizing: border-box, the width already includes the padding. The 140px are being added twice.
width: 33.33% is all that's needed.
4castle answer made me realize that yes, I was repeating something, but i found it that was the 50px.
So in my margin I needed to substract 50px from the calc, and now I have 90px.
The diference is subtle but now I have the exact same column text size.
body {margin: 0; padding 0;}
*{box-sizing: border-box;}
p {
text-align: justify;}
.C3 {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;}
.C3>div {
width: 33.33%;
padding: 50px;}
.C3>div:first-child {
background-color: #DFD;
width: calc(33.33% + 90px);
padding-left: 140px;}
.C3>div:last-child {
background-color: #FEE;
width: calc(33.33% + 90px);
padding-right: 140px;}
<section class="C3">
<div>
<p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros.Nunc est augue, varius sagittis aliquam a, mollis et sapien. In mollis adipiscing leo non bibendum.</p>
</div>
<div>
<p>2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros.</p>
</div>
<div>
<p>3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et enim justo, vitae vulputate eros. Morbi nec ligula orci. Donec vel risus eros. Nunc est augue, varius sagittis aliquam a, mollis et sapien. In mollis adipiscing leo non bibendum.</p>
</div>
</section>
i am trying to set 3 divs inside the parent div, the parent div will resize after the biggest height of the child divs but i also want the other 2 child divs to take the same size as the biggest one in height.
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
the parent div will be 600px width and no height given so it will expand depending of the child div biggest height.
#parent {
width: 600px;
overflow: auto;
}
.child {
width: 200px;
float: left;
}
This is what i got so far but if the child divs have different heights, the parent div height is the biggest of the child div heights, but the other 2 child divs dont take the height of the parent ( of the biggest child div in height).
Thank you in advance,
Daniel!
This: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks and this: http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/ may help.
One way would be to use the new feature from CSS display: grid
#parent {
display: grid;
width: 100%;
grid-template-columns: auto auto auto;
/* Just for styling */
text-align: center;
}
.child {
/* Just for styling */
box-sizing: border-box;
background-color: lightyellow;
border: 2px dashed red;
padding: 20px;
}
<div id="parent">
<div class="child">This is first</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat dolor ante, eu ultricies eros molestie nec. Fusce laoreet laoreet nibh, vel vehicula nunc varius ut</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat dolor ante, eu ultricies eros molestie nec. Fusce laoreet laoreet nibh, vel vehicula nunc varius utLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat dolor ante, eu ultricies eros molestie nec. Fusce laoreet laoreet nibh, vel vehicula nunc varius ut</div>
</div>
Or another one would be the display: flex.
#parent {
display: flex;
flex-flow: row nowrap;
}
.child {
width: 33.3333%; /* Force the column to be a third of the parent width */
/* Just for styling */
box-sizing: border-box;
background-color: lightyellow;
border: 2px dashed red;
text-align: center;
padding: 20px;
}
<div id="parent">
<div class="child">The first one</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat dolor ante, eu ultricies eros molestie nec. Fusce laoreet laoreet nibh, vel vehicula nunc varius ut</div>
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat dolor ante, eu ultricies eros molestie nec. Fusce laoreet laoreet nibh, vel vehicula nunc varius utLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat dolor ante, eu ultricies eros molestie nec. Fusce laoreet laoreet nibh, vel vehicula nunc varius ut</div>
</div>