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
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 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 am trying to achieve this:
I set a max-width to my paragraph, and I want the two images to have the same height as the paragraph. But the problem is I have a complex flexbox design, as shown below.
Red and green boxes are divs with display: flex property, and blue boxes are content. I made this schema to make the whole thing responsive for small landscape screens (sorry my 2nd drawing looks like it's on mobile).
Large screens:
Small screens:
So here is what I have right now, with height: 100% on the images:
Is there a way to do this in pure CSS? I tried javascript but there are conflicts between flexbox and JS, which lead to this: video of how my JS/CSS conflict looks like
Thanks!
body {
min-height: 100vh;
position: relative;
justify-content: center;
align-items: center;
padding: 1em;
background-color: cornsilk;
}
#row1 {
display: inline-flex;
justify-content: center;
align-items: center;
}
#row1 #row1_col1 {
display: inline-flex;
}
#row1 #row1_col1 #photo {
margin-right: 2em;
margin-right: 2em;
}
#row1 #row1_col1 p {
background-color: coral;
height: fit-content;
width: fit content;
text-align: justify;
width: 31em;
margin-right: 0px;
margin-left: 0px;
}
#row1 #map {
margin-left: 2em;
}
<div id="row1">
<div id="row1_col1">
<img src="http://via.placeholder.com/400x400" id="photo" class="about_imgs">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing. <br> <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Uot enim ad minim veniam, quis nostrud. <br> <br>
xcepteur sint occaecat cupidatat non proiden.
</p>
</div>
<img src="http://via.placeholder.com/1053x526" id="map" class="about_imgs">
</div>
There are several ways to do this, first of all, you should make both of used align-items property have flex-start attribute just like this: align-items: flex-start; as I did in the below snippet to make sure all your items begin from the same place (keep in mind this is optional and for making sure all your items will begin from the same certain point in the UI, and if you don't want to do this you can skip this), the second thing you must consider is the p tag does the default margin from top and bottom so to override it with margin: 0; in the p tag itself. The last and important thing at all you should define a fixed height for your p tag also, and make sure your photos wouldn't pass a certain point with the max-height property, so you have to add this property to both of your images. You can see the results below:
body {
min-height: 100vh;
position: relative;
justify-content: center;
align-items: center;
padding: 1em;
background-color: cornsilk;
}
#row1 {
display: inline-flex;
justify-content: center;
align-items: flex-start;
}
#row1 #row1_col1 {
display: inline-flex;
justify-content: center;
align-items: flex-start;
max-height: 100px;
}
#row1 #row1_col1 #photo {
max-height: 200px;
margin-right: 2em;
}
#row1 #row1_col1 p {
background-color: coral;
height: fit-content;
width: fit content;
text-align: justify;
width: 31em;
height: 200px;
margin: 0;
}
#row1 #map {
max-height: 200px;
margin-left: 2em;
}
<div id="row1">
<div id="row1_col1">
<img src="http://via.placeholder.com/400x400" id="photo" class="about_imgs">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing. <br> <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Uot enim ad minim veniam, quis nostrud. <br> <br> xcepteur
sint occaecat cupidatat non proiden.
</p>
</div>
<img src="http://via.placeholder.com/1053x526" id="map" class="about_imgs">
</div>
NOTE: I just used 200px for the fixed height for more illustration it could be whatever you want to.
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>