How to fit a image which size is defined by % in non-static size div? Here is what i did for this moment, photo is commented, to show you how layout look like when it is looking like i want, if you uncomment photo, whole layout will be broken. I want all units to be same type, or similar, and just find the way to fit this photo in div without destroying whole layout.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
}
/* == WHOLE PAGE ==*/
.landing{
width: 100%;
height: 100%;
display: flex;
flex-flow: column;
}
/* HEADER */
.header{
background: #F582A7;
flex: 0 1 10%;
display: flex;
justify-content: center;
align-items: center;
}
.header > ul{
display: flex;
flex-direction: row;
list-style: none;
}
.header > ul > li{
padding: 0 10px 0 10px;
}
/* CONTENT */
.mainContent{
background: #F10086;
flex: 1 1 auto;
display: flex;
flex-flow: column-reverse;
}
.bottomContent{
width: 100%;
height: 50%;
flex: 1 1 50%;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.topContent{
width: 100%;
height: 50%;
flex: 1 1 50%;
}
.topContent > img{
max-height: 100%;
max-width: 100%;
}
/* TABS */
.tabs{
background: #711A75;
flex: 0 1 18%;
display: flex;
justify-content: space-around;
align-items: center;
}
.tab{
height: 80%;
width: 30%;
background: #180A0A;
border-radius: 15px;
}
</style>
</head>
<body>
<div class="landing">
<div class="header">
<ul>
<li>Test 0</li>
<li>Test 0</li>
<li>Test 0</li>
</ul>
</div>
<div class="mainContent">
<div class="bottomContent">
<h1>Lorem, ipsum dolor.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum recusandae rem dolorum consectetur repellendus molestiae amet quo reprehenderit possimus eaque.</p>
</div>
<div class="topContent">
<!--<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Vector-based_example.svg/1024px-Vector-based_example.svg.png" alt="circle">-->
</div>
</div>
<div class="tabs">
<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>
</div>
</div>
</body>
</html>
To cover whole width of the page, use object-fit (the image height is specified is arbitrary units, em in this example.
That answer does it without object-fit, but uses the image as a background instead. That can be used when the image is just “decorational” – you can't have alt text on it etc.
Both variants are used in very similar way.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
}
/* == WHOLE PAGE ==*/
.landing{
width: 100%;
height: 100%;
display: flex;
flex-flow: column;
}
/* HEADER */
.header{
background: #F582A7;
flex: 0 1 10%;
display: flex;
justify-content: center;
align-items: center;
}
.header > ul{
display: flex;
flex-direction: row;
list-style: none;
}
.header > ul > li{
padding: 0 10px 0 10px;
}
/* CONTENT */
.mainContent{
background: #F10086;
flex: 1 1 auto;
display: flex;
flex-flow: column-reverse;
}
.bottomContent{
width: 100%;
height: 50%;
flex: 1 1 50%;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.topContent{
width: 100%;
height: 50%;
flex: 1 1 50%;
}
.topContent > img{
max-height: 100%;
max-width: 100%;
}
/* TABS */
.tabs{
background: #711A75;
flex: 0 1 18%;
display: flex;
justify-content: space-around;
align-items: center;
}
.tab{
height: 80%;
width: 30%;
background: #180A0A;
border-radius: 15px;
}
</style>
</head>
<body>
<div class="landing">
<div class="header">
<ul>
<li>Test 0</li>
<li>Test 0</li>
<li>Test 0</li>
</ul>
</div>
<div class="mainContent">
<div class="bottomContent">
<h1>Lorem, ipsum dolor.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum recusandae rem dolorum consectetur repellendus molestiae amet quo reprehenderit possimus eaque.</p>
</div>
<div class="topContent">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Vector-based_example.svg/1024px-Vector-based_example.svg.png" alt="circle" style="object-fit: cover; height: 10em; width: 100%">
</div>
</div>
<div class="tabs">
<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>
</div>
</div>
</body>
</html>
Rather than use an image tag, you may want insert the image as a background using CSS. Then you can set the background-size property to something appropriate like contain or cover.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
}
/* == WHOLE PAGE ==*/
.landing{
width: 100%;
height: 100%;
display: flex;
flex-flow: column;
}
/* HEADER */
.header{
background: #F582A7;
flex: 0 1 10%;
display: flex;
justify-content: center;
align-items: center;
}
.header > ul{
display: flex;
flex-direction: row;
list-style: none;
}
.header > ul > li{
padding: 0 10px 0 10px;
}
/* CONTENT */
.mainContent{
background: #F10086;
flex: 1 1 auto;
display: flex;
flex-flow: column-reverse;
}
.bottomContent{
width: 100%;
height: 50%;
flex: 1 1 50%;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.topContent{
width: 100%;
height: 50%;
flex: 1 1 50%;
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Vector-based_example.svg/1024px-Vector-based_example.svg.png');
background-repeat: no-repeat;
background-size: contain;
}
.topContent > img{
max-height: 100%;
max-width: 100%;
}
/* TABS */
.tabs{
background: #711A75;
flex: 0 1 18%;
display: flex;
justify-content: space-around;
align-items: center;
}
.tab{
height: 80%;
width: 30%;
background: #180A0A;
border-radius: 15px;
}
</style>
</head>
<body>
<div class="landing">
<div class="header">
<ul>
<li>Test 0</li>
<li>Test 0</li>
<li>Test 0</li>
</ul>
</div>
<div class="mainContent">
<div class="bottomContent">
<h1>Lorem, ipsum dolor.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum recusandae rem dolorum consectetur repellendus molestiae amet quo reprehenderit possimus eaque.</p>
</div>
<div class="topContent">
</div>
</div>
<div class="tabs">
<div class="tab"></div>
<div class="tab"></div>
<div class="tab"></div>
</div>
</div>
</body>
</html>
Related
I have a basic html markup, where i am trying to use minimal html wrappers to achieve the design.
So my goal is without adding more html wrappers, using flex, force 3rd flex item to start from second column like here
1 2
3
Of course, we can achieve adding padding/margin-left for the 3rd element, but I am looking for a solution with css flex and using minimal html markup.
Here is the screenshot what I am trying to achieve
Basically the title and text should start from the same column.
See the code snippet and sandbox link, if you want to test it more
body {
margin: 0;
padding: 0;
}
.container {
background-color: grey;
overflow: auto;
padding: 20px;
align-items: center;
display: flex;
position: relative;
column-gap: 15px;
flex-wrap: wrap;
width: 100%;
}
.content {
display: flex;
flex-wrap: wrap;
}
.logo-image {
align-self: flex-start;
padding-top: 10px;
order: 1;
}
.headline {
color: white;
order: 2;
padding-left: 10px;
}
.text {
color: white;
font-size: 16px;
margin-bottom: 20px;
order: 3;
}
.btn {
display: flex;
width: 100%;
}
button {
align-items: center;
background-color: black;
color: white;
flex: 0 0 90%;
justify-content: center;
margin: 0;
}
<div class="container">
<div class="content">
<h4 class="headline">
Block Title
</h4>
<img src="https://www.fillmurray.com/200/200" width="50px" class="logo-image" alt="img" />
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
aliquid sit, cupiditate
</p>
</div>
<div class="btn">
<button>click</button>
</div>
Ideally, you would use CSS Grid for this layout.
Something like this (no changes to the HTML):
.container {
display: flex;
flex-wrap: wrap;
background-color: grey;
column-gap: 15px;
padding: 20px;
}
.content {
display: grid;
grid-template-columns: 50px 1fr;
}
.logo-image {
padding-top: 10px;
order: 1;
}
.headline {
color: white;
order: 2;
padding-left: 10px;
}
.text {
grid-column: 2;
color: white;
font-size: 16px;
margin-bottom: 20px;
order: 3;
}
.btn {
display: flex;
width: 100%;
}
button {
align-items: center;
background-color: black;
color: white;
flex: 0 0 90%;
justify-content: center;
margin: 0;
}
body {
margin: 0;
padding: 0;
}
<div class="container">
<div class="content">
<h4 class="headline">
Block Title
</h4>
<img src="https://www.fillmurray.com/200/200" width="50px" class="logo-image" alt="img" />
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente aliquid sit, cupiditate
</p>
</div>
<div class="btn">
<button>click</button>
</div>
But if you can only use flex, then you'll have to:
Define a height on the container.
Set the flex-direction to column.
Set flex-wrap to wrap.
Give the first column (containing the image) full height, so it creates a column and forces its siblings into the second column.
(Again, no changes to the HTML.)
.container {
display: flex;
flex-wrap: wrap;
background-color: grey;
column-gap: 15px;
padding: 20px;
height: 200px; /* new (for demo purposes) */
}
.content {
display: flex;
flex-direction: column; /* new */
flex-wrap: wrap;
}
.logo-image {
flex-basis: 100%; /* new */
object-fit: contain; /* new (for proper image rendering) */
object-position: top; /* new (for proper image rendering) */
align-self: flex-start;
padding-top: 10px;
order: 1;
}
.headline {
color: white;
order: 2;
padding-left: 10px;
}
.text {
color: white;
font-size: 16px;
margin-bottom: 20px;
order: 3;
}
.btn {
display: flex;
width: 100%;
}
button {
align-items: center;
background-color: black;
color: white;
flex: 0 0 90%;
justify-content: center;
margin: 0;
}
body {
margin: 0;
padding: 0;
}
<div class="container">
<div class="content">
<h4 class="headline">Block Title</h4>
<img src="https://www.fillmurray.com/200/200" width="50px" class="logo-image" alt="img" />
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
aliquid sit, cupiditate
</p>
</div>
<div class="btn">
<button>click</button>
</div>
If you can't define a height on the container, then use the Grid version.
/* added this --v */
.content {
display: grid; /* ----- new ------- */
grid-template-columns: auto 1fr; /* ----- new ------- */
grid-template-rows: 1fr 1fr; /* ----- new ------- */
column-gap: 15px; /* ----- new ------- */
}
<body>
<div class="container">
<div class="content">
<!-- bring the img element above of h4 because we want it to be in the first item of our grid layout -->
<img src="download.png" width="50px" class="logo-image" alt="img" />
<h4 class="headline">
Block Title
</h4>
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
aliquid sit, cupiditate
</p>
</div>
<div class="btn">
<button>link</button>
</div>
</div>
</body>
1.you need to use a two-dimensional layout which is grid (instead of flexbox)
2.you need to use grid for the element that has .content class
.content { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr 1fr; column-gap: 15px; } <br>
3.you need to define the p element that has .text class to start from the 2nd column and ends in the 3rd column with this code: grid-column: 2/3;
and here is the result : https://codesandbox.io/s/brave-zhukovsky-7g12bj?file=/style.css:566-583
I have a basic html markup, where i am trying to use minimal html wrappers to achieve the design.
The button on the bottom should't align, it should always stay in the bottom.
So my goal is without adding more html wrappers, using flex, force a flex item(button) to drop to the next line. and the block title stay next to the image.
You can see what i mean checking it on mobile breakpoints.
Here are the screenshots with flex-wrap: wrap
And here is with flex-wrap: nowrap
As you see, in first example button is in the bottom as it should be, but block title is dropped to the next line, And in the second example (flex-wrap: wrap) block title is positioned correct, but the button is not in the bottom.
Here is the sandbox link and code example
body {
margin: 0;
padding: 0;
}
.container {
background-color: grey;
overflow: auto;
padding: 20px;
align-items: center;
display: flex;
position: relative;
column-gap: 15px;
flex-wrap: wrap;
/* //try nowrap */
width: 100%;
}
.logo-image {
align-self: flex-start;
}
.headline {
color: white;
}
.text {
color: white;
font-size: 16px;
margin-bottom: 20px;
}
.btn {
display: flex;
width: 100%;
}
button {
align-items: center;
background-color: black;
color: white;
flex: 0 0 100%;
justify-content: center;
margin: 0;
}
<div class="container">
<img src="download.png" width="50px" class="logo-image" alt="img" />
<span class="content">
<h4 class="headline">
Block Title
</h4>
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
aliquid sit, cupiditate
</p>
</span>
<div class="btn">
<button>link</button>
</div>
</div>
Any help will be appreciated
You can make your span a block level element and set flex-grow to 1 but set flex-basis to something small, like 50% so it tries to be 50% of the width but will grow to fit the width. It then means when shrinking it will try to stay on the same line.
body {
margin: 0;
padding: 0;
}
.container {
background-color: grey;
overflow: auto;
padding: 20px;
align-items: center;
display: flex;
position: relative;
column-gap: 15px;
flex-wrap: wrap;
width: 100%;
}
/* added this --v */
.content {
display: block;
flex: 1 0 50%;
}
.logo-image {
align-self: flex-start;
}
.headline {
color: white;
}
.text {
color: white;
font-size: 16px;
margin-bottom: 20px;
}
.btn {
display: flex;
width: 100%;
}
button {
align-items: center;
background-color: black;
color: white;
flex: 0 0 90%;
justify-content: center;
margin: 0;
}
<div class="container">
<img src="https://www.fillmurray.com/200/200" width="50px" class="logo-image" alt="img" />
<span class="content">
<h4 class="headline">
Block Title
</h4>
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
aliquid sit, cupiditate
</p>
</span>
<div class="btn">
<button>link</button>
</div>
</div>
I have a problem making the page responsive. The property flex-wrap: nowrap is not working properly. Can you please help me to find out where the problem is?
.logo {
text-decoration: none;
color: white;
}
.header {
width: 100%;
max-width: 960px;
min-width: 460px;
min-height: 100px;
margin: 0 auto 30px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
box-sizing: border-box;
}
.logo {
background: black;
width: 150px;
min-height: 50px;
align-items: center;
display: flex;
flex: none;
margin: 0 10px 40px;
justify-content: center;
}
.contnet {
background: black;
min-height: 50px;
font-size: 20px;
color: white;
margin-bottom: 40px;
flex-basis: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.bottom-content {
min-height: 50px;
display: flex;
flex-wrap: wrap;
flex: auto;
background: black;
width: 100%;
color: white;
font-size: 20px;
justify-content: center;
align-items: center;
}
.main {
width: 100%;
max-width: 960px;
min-width: 430px;
display: flex;
flex: auto;
margin: auto;
box-sizing: border-box
}
.grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.griditem {
margin-bottom: 30px;
display: flex;
flex-basis: calc(33.33% - 20px * 2/3);
flex-wrap: wrap;
}
.img {
width: 200px;
height: 200px;
background-color: black;
margin: 0 auto;
}
.title {
text-align: center;
}
.grid-content {
flex: 0 1 100%;
}
.text {
text-align: center;
}
.footer {
width: 100%;
background-color: black;
max-width: 960px;
min-width: 460px;
margin: 0 auto;
padding: 15px;
color: white;
text-align: center;
}
.img {
color: white;
}
#media screen and (max-width: 800px) {
.contnet {
display: none
}
.griditem {
flex-wrap: nowrap;
flex-basis: 100%;
}
.img {
flex: 0 0 auto;
}
.griditem:nth-child(even) {
margin: 0 0 0 30px;
order: 2
}
.footer{
display: none
}
.griditem:nth-child(odd) {
margin: 0 30px 0 0;
}
}
<hrader class="header">
Logo
<div class="contnet">Content</div>
<div class="bottom-content">2</div>
</hrader>
<main class="main">
<div class="grid">
<div class="griditem">
<div class="img">1</div>
<div class="grid-content">
<h1 class="title">Title</h1>
<p class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio neque magnam amet, praesentium vel illum error autem voluptatibus veniam consequuntur.</p>
</div>
</div>
</div>
<div class="grid">
<div class="griditem">
<div class="img">2</div>
<div class="grid-content">
<h1 class="title">Title</h1>
<p class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio neque magnam amet, praesentium vel illum error autem voluptatibus veniam consequuntur.</p>
</div>
</div>
</div> <div class="grid">
<div class="griditem">
<div class="grid-content">
<div class="img">3</div>
<h1 class="title">Title</h1>
<p class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio neque magnam amet, praesentium vel illum error autem voluptatibus veniam consequuntur.</p>
</div>
</div>
</div>
</main>
<footer class="footer">
Footer
</footer>
Fiddle: https://jsfiddle.net/q9bcpr4L/
Add flex-wrap to main and flex-basis to grid
.main {
width: 100%;
max-width: 960px;
min-width: 430px;
display: flex;
flex: auto;
flex-wrap:wrap;
margin: auto;
box-sizing: border-box
}
.grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
flex-basis: calc(33.33% - 20px * 2/3);
}
That's what do you want? I:
Moved .title and .text elements inside .grid-content element.
Added flex-wrap: wrap to .main selector.
Fixed some typos.
.logo {
text-decoration: none;
color: white;
}
.header {
width: 100%;
max-width: 960px;
min-width: 460px;
min-height: 100px;
margin: 0 auto 30px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
box-sizing: border-box;
}
.logo {
background: black;
width: 150px;
min-height: 50px;
align-items: center;
display: flex;
flex: none;
margin: 0 10px 40px;
justify-content: center;
}
.content {
background: black;
min-height: 50px;
font-size: 20px;
color: white;
margin-bottom: 40px;
flex-basis: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.bottom-content {
min-height: 50px;
display: flex;
flex-wrap: wrap;
flex: auto;
background: black;
width: 100%;
color: white;
font-size: 20px;
justify-content: center;
align-items: center;
}
.main {
width: 100%;
max-width: 960px;
min-width: 430px;
display: flex;
flex: auto;
margin: auto;
box-sizing: border-box;
}
.grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.griditem {
margin-bottom: 30px;
display: flex;
flex-basis: calc(33.33% - 20px * 2/3);
flex-wrap: wrap;
}
.img {
width: 200px;
height: 200px;
background-color: black;
margin: 0 auto;
}
.title {
text-align: center;
}
.grid-content {
flex: 0 1 100%;
}
.text {
text-align: center;
}
.footer {
width: 100%;
background-color: black;
max-width: 960px;
min-width: 460px;
margin: 0 auto;
padding: 15px;
color: white;
text-align: center;
}
.img {
color: white;
}
#media screen and (max-width: 800px) {
.content {
display: none
}
.main {
flex-wrap: wrap;
}
.griditem {
flex-wrap: nowrap;
flex-basis: 100%;
}
.img {
flex: 0 0 auto;
}
.griditem:nth-child(even) {
margin: 0 0 0 30px;
order: 2
}
.footer {
display: none
}
.griditem:nth-child(odd) {
margin: 0 30px 0 0;
}
}
<header class="header">
Logo
<div class="content">Content</div>
<div class="bottom-content">2</div>
</header>
<main class="main">
<div class="grid">
<div class="griditem">
<div class="img">1</div>
<div class="grid-content">
<h1 class="title">Title</h1>
<p class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio neque magnam amet, praesentium vel illum error autem voluptatibus veniam consequuntur.</p>
</div>
</div>
</div>
<div class="grid">
<div class="griditem">
<div class="img">2</div>
<div class="grid-content">
<h1 class="title">Title</h1>
<p class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio neque magnam amet, praesentium vel illum error autem voluptatibus veniam consequuntur.</p>
</div>
</div>
</div>
<div class="grid">
<div class="griditem">
<div class="img">3</div>
<div class="grid-content">
<h1 class="title">Title</h1>
<p class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Distinctio neque magnam amet, praesentium vel illum error autem voluptatibus veniam consequuntur.</p>
</div>
</div>
</div>
</main>
<footer class="footer">
Footer
</footer>
I know there are similar questions but I can't seem to implement the answers successfully so i'd thought i'd ask to try get an answer for my context.
I'm trying to keep a div with class .product-info fixed on the screen as you scroll down the page, with in it's parent div (.product-info-container). Once the fixed div reaches the bottom of the parent it should stop, i've tried using position:fixed but it fixes the div to the window, not the parent div.
Any help would be appreciated.
HTML:
/* Container */
.product-wrapper {
width: 100vw;
margin: auto;
}
.product-introduction {
height: auto;
min-height: calc(100vh - 140px);
width: 70vw;
min-width: 1400px;
margin: auto;
margin-top: 140px;
margin-bottom: 0;
display: flex;
flex-direction: row;
position: relative;
}
.product-image-grid {
height: auto;
width: 60%;
display: flex;
flex-direction: row;
flex-grow: 1;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: flex-start
}
.image-container {
margin: 10px;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: whitesmoke;
}
.image-container.small {
width: calc(50% - 40px);
height: 500px
}
.Product-Image {
height: 100%;
}
.image-container.large {
width: calc(100% - 10px);
height: 1000px;
}
.product-info-container {
height: 1500px;
min-height: calc(10vh - 140px);
width: calc(550px - 25px);
min-width: calc(550px - 25px);
position: relative;
padding-left: 25px;
}
.product-info {
position: fixed;
height: auto;
width: calc(550px - 20px);
padding: 10px;
}
h1.product-title {
font-family: "Magistral_Bold";
font-size: 32px;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 0;
}
.icon-bar {
width: 50%;
min-width: 300px;
height: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 25px;
margin-bottom: 25px;
}
.intro-feature-icon {
width: 150px;
}
.intro-feature-icon:first-child {
margin-left: 0;
}
.intro-feature-icon:nth-of-type(2) {
width: 100px;
}
.price-bar {
width: 50%;
height: auto;
display: flex;
flex-direction: row;
justify-content: unset;
align-items: flex-end;
}
.price-bar h2 {
margin-left: 0;
margin-right: 50px;
}
.currency-selector {
color: #919191;
font-size: 18px;
margin-bottom: 5px !important;
margin-right: 15px;
cursor: pointer;
}
.currency-selector.selected {
color: black !important;
}
.currency-selector:hover {
text-decoration: underline;
}
.wtb-cta {
width: auto;
padding: 16px 32px;
background: black;
text-align: center;
margin-top: 50px;
margin-bottom: 0;
}
.accordion {
cursor: pointer;
padding: 0;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 50px;
border-bottom: 1px solid black;
}
.accordion:after {
content: '\02795';
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
.active,
.accordion:hover {}
.active:after {
content: "\2796";
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<div class="product-wrapper">
<div class="product-introduction">
<div class="product-image-grid">
<div class="image-container small">
<img src="Images/01-Product-Images/Test-image-1.png" alt="Test Image 1" class="Product-Image One">
</div>
<div class="image-container small">
<img src="Images/01-Product-Images/Test-image-2.png" alt="Test Image 2" class="Product-Image Two">
</div>
<div class="image-container large">
<img src="Images/01-Product-Images/Test-image-3.png" alt="Test Image 3" class="Product-Image Three">
</div>
</div>
<div class="product-info-container">
<div class="product-info">
<h1 class="product-title no-shadow">Hinterland</h1>
<h4 class="h4-black no-shadow">DRY2DRY™ TRI-LAMINATE JACKET</h4>
<div class="icon-bar">
<img src="Images/02-Icons/Tech-Icons/Materials/TriLaminate/TriLaminateD2D-square-black.png" alt="Tri Laminate Logo" class="intro-feature-icon">
<img src="Images/02-Icons/Tech-Icons/CE-Icons/ce-approved.png" alt="CE Approved Logo" class="intro-feature-icon">
</div>
<p class="black no-shadow">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis velit aperiam soluta maiores fugiat facere dolorum obcaecati, repellat commodi eveniet deserunt doloribus, esse magnam alias qui eos officia reprehenderit? Dolorum.
</p>
<div class="price-bar">
<h2 class="h2-min black no-shadow">£299.99</h2>
<p class="currency-selector no-shadow selected"> £ </p>
<p class="currency-selector no-shadow "> $ </p>
</div>
<a href="#">
<div class="wtb-cta">
<h3>WHERE TO BUY</h2>
</div>
</a>
<button class="accordion">
<h3 class="black no-shadow">DESCRIPTION</h3>
</button>
<div class="panel">
<p class="no-shadow black">Lorem ipsum...</p>
</div>
<button class="accordion">
<h3 class="black no-shadow">ADDITIONAL INFO</h3>
</button>
<div class="panel">
<p class="no-shadow black">Lorem ipsum...</p>
</div>
</div>
</div>
</div>
</div>
I hope this is what u r expecting.
Add position:sticky and top:0 to .product-info class.
.product-info {
position:sticky;
top:0px;
height: auto;
width: calc(550px - 20px);
padding: 10px;
}
/* Container */
.product-wrapper {
width: 100vw;
margin: auto;
}
.product-introduction {
height: auto;
min-height: calc(100vh - 140px);
width: 70vw;
min-width: 1400px;
margin: auto;
margin-top: 140px;
margin-bottom: 0;
display: flex;
flex-direction: row;
position: relative;
}
.product-image-grid {
height: auto;
width: 60%;
display: flex;
flex-direction: row;
flex-grow: 1;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: flex-start
}
.image-container {
margin: 10px;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: whitesmoke;
}
.image-container.small {
width: calc(50% - 40px);
height: 500px
}
.Product-Image {
height: 100%;
}
.image-container.large {
width: calc(100% - 10px);
height: 1000px;
}
.product-info-container {
height: 1500px;
min-height: calc(10vh - 140px);
width: calc(550px - 25px);
min-width: calc(550px - 25px);
position: relative;
padding-left: 25px;
}
.product-info {
position:sticky;
top:0px;
height: auto;
width: calc(550px - 20px);
padding: 10px;
}
h1.product-title {
font-family: "Magistral_Bold";
font-size: 32px;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 0;
}
.icon-bar {
width: 50%;
min-width: 300px;
height: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 25px;
margin-bottom: 25px;
}
.intro-feature-icon {
width: 150px;
}
.intro-feature-icon:first-child {
margin-left: 0;
}
.intro-feature-icon:nth-of-type(2) {
width: 100px;
}
.price-bar {
width: 50%;
height: auto;
display: flex;
flex-direction: row;
justify-content: unset;
align-items: flex-end;
}
.price-bar h2 {
margin-left: 0;
margin-right: 50px;
}
.currency-selector {
color: #919191;
font-size: 18px;
margin-bottom: 5px !important;
margin-right: 15px;
cursor: pointer;
}
.currency-selector.selected {
color: black !important;
}
.currency-selector:hover {
text-decoration: underline;
}
.wtb-cta {
width: auto;
padding: 16px 32px;
background: black;
text-align: center;
margin-top: 50px;
margin-bottom: 0;
}
.accordion {
cursor: pointer;
padding: 0;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 50px;
border-bottom: 1px solid black;
}
.accordion:after {
content: '\02795';
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
.active,
.accordion:hover {}
.active:after {
content: "\2796";
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<div class="product-wrapper">
<div class="product-introduction">
<div class="product-image-grid">
<div class="image-container small">
<img src="Images/01-Product-Images/Test-image-1.png" alt="Test Image 1" class="Product-Image One">
</div>
<div class="image-container small">
<img src="Images/01-Product-Images/Test-image-2.png" alt="Test Image 2" class="Product-Image Two">
</div>
<div class="image-container large">
<img src="Images/01-Product-Images/Test-image-3.png" alt="Test Image 3" class="Product-Image Three">
</div>
</div>
<div class="product-info-container">
<div class="product-info">
<h1 class="product-title no-shadow">Hinterland</h1>
<h4 class="h4-black no-shadow">DRY2DRY™ TRI-LAMINATE JACKET</h4>
<div class="icon-bar">
<img src="Images/02-Icons/Tech-Icons/Materials/TriLaminate/TriLaminateD2D-square-black.png" alt="Tri Laminate Logo" class="intro-feature-icon">
<img src="Images/02-Icons/Tech-Icons/CE-Icons/ce-approved.png" alt="CE Approved Logo" class="intro-feature-icon">
</div>
<p class="black no-shadow">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis velit aperiam soluta maiores fugiat facere dolorum obcaecati, repellat commodi eveniet deserunt doloribus, esse magnam alias qui eos officia reprehenderit? Dolorum.
</p>
<div class="price-bar">
<h2 class="h2-min black no-shadow">£299.99</h2>
<p class="currency-selector no-shadow selected"> £ </p>
<p class="currency-selector no-shadow "> $ </p>
</div>
<a href="#">
<div class="wtb-cta">
<h3>WHERE TO BUY</h2>
</div>
</a>
<button class="accordion">
<h3 class="black no-shadow">DESCRIPTION</h3>
</button>
<div class="panel">
<p class="no-shadow black">Lorem ipsum...</p>
</div>
<button class="accordion">
<h3 class="black no-shadow">ADDITIONAL INFO</h3>
</button>
<div class="panel">
<p class="no-shadow black">Lorem ipsum...</p>
</div>
</div>
</div>
</div>
</div>
I have this code:
.userInfo h2 {
color: #012850;
font-size: 2rem;
font-weight: 800;
line-height: 2.6875rem;
}
.time {
color: #2966A3;
font-size: 1.75rem;
font-weight: 600;
line-height: 2.375rem;
}
.textzone .caption p {
font-size: 1.25rem;
}
.iconsZone {
margin-top: 29px;
display: flex;
height: 60px;
flex-direction: row;
order: 1;
align-content: flex-end;
align-self: end;
}
.textzone .caption {
order: 3;
}
.adHead {
display: flex;
order: 2;
}
.profile-img img {
margin-right: 25px;
width: 150px;
height: auto;
}
<div class="textzone">
<div class="adHead">
<div class="profile-img">
<img src="images/avatar.png" alt="">
</div>
<div class="userInfo">
<h2>Some Name</h2>
<p class="time">05:55 PM</p>
</div>
<div class="caption">
<p> Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
</div>
</div>
<div class="iconsZone">
<div class="comments iconBox">
blah!
</div>
<div class="likes iconBox">
blah blah!
</div>
</div>
</div>
which generates something like the following image:
and I need it to look like this instead:
So I basically almost have it, but can't figure how to make the title and main text go on different rows. I tried with
.caption{flex: 0 1 100%;}
and it makes the heading look correct, but main text is still in the same line. Also, the "blah blah" on the right should be on the same line as some name but guess I can fix that with position absolute.
Right now, my main issue is to "clear the float" (so to speak) of the .caption element
So how should I fix this code? Preferably not changing html (but can do if needed)
Hope these code snippet will help you to understand how the flex-boxes working in css3 and how to arrange items according to our needs without using float property. I added some background colors for all the elements for better understand, what are the behaviors of the certain containers. and used relative(%) sizes to make it somewhat responsive. since it's for the understanding purpose, hope this will help anyone who struggle with the CSS element arranging with flex.
Unfortunately Had to change your HTML base to make it work like you've asked for.
*, body{
box-sizing: border-box;
}
.textzone{
display: flex;
width: 100%;
flex-wrap: wrap;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
padding: 10px;
background-color: yellow;
}
.profile-img{
display: flex;
width: 30%;
align-items: center;
justify-content: center;
box-sizing: border-box;
flex-wrap: wrap;
}
.profile-img img{
width: 80%;
height: 80%;
}
.adHead{
display: flex;
width: 70%;
flex-wrap: wrap;
background-color: red;
flex-direction: column;
}
.title-container{
display: flex;
width: 100%;
flex-wrap: wrap;
flex-direction: row;
background-color: brown;
}
.userInfo{
display: flex;
width: 70%;
flex-wrap: wrap;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
background-color: tomato;
}
.userInfo h2 {
color: #012850;
font-size: 2rem;
font-weight: 800;
line-height: 2.6875rem;
margin: 0; /* to remove the margin sets by default */
}
.time {
color: #2966A3;
font-size: 1.75rem;
font-weight: 600;
line-height: 2.375rem;
margin: 0;
}
.textzone .caption p {
font-size: 1.25rem;
}
.iconsZone{
display: flex;
width: 30%;
flex-wrap: wrap;
flex-direction: row;
align-items: flex-start;
justify-content: flex-end;
background-color: orange;
}
.comments-iconBox{
display: flex;
width: 50%;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 5%;
background-color: skyblue;
}
.likes-iconBox{
display: flex;
width: 50%;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 5%;
background-color: aqua;
}
.caption{
display: flex;
width: 100%;
flex-wrap: wrap;
background-color: gray;
}
<div class="textzone">
<div class="profile-img">
<img src="icon2.png" alt="">
</div>
<div class="adHead">
<div class="title-container">
<div class="userInfo">
<h2>Some Name</h2>
<p class="time">05:55 PM</p>
</div>
<div class="iconsZone">
<div class="comments-iconBox">
blah!
</div>
<div class="likes-iconBox">
blah blah!
</div>
</div>
</div>
<div class="caption">
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit.
Corrupti architecto dicta ab, vero minima nesciunt fugiat
perspiciatis nobis eveniet suscipit nostrum, dolore quos molestiae at,
officiis fugit id sit officia? Sed ut perspiciatis, unde omnis iste natus error
sit voluptatem accusantium doloremque laudantium
</p>
</div>
</div>
</div>
I think you need to enable flex items to wrap, and make a few other minor adjustments to your CSS:
.userInfo h2 {
color: #012850;
font-size: 2rem;
font-weight: 800;
line-height: 2.6875rem;
}
.time {
color: #2966A3;
font-size: 1.75rem;
font-weight: 600;
line-height: 2.375rem;
}
.textzone {
display: flex; /* new */
}
.textzone .caption p {
font-size: 1.25rem;
}
.iconsZone {
margin-top: 29px;
display: flex;
height: 60px;
/* flex-direction: row;
order: 1;
align-content: flex-end;
align-self: end; */
}
.textzone .caption {
order: 3;
}
.adHead {
display: flex;
/* order: 2; */
flex-wrap: wrap; /* new */
}
.caption {
flex-basis: 100%; /* new */
}
.profile-img img {
margin-right: 25px;
width: 150px;
height: auto;
}
<div class="textzone">
<div class="adHead">
<div class="profile-img">
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""><!-- added for demo -->
</div>
<div class="userInfo">
<h2>Some Name</h2>
<p class="time">05:55 PM</p>
</div>
<div class="caption">
<p> Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</p>
</div>
</div>
<div class="iconsZone">
<div class="comments iconBox">
blah!
</div>
<div class="likes iconBox">
blah blah!
</div>
</div>
</div>