In the following html code I created a row with two columns.The first column i have an image and on the second I have my heading and a paragraph.
<div class="row">
<div class="col-6">
<img src="image/beds.jpg" alt="">
</div>
<div class="col-6">
<h2>Nevex has the experiencce</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates velit, inventore praesentium. Delectus nulla, voluptates excepturi earum minima eligendi cumque ullam, opdfgdtio nostrum ipsa maiores cupiditate facilis sint debitis aliquid. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia id beatae nostrum ducimus possimus, odit eligendi fuga perspiciatis placeat nisi facilis unde adipisci illo fugit doloremque, at porro magni, perferendis?</p>
</div>
</div>
And next is my styling code:
.row {
margin: 0 -10px;
margin-bottom: 10px;
}
.row:last-child {
margin-bottom: 0;
}
[class*="col-"] {
padding: 10px;
}
#media all and ( min-width: 600px ) {
.row {
display: table;
table-layout: fixed;
width: 100%;
}
[class*="col-"] {
display: table-cell;
}
.col-1{
width:100%;
}
.col-6{
width:50%;
}
}
How can I alter the size of the image with responsiveness and align the content of both columns?
Meaning that the image would decrease a bit in terms of height and the content of the other column would also be in the middle of the div.
one solution is to use image as a background to that div, and once you do it, you can give it a width:100%.
If you are using bootstrap, you can add the class="img-responsive" and it will automatically adapt to the width of the screen
Related
I want to make 3 blocks with flex.
the first must occupy an entire column and the other 2 must be arranged in the second column with 50% of the height each. the first of the second column being an image, I would like the third, which contains only text, to be the same height.
unfortunately, even if this text block seems to have the same size as my image, the size of the 1st column is limited to the end of the text in this block.
.superposition {
display: flex;
width: 70%;
}
.block-orange {
background-color: #F26522;
color: white;
padding: 10px;
flex: 0 0 30%;
}
.superposition .flex-col {
display: flex;
flex-direction: column;
}
.superposition div div {
flex: 0 0 50%;
}
.bg-white {
background-color: yellow;
color: #627188;
}
.bg-grey{
background-color: grey;
}
<section class="superposition">
<div class="block-orange">
<h2>bright ass orange</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque sunt possimus tenetur porro aliquam, tempora itaque aperiam perspiciatis reiciendis dignissimos assumenda odit incidunt sit voluptatem quae laudantium. Accusamus, cum at?</p>
</div>
<div class="flex-col">
<div class="bg-grey">
<img src="img/header-soleil.png" alt="couché de soleil">
</div>
<div class="bg-white">
<h2>finaly a layout that blows your head off</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Totam quod excepturi laboriosam vero numquam tenetur corporis iusto magni quaerat eaque dolore, assumenda unde est nostrum saepe fugiat nam doloremque esse.
</p>
</div>
</div>
</section>
why the first column (block-orange) does not adapt in height to the second column?
It seems that you want a grid in which:
Content can expand column height.
Column heights always match.
Two rows are each 50% column height.
This sounds like a "two-dimensional" layout, controlled by both row and column.
Building such layouts with flexbox will likely be a struggle and/or produce fragile layouts.
For reference, see Relationship of grid layout to other layout methods:
do I only need to control the layout by row or column – use a flexbox
do I need to control the layout by row and column – use a grid
Also see Equal height rows in CSS Grid Layout.
I recommend a grid layout instead.
Here's a demonstration:
body {
margin: 0;
}
.superposition {
display: grid;
grid-template-columns: 30% 40%;
grid-auto-rows: 1fr;
}
.block-orange {
background-color: orange;
grid-row: 1/3;
}
.bg-grey {
background-color: grey;
}
.bg-white {
background-color: yellow;
}
.bg-grey img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cellpad {
box-sizing: border-box;
padding: 1em;
}
<section class="superposition">
<div class="block-orange cellpad">
<h2>bright orange</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque sunt possimus tenetur porro aliquam, tempora itaque aperiam perspiciatis reiciendis dignissimos assumenda odit incidunt sit voluptatem quae laudantium. Accusamus, cum at?</p>
</div>
<div class="bg-grey">
<img src="https://fakeimg.pl/440x320/282828/eae0d0/" alt="">
</div>
<div class="bg-white cellpad">
<h2>finally a layout that blows your mind</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Totam quod excepturi laboriosam vero numquam tenetur corporis iusto magni quaerat eaque dolore, assumenda unde est nostrum saepe fugiat nam doloremque esse.
</p>
</div>
</section>
To achieve the result you are looking for, one approach would be to apply
flex-direction: column;
to the entire .superposition parent <div>, in combination with:
flex-wrap: wrap;
which will ensure that if .block-orange occupies 100% of the height of .superposition, then .bg-grey will follow it by starting at the top of .superposition, to the right of .block-orange.
i.e. The divs are still wrapping but they are wrapping horizontally, rather than wrapping vertically.
Working Example:
.superposition {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 70%;
height: 500px;
}
.block-orange {
flex: 1 0 100%;
width: 30%;
padding: 0 10px;
color: white;
background-color: #F26522;
}
.bg-grey,
.bg-white {
flex: 0 0 50%;
width: 70%;
padding: 0 10px;
}
.bg-white {
color: #627188;
background-color: yellow;
}
.bg-grey {
background-color: grey;
}
<section class="superposition">
<div class="block-orange">
<h2>bright ass orange</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque sunt possimus tenetur porro aliquam, tempora itaque aperiam perspiciatis reiciendis dignissimos assumenda odit incidunt sit voluptatem quae laudantium. Accusamus, cum at?</p>
</div>
<div class="bg-grey">
<img src="img/header-soleil.png" alt="couché de soleil">
</div>
<div class="bg-white">
<h2>Finally, a layout that blows your head off</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.Totam quod excepturi laboriosam vero numquam tenetur corporis iusto magni quaerat eaque dolore, assumenda unde est nostrum saepe fugiat nam doloremque esse.</p>
</div>
</section>
I'm a beginner Web Developer and I've recently started using Flexbox.
I find it is a great tool to use however I have a slight problem.
I have an image I want to put on my site, with a column of text beside it to the right.
As you can see from the code below I have created a wrapper div, with two nested divs inside it.
I have set the display attribute to 'flex' in the wrapper div and set the flex property to '1' for both of the divs inside. I thought this would make both of my divs take up 50% of the space each, but instead it seems like the image takes up more space than it should.
I've used an example image from Pexels. I'm wondering if the actual size of the raw image has an affect on this? For example do I have to manually resize all my photos before putting them on a site, or is there a way to have the image take up 50% of the width at all times, while having the text take up the other 50%, using flexbox?
Sorry if this post is hard to understand. Appreciate your help!
.wrapper
{
display: flex;
border: 3px solid red;
}
.image-div
{
flex: 1;
}
.text-div
{
flex: 1;
}
<div class="wrapper">
<div class="image-div">
<img src="https://images.pexels.com/photos/4403924/pexels-photo-4403924.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
</div>
<div class="text-div">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati.</p>
</div>
</div>
Try this:
.wrapper {
display: flex;
border: 3px solid red;
}
.image-div {
flex: 1;
background-color: red;
width: 100%;
}
.image-div>img {
width: 100%;
}
.text-div {
flex: 1;
background-color: yellow;
width: 100%;
}
<div class="wrapper">
<div class="image-div">
<img src="https://images.pexels.com/photos/4403924/pexels-photo-4403924.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
</div>
<div class="text-div">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati.
</p>
</div>
</div>
You just have to set the width of the image-div and the text-div to 100%. This way, they will take 50% of the screen width.
Next, we have to set the width of the image inside the image-div to 100%. This way, it will take the whole width of it's parent div. And the same will be for the text div.
Hope it helps
Adding image width in your CSS fixes the issue:
.image-div img { width: 100%; }
You need to set a max-width and height for your image like this:
.image-div img {
max-width: 100%;
max-height: 100%;
}
Heres the example:
.wrapper
{
display: flex;
border: 3px solid red;
}
.image-div
{
flex: 1;
}
.image-div img {
max-width: 100%;
max-height: 100%;
}
.text-div
{
flex: 1;
}
<div class="wrapper">
<div class="image-div">
<img src="https://images.pexels.com/photos/4403924/pexels-photo-4403924.jpeg?cs=srgb&dl=silhouette-of-mountain-under-cloudy-sky-during-sunset-4403924.jpg&fm=jpg">
</div>
<div class="text-div">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati.</p>
</div>
</div>
Set your image as position: absolute, stretched to the full extent of it's parent DIV element, and use object-fit to adapt the actual image to a desired value like contain or cover.
Doing so the image will adapt to the area which size is dictated by the text content in the other flex: 1 DIV element:
.wrapper {
display: flex;
border: 3px solid red;
}
.wrapper>* {
position: relative;
flex: 1;
}
.image-div img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="wrapper">
<div class="image-div">
<img src="//placehold.it/300x400&text=Some+image">
</div>
<div class="text-div">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati.</p>
</div>
</div>
This is a common case in a layout. I need the content width to be 1170 pixels and the content to be centered on the page. However, in some cases I want to stretch the blocks to the full width. How do I do it right?
There is my example:
<div class="page__wrapper">
<header class="header">
<!-- .header__header-content.header-content>.header-content__header-top.header-top -->
<div class="wrapper-try1"><div class="wrapper-try1__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio labore debitis voluptates quisquam, earum nemo, ipsam consequuntur cum rem, sint, nulla repellendus. Repellendus ea distinctio similique fuga dolores consequatur minima..</div></div>
<div class="try2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo autem et nihil consequuntur incidunt veritatis est, earum deleniti vel rem. Minus ad, tenetur enim repellendus molestias vel possimus voluptas alias soluta atque eum officia facilis quia magni recusandae expedita, vitae numquam porro ipsum repudiandae. Ipsam perspiciatis est unde laboriosam eligendi.</div>
</header>
</div>
and CSS:
.page__wrapper{
position: absolute;
top: 0;
left: 0;
}
.wrapper-try1__content,
.try2{
width: 1170px;
margin: 0 auto;
}
.wrapper-try1{
background-color: #000000;
width: 100vw;
margin-bottom: 10px;
}
.wrapper-try1__content{
color: #ffffff;
}
It's should looks like this:
Only one change can resolve this:
.wrapper-try1__content,
.try2{
max-width: 1170px;
margin: 0 auto;
}
If you want different width in different size of window like mobile devices etc. then you can use media query css like
#media screen and (max-width: 992px) {
.wrapper-try1__content,
.try2{
max-width: 1170px;
margin: 0 auto;
}
}
For more info please check https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
feel free to rephrase my question title, I couldn't think of how to word it correctly.
Having some CSS related issues.I have a row element (not to be confused with bootstrap this is separate). and inside this I have two columns.
the columns are both dynamic in the sense that on resize they change height. how can I get the divs to match the tallest element.
I am trying to find a way to do this with Pure CSS. Hopefully the image below explains my theory more
My real example is below, I need the first column ( the one with the line in ) to match the height of the form div both contained within the row
Two alternatives:
CSS tables
.row {
display: table;
width: 500px; /* for demo */
background-color: #eee;
border-spacing: 5px;
}
.col {
display: table-cell;
vertical-align: top;
padding: 5px;
border: 1px solid red;
}
.col1 {
width: 100px;
}
<div class="row">
<div class="col col1">
short column
</div>
<div class="col col2">
long column. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi, fugit commodi exercitationem, ipsam ex molestiae quaerat necessitatibus laborum ea rem obcaecati, quae nemo impedit officia debitis corporis eaque maiores. Nobis, possimus! Libero, at. Maxime sint vitae, dolor praesentium nihil rem suscipit quos quas provident quae repellendus vero, nobis odit?
</div>
</div>
And using CSS Flexbox
.row {
display: flex;
align-items: stretch;
width: 500px;
}
.col {
margin: 5px;
padding: 5px;
border: 1px solid red;
}
<div class="row">
<div class="col col1">
short column
</div>
<div class="col col2">
long column. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi, fugit commodi exercitationem, ipsam ex molestiae quaerat necessitatibus laborum ea rem obcaecati, quae nemo impedit officia debitis corporis eaque maiores. Nobis, possimus! Libero, at. Maxime sint vitae, dolor praesentium nihil rem suscipit quos quas provident quae repellendus vero, nobis odit?
</div>
</div>
This is obviously stripped down to the bare essentials, mileage may vary depending on your design and it's responsiveness.
Maybe I'm overlooking something I don't know hehe.. But the point is this I have two columns beside each other. One, the left, should be the master of the height of the columns wrap, the right, which contains an img, should not be counted in height for the wrap's height... I can't use fixed heights, not even with Jquery or something cause the layout should change if the user drags his browser window smaller.. Thanks!
So my code is like
<div class="column_wrap">
<div class="column">
Some text
</div>
<div class="column">
IMG
</div>
</div>
Example of what I want to achieve
If the image is not to contribute to the height/width it would need to be either a background image or absolutely positioned.
I've assumed that the two columns will have equal width for this scenario and I have used flexbox to ensure that the columns are also equal height.
Absolute Position
The image need an additional wrapper which is the same size as the second column like so:
* {
box-sizing: border-box;
}
.column_wrap {
display: flex;
margin: 10px auto;
bordeR: 1px solid grey;
}
.column {
flex: 0 0 50%;
position: relative;
overflow: hidden;
}
.imgwrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.imgwrap img {
max-width: 100%;
}
<div class="column_wrap">
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis rem, repudiandae dolores ea, exercitationem quod quos distinctio voluptate. Ratione doloribus fugiat quis eaque quia modi numquam laudantium temporibus veritatis praesentium aliquid expedita dolores, voluptates sequi, natus eum dolorum maxime. Earum iure quasi odit excepturi rerum, debitis repellat enim veniam impedit.
</div>
<div class="column">
<div class="imgwrap">
<img src="http://lorempixel.com/output/fashion-q-c-640-480-8.jpg" alt="" />
</div>
</div>
</div>
Codepen Demo
Background Image
* {
box-sizing: border-box;
}
.column_wrap {
display: flex;
margin: 10px auto;
bordeR:1px solid grey;
}
.column {
flex:0 0 50%;
position: relative;
overflow: hidden;
}
.column:nth-child(2) {
background-image: url(http://lorempixel.com/output/fashion-q-c-640-480-8.jpg);
background-size: cover;
}
<div class="column_wrap">
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis rem, repudiandae dolores ea, exercitationem quod quos distinctio voluptate. Ratione doloribus fugiat quis eaque quia modi numquam laudantium temporibus veritatis praesentium aliquid expedita
dolores, voluptates sequi, natus eum dolorum maxime. Earum iure quasi odit excepturi rerum, debitis repellat enim veniam impedit.
</div>
<div class="column">
</div>
</div>
Codepen Demo