Currently how it looks on page:
The goal: I'm trying to make the orange buttons set at an equal height regardless of the (blurred) text above it.
Relevant SCSS:
.medium-2 {
padding: .5rem;
background-color: white;
box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.10);
margin-left: 2.5em;
text-align: center;
float: left;
width: 20%;
height: 450px;
h4 {
font-size: 16px;
border: none;
color: #5d5d5d;
font-family: $font-family-sans-serif;
}
p {
padding-bottom: 10%;
}
.button {
text-align: center;
}
}
Is there a non-hacky way to do this? Right now my only fix is to go into the html.erb file and add in some additional padding-down to the smaller block of p to push the orange button down in place.
Flexbox can easily solve this for you.
.content {
height: 200px;
width: 200px;
border: 1px solid;
display: inline-flex;
flex-direction: column;
margin-right: 10px;
}
p {
margin: 0;
}
button {
margin-top: auto;
width: 200px;
}
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit rerum neque laboriosam perspiciatis sapiente optio ipsam ea magni, accusantium eos quaerat ullam facilis hic quo aperiam a iure porro inventore.</p>
<button>Button</button>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet</p>
<button>Button</button>
</div>
Related
This question already has an answer here:
Why is a flex item limited to parent size?
(1 answer)
Closed 4 months ago.
So I have a flex container with 2 children. And I want to assign a fixed width to the first child. But If I set width: 200px, for some reason it does not work.
Here's my code:
.carousel {
background-color: #087f5b;
color: white;
padding: 32px;
width: 800px;
display: flex;
gap: 88px;
position: relative;
}
.img-container {
width: 200px;
height: 200px;
border: 1px solid;
}
<div class="carousel">
<div class="img-container"> </div>
<blockquote>
<p class="testimonial-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum,
sapiente labore! Accusantium, voluptas omnis dicta facere, porro
mollitia minus ad ut debitis consequuntur.
</p>
</blockquote>
</div>
However, if I use min-width instead of just width, it works alright.
I also found out that if I delete some text from the blockquote, then it works fine.
.carousel {
background-color: #087f5b;
color: white;
padding: 32px;
width: 800px;
display: flex;
gap: 88px;
position: relative;
}
.img-container {
width: 200px;
height: 200px;
border: 1px solid;
}
.carousel blockquote {
flex: 1;
}
<div class="carousel">
<div class="img-container"> </div>
<blockquote>
<p class="testimonial-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum,
sapiente labore! Accusantium, voluptas omnis dicta facere, porro
mollitia minus ad ut debitis consequuntur.
</p>
</blockquote>
</div>
A simple layout that I want to achieve with minimal html tags
Only <img> & <h1> & <p> and no other extra tags
flex + column + wrap
The first column has only one image
The second column contains the title and crossword
The width and height of the parent layer are fixed
The result is that part of the text will overflow
Only add width to <p> to prevent
Is there any way to automatically break text without adding width?
HTML
*{
margin: 0;
padding: 0;
}
.out{
width: 600px;
height: 200px;
border: 1px solid #ccc;
padding: 20px;
margin: 50px auto;
font-family: Verdana;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
img{
/* margin-bottom: 20px; */
margin-right: 20px;
}
p{
line-height: 1.6;
overflow-wrap: break-word;
}
<div class="out">
<img src="https://picsum.photos/id/230/200/200" alt="">
<h1>This is Title</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta iure iusto cupiditate sequi aperiam, nostrum optio ipsam dicta modi officiis eligendi vel. Dignissimos delectus exercitationem nemo. Enim id sed corrupti!</p>
</div>
Another solution as per your expecation:
* {
margin: 0;
padding: 0;
}
.out {
width: 600px;
height: 200px;
border: 1px solid #ccc;
padding: 20px;
margin: 50px auto;
font-family: Verdana;
display: flex;
}
img {
/* margin-bottom: 20px; */
margin-right: 20px;
}
p {
line-height: 1.6;
overflow-wrap: break-word;
margin-left: -200px;
margin-top: auto;
margin-bottom: auto;
}
h1 {
position: relative;
white-space: nowrap;
}
p::before {
content: "";
width: 100%;
}
<div class="out">
<img src="https://picsum.photos/id/230/200/200" alt="">
<h1>This is Title</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta iure iusto cupiditate sequi aperiam, nostrum optio ipsam dicta modi officiis eligendi vel. Dignissimos delectus exercitationem nemo. Enim id sed corrupti!</p>
</div>
Here is my solution
* {
font-family: 'poppins';
}
.card {
display: flex;
padding: 15px;
border: 1px solid #8f8f8f;
}
.content {
margin-left: 10px;
}
.content h6 {
margin-top: 0;
font-size: 32px;
margin-bottom: 5px;
}
<div class="card">
<img src="//via.placeholder.com/150">
<div class="content">
<h6>This is title</h6>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
here, content here', making it look like readable English.</p>
</div>
</div>
I am working on a portfolio project and I am creating the projects section.
The width of the projects section is around 350px so only some of the title could be visible but if the text is not able to fit in 350 px it is making the text overflow vertically but I want it to overflow horizontally.
here is my HTML&CSS:
.project-container {
display: grid;
height: 350px;
width: 350px;
background: #c4c4c4;
margin-bottom: 3%;
}
.project-title{
height: 45px;
width: 100%;
background-color: red;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
}
<div class="project-container">
<h1 class="project-title">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores dignissimos praesentium dolorem saepe velit at libero a consectetur atque molestias.</h1>
</div>
and here is my result when the text can't fit in 350px:
but I want the overflow to be horizontal
white-space: nowrap;
I think you just want this?
.project-container {
display: grid;
height: 350px;
width: 350px;
background: #c4c4c4;
margin-bottom: 3%;
}
.project-title{
height: 45px;
width: 100%;
background-color: red;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
white-space: nowrap;
}
<div class="project-container">
<h1 class="project-title">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores dignissimos praesentium dolorem saepe velit at libero a consectetur atque molestias.</h1>
</div>
You've given your .project-title a width which automatically means the text inside will wrap at the end of the line. If you want it to overflow horizontally instead of vertically, you need to:
Allow space for it to overflow.
Prevent it from wrapping.
This can be achieved by changing .project-title[width] to .project-title[min-width] (meaning the space is at least the width of the container, but may be larger) and setting .project-title[white-space]=nowrap (meaning text is not allowed to break across lines).
.project-container {
display: grid;
height: 350px;
width: 350px;
background: #c4c4c4;
margin-bottom: 3%;
}
.project-title{
height: 45px;
min-width: 100%;
white-space: nowrap;
background-color: red;
margin: 0;
display: flex;
overflow: auto;
}
<div class="project-container">
<h1 class="project-title">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores dignissimos praesentium dolorem saepe velit at libero a consectetur atque molestias.</h1>
</div>
just add white-space: nowrap; to class project-title
I have a parent container:
.flex-container {
padding: 0;
margin: 0;
border: 2px solid silver;
display: flex;
}
inside it I have 2 divs, which have the same size and are always on the same line.
.flex-item {
background: tomato;
height: 100px;
min-width:300px;
margin: 10px;
}
each child div has these properties.
the min-width of each div is 300px, so when the screen is very small and the divs overflow in width to the parent container, I would like the div that exceeds the width of the parent to be displayed below the other.
I think the solution would be done with a mediaquery, but maybe there is another more optimal solution from flexbox and that is why I have asked this question(for example with flex-wrap I achieve that the div that exceeds the width of the parent, is put underneath, but it is no longer on the same line when the resolution is large). Thank you very much
.flex-container {
padding: 0;
margin: 0;
border: 2px solid silver;
display: flex;
}
this is my full code:
<div class="flex-container ">
<div class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</div>
<div class="flex-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam expedita excepturi dolor iusto et architecto, repellat fugit quisquam reprehenderit recusandae alias ut, magni quis cumque earum at laborum, consectetur voluptas.</div>
</div>
https://jsfiddle.net/2x8yLhu0/
.flex-container {
padding: 0;
margin: 0;
border: 2px solid silver;
display: flex;
flex-wrap: wrap;
}
.flex-item {
background: tomato;
height: 100px;
min-width:300px;
margin: 10px;
flex: 0;
}
You can add the flex-wrap:wrap in the container class.
but in this case, you should add it in flex-item class;
Add flex-wrap:wrap; to .flex-container.
Then you probably want to add a max-width to .flex-item or else the boxes will forever be on top of each other as they expand the full width.
.flex-container {
padding: 0;
margin: 0;
border: 2px solid silver;
display: flex;
flex-wrap:wrap; /* Add this so they go on top of each other */
justify-content: space-evenly; /* Center boxes, evenly spaced out in div */
}
.flex-item {
background: tomato;
height: 100px;
min-width:300px;
max-width:500px; /* Add this so they don't stretch full width */
margin: 10px;
}
I have a containing DIV, that I use as part of my responsive grid. It expands to the maximum width I allow which is 1280px, then margins appear for large devices. Here's my CSS + a bit of Less.
.container
{
margin-left:auto;
margin-right:auto;
max-width:1280px;
padding:0 30px;
width:100%;
&:extend(.clearfix all);
}
However on some occasions I'd like to overflow sideways - lets say I have an background image or colour that needs to be full width. I'm not great at CSS - but is it possible to achieve what I want?
The most obvious solution is just to close the container...have your full width div then open a new container. The title 'container' is just a class...not an absolute requirement that it hold everything all at the same time.
In this instance you apply the background color to the full width div and you don't need to apply a color to the internal, restricted div.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
max-width: 80%;
border: 1px solid red;
margin: 0 auto;
}
.fullwidth {
background: orange;
}
header {
height: 50px;
background: #663399;
}
.mydiv {
/* background: orange; */
min-height: 50px;
}
footer {
height: 50px;
background: #bada55;
}
<div class="container">
<header></header>
</div>
<div class="fullwidth">
<div class="container">
<div class="mydiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
</div>
<div class="mydiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
</div>
</div>
</div>
<div class="container">
<footer></footer>
</div>
However, for some they like a single all encompassing container so if all you are after is a background you could use a pseudo-element like so:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
}
.container {
max-width: 80%;
border: 1px solid red;
margin: 0 auto;
}
header {
height: 50px;
background: #663399;
}
.mydiv {
height: 100px;
position: relative;
}
.mydiv:after {
content: "";
position: absolute;
height: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
background: orange;
z-index: -1;
}
footer {
height: 50px;
background: #bada55;
}
<div class="container">
<header></header>
<div class="mydiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
</div>
<footer></footer>
</div>
Support for vw is IE9+ - See http://caniuse.com/#feat=viewport-units
There are cases where actual content is required in the 100% wide div and the container cannot be opened/closed at will (perhaps to retrofit a slider).
In those cases, where the height of the new div is known the same technique can be used to position it as to be 100% viewport wide:
* {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
}
.container {
max-width: 80%;
border: 1px solid red;
margin: 0 auto;
}
header {
height: 50px;
background: #663399;
}
.mydiv {
height: 100px;
position: relative;
}
.myslider {
position: absolute;
height: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
background: orange;
}
footer {
height: 50px;
background: #bada55;
}
<div class="container">
<header></header>
<div class="mydiv">
<div class="myslider">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
</div>
</div>
<footer></footer>
</div>
JSfiddle Demo
Note: there are instances where 100vw can cause overflow and a horizontal scrollbar might appear. overflow-x:hidden on the <body> can attend to that..it should not be an issue because everything else is still inside the container.
I found this super useful trick by using vw on margins (Source)
Example :
.inner-but-full {
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
}
Demo :
html,body {
overflow-x: hidden; /* Prevent scrollbar */
}
.inner-but-full {
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
height: 50px;
background: rgba(28, 144, 243, 0.5);
}
.container {
width: 300px;
height: 180px;
margin-left: auto;
margin-right: auto;
background: rgba(0, 0, 0, 0.5);
}
<div class="container">
<div class="inner-but-full"></div>
</div>
Can I use :
http://caniuse.com/#feat=calc
http://caniuse.com/#feat=viewport-units
<meta charset="UTF-8">
<style type="text/css">p{text-align:center;margin-left:25%;height:300px;width:50%;border:1px solid red;margin-bottom:0;margin-top:0;padding:0;
} body{margin:0;text-align:center;height:100%;width:100%;max-width:100%;max-height:100%;}</style>
<p style="color:yellow;background-color: red;">yep</p><p style="color:red;background-color: yellow;">yep</p><p style="color:white;background-color: blue;">yep</p>