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 the desired layout working in Chrome (mac OS) but I've checked Safari/Firefox and I don't get the same result.
Link (and code below): https://codepen.io/moy/pen/NWaObyW
You can see here if I remove the image it's more consistent. But the image ignores the parent height: https://codepen.io/moy/pen/VwMqzQv
EDIT
So I kinda got it working but I don't understand why the parent (in Firefox/Safari) is so wide? It's like it's taking the height of the image before 'object-fit'? https://codepen.io/moy/pen/JjrwrJR
I have a container that is 100% (or vh) of the browser. Within the container there are two div's where 'main' content is displayed and a 'footer' that is fixed to the bottom. The 'main' content above the footer should fill the remaining height (no fixed values). As this is an image, I don't want it to cover the horizontal space or have a max-width.
The declaration that Chrome seems to be acknowledging that other browsers aren't is overflow: hidden which makes the img fit vertically within the container.
It's worth nothing the image will be several going forward, in a simple fading slideshow/carousel.
Really appreciate some help on this! I've tried lots of different flex declarations and extra divs but I haven't found a solution yet - in Chrome at least.
Here are some images of how it should look/behave as well. Extreme examples (short vh) just to illustrate.
Taller viewport:
Shorter viewport:
Embed Code:
html {
background: white;
font-size: 62.5%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: white;
-webkit-text-size-adjust: 100%;
}
/**
* Base `body` styling.
*/
body {
background-color: transparent;
color: black;
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
font-size: 1.8rem;
font-weight: 500;
line-height: 1.5;
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
}
h1 {
font-size: 3.6rem;
font-weight: inherit;
line-height: 1;
margin: 0 0 24px;
padding: 0;
}
p {
margin: 0 0 24px;
padding: 0;
}
img {
display: block;
width: 100%;
max-width: 100%;
}
.grid__item {
box-sizing: border-box;
padding: 24px 24px 0;
}
.gallery {
border: 2px solid black;
box-sizing: border-box;
margin-bottom: 24px;
}
#media only screen and (min-width: 1000px) {
.grid {
background-color: black;
display: grid;
grid-column-gap: 2px;
grid-template-columns: repeat(12, 1fr);
height: 100vh;
}
.grid__item {
background-color: white;
display: flex;
flex-direction: column;
grid-column: span 6;
min-height: 100vh;
}
.gallery {
display: flex;
align-self: center;
overflow: hidden;
}
.gallery img {
height: auto;
max-height: 100%;
object-fit: contain;
}
/* img {
object-fit: contain;
max-height: none;
} */
.grid__item-footer {
display: flex;
align-items: center;
justify-content: flex-start;
margin-top: auto;
}
.grid__item-footer .gallery-count {
display: flex;
flex: 1 1 0%;
justify-content: flex-end;
}
}
<div class="grid">
<div class="grid__item">
<h1 class="brand-name">Brand Name</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="grid__item-footer">Footer Item</span></p>
</div>
<div class="grid__item">
<div class="gallery">
<img src="https://www.fillmurray.com/600/850" />
</div>
<p class="grid__item-footer">Name of Project <span class="gallery-count">1 / 8</span></p>
</div>
</div>
I made a div with text and a description alongside an image. They look fine, but when I resize my browser and make it smaller, the image gets smaller. I eventually intend to make this responsive, so how can I make the image not resize when I change the browser size? Here's an example:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none;
background-color: #F6F6F6;
}
.course {
cursor: pointer;
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #ffffff;
width: 70%;
margin-left: 15%;
margin-right: 15%;
padding-right: 10%;
}
.course__header {
display: flex;
align-items: center;
}
.course-brief{
font-weight: normal;
}
.course__header img {
max-width: 30%;
max-height: 30%;
width: 30%;
display: block;
vertical-align: middle;
padding-right: 5%;
}
<div class="course">
<div class="course__header">
<img src="https://media.npr.org/assets/img/2013/10/29/gardiner_haussmann_wide-c1eb4ea2508483430321f3d003e8ddda0e1e9324.jpg?s=1400" class="course-image">
<div class="course__info">
<h3 class="course-header">THIS IS SOME TEXT</h3>
<h5 class="course-brief">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at</h5>
</div>
</div>
<button class="course-button">
Sign up!
</button>
</div>
Now, when you run the example, you can see that the image doesn't fit the top, unless you full screen it. Is there a css way to make it fit the top, and not resize when your browser resizes? (I also want it to work with many images, not just this one).
Thanks so much!!!
I've encountered this many times and this is the solution I always land on:
apply the image as a background image to a container,
set the background image to cover, and display: flex; will fill it vertically and horizontally.
place the inline image in the container, but hide it for desktop. Then on mobile, show the inline-image and hide the background-image.
The drawback is focus on the image might not always be in the same place for every image, which depending on your application, might not be important. At this point, you can be granular with placement after all are set, using css. But just depends on your specific situation.
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none;
background-color: #F6F6F6;
}
.course {
cursor: pointer;
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #ffffff;
width: 70%;
margin-left: 15%;
margin-right: 15%;
padding-right: 10%;
}
.course__header {
display: flex;
align-items: stretch;
}
.course-brief{
font-weight: normal;
}
.course__header img {
max-width: 30%;
max-height: 30%;
width: 30%;
display: block;
vertical-align: middle;
padding-right: 5%;
}
.course-image {
background-image: url(https://i.imgur.com/Cn6k0bM.jpg);
background-size: cover;
width: 25%;
background-position: center center;
margin-right: 1rem;
}
.course-image img {
display: none;
width: 100%;
max-width: unset;
}
#media(max-width: 768px){
.course {
flex-direction: column;
width: 100%;
margin-left: 0;
margin-right: 0;
padding-right: 0;
}
.course__header {
flex-direction: column;
align-items: unset;
}
.course-image {
margin: 0;
background-image: unset;
width: 100%;
}
.course-image img {
display: block;
margin-bottom: 1rem;
}
}
<div class="course">
<div class="course__header">
<div class="course-image"><img src="https://i.imgur.com/Cn6k0bM.jpg"></div>
<div class="course__info">
<h3 class="course-header">THIS IS SOME TEXT</h3>
<h5 class="course-brief">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at</h5>
</div>
</div>
<button class="course-button">
Sign up!
</button>
</div>
In that case you need to set a fixed width to the image since currently you define its width as 30% of its container that in its turn depends on the window size.
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none;
background-color: #F6F6F6;
}
.course {
cursor: pointer;
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #ffffff;
width: 70%;
margin-left: 15%;
margin-right: 15%;
padding-right: 10%;
}
.course__header {
display: flex;
align-items: center;
}
.course-brief{
font-weight: normal;
}
.course__header img {
width: 200px;
display: block;
vertical-align: middle;
padding-right: 5%;
}
<div class="course">
<div class="course__header">
<img src="https://media.npr.org/assets/img/2013/10/29/gardiner_haussmann_wide-c1eb4ea2508483430321f3d003e8ddda0e1e9324.jpg?s=1400" class="course-image">
<div class="course__info">
<h3 class="course-header">THIS IS SOME TEXT</h3>
<h5 class="course-brief">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at</h5>
</div>
</div>
<button class="course-button">
Sign up!
</button>
</div>
The image is resizing according to your screen size because you've used percentage for your image. If you don't want your image resizing, just use a fixed height and width for your image. Example:
.course__header img {
width: 200px;
height: 200px;
width: 30%;
display: block;
vertical-align: middle;
padding-right: 5%;
}
Fixed width is required
width: 200px;
instead of
width: 30%;
If you want to have a fixed height without messing up the aspect ratio, an easy way would be to use the background-image property:
img-wrapper {
background-image: url("https://media.npr.org/assets/img/2013/10/29/gardiner_haussmann_wide-c1eb4ea2508483430321f3d003e8ddda0e1e9324.jpg?s=1400");
background-positon: center;
background-size: cover;
background-repeat: no-repeat;
}
Here's a diagram:
I'm trying to make a web page that have a banner (the grey box) with a height of 80vh (when it's possible).
This banner contains a div with a text inside (the blue box) that must be vertically centered inside this banner.
In addition, I have a navigation menu with a height of 100px (the pink line), this menu is positioned in absolute at the top of the banner.
How can I obtain a layout in which the blue box is vertically centered but it cannot cross the navigation menu (pink line) and in which the banner (grey box) cannot be smaller than the height of the blue box + the height of the navigation menu?
I wish I could obtain this result in CSS only.
Here's a code with the partial layout:
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.banner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: url("https://picsum.photos/id/1015/1920/1080");
height: 80vh;
min-height: 100px; /* + the box inside :( */
}
nav {
position: absolute;
top: 0;
width: 100%;
border-bottom: solid 4px #f5989d;
height: 100px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav li {
float: left;
}
nav a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
}
.content {
font-size: 18px;
color: white;
text-align: center;
max-width: 400px;
padding: 20px;
background: #6dcff6dd;
border: solid 1px black;
}
<section class="banner">
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</section>
Not sure if it's possible to have all the requirement with CSS only so here is a try with almost all the requirement (missing only the last one). I will simply consider position:sticky
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.banner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: url("https://picsum.photos/id/1015/1920/1080");
height: 80vh;
min-height: 100px; /* + the box inside :( */
}
nav {
position: absolute;
top: 0;
width: 100%;
border-bottom: solid 4px #f5989d;
height: 100px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav li {
float: left;
}
nav a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
}
.content {
font-size: 18px;
color: white;
text-align: center;
max-width: 400px;
padding: 20px;
background: #6dcff6dd;
border: solid 1px black;
/* the trick start here */
position:sticky;
top:100px;
margin:-100px auto;
}
<section class="banner">
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</section>
You can visually hack the last requirement like below:
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.banner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: url("https://picsum.photos/id/1015/1920/1080") fixed;
height: 80vh;
min-height: 100px; /* + the box inside :( */
}
nav {
position: absolute;
top: 0;
width: 100%;
z-index:2;
border-bottom: solid 4px #f5989d;
height: 100px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
nav li {
float: left;
}
nav a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
}
.content {
font-size: 18px;
color: white;
text-align: center;
max-width: 400px;
padding: 20px;
background: #6dcff6dd;
border: solid 1px black;
/* the trick start here */
position:sticky;
top:100px;
margin:-100px auto;
transform-style:preserve-3d;
}
.content::before {
content:"";
position:absolute;
bottom:-2px;
top:0;
left:-50vw;
right:-50vw;
background: url("https://picsum.photos/id/1015/1920/1080") fixed;
transform:translateZ(-1px);
}
body {
overflow-x:hidden;
}
<section class="banner">
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</section>
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I want my image to be in the middle of the height in the box.
This my code (image)(The code is below the article)
I want(image)(width screen < 767px)
I want it to be the same on every screen (responsive)
Thank you
.question-answer {
background: #ffffff 0% 0% no-repeat padding-box;
border-radius: 29px;
border: 1px solid #C9C9C9;
cursor: pointer;
color: #303030;
}
.question-answer .question {
display: flex;
justify-content: space-between;
padding-right: 30px;
}
.question-answer .question .content {
padding: 0 34px;
text-align: left;
font-size: 14px;
font-weight: bold;
font-family: Open Sans;
letter-spacing: 0px;
color: #686868;
opacity: 1;
letter-spacing: 0px;
position: relative;
padding-right: 30px;
min-height: 57px;
display: flex;
align-items: center;
}
.question-answer .question img {
max-width: 24px;
max-height: 24px;
margin-top: 17px;
}
#media (max-width: 767px){
.question-answer .question .content {
padding-top: 15px;
padding-bottom: 15px;
padding-right: 0px;
}
.faq-page .question-answer .question img {
}
}
<div class="question-answer">
<div class="question">
<div class="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</div>
<img class="img-down" src="https://i.ibb.co/pRztJtW/arrow-circle-down-solid.png" alt="">
</div>
</div>
Well, you can simply do it with flexbox. All you have to do is to assign the display: flex; to the parent element of your text and image, then with the flex properties like align-items: center; make them align vertically. You also have to remove the margin-top from the image element itself to make it perfectly centre.
So the final code should be something like this:
.question {
display: flex;
align-items: center;
}
.question-answer {
background: #ffffff 0% 0% no-repeat padding-box;
border-radius: 29px;
border: 1px solid #C9C9C9;
cursor: pointer;
color: #303030;
}
.question-answer .question {
display: flex;
justify-content: space-between;
padding-right: 30px;
}
.question-answer .question .content {
padding: 0 34px;
text-align: left;
font-size: 14px;
font-weight: bold;
font-family: Open Sans;
letter-spacing: 0px;
color: #686868;
opacity: 1;
letter-spacing: 0px;
position: relative;
padding-right: 30px;
min-height: 57px;
display: flex;
align-items: center;
}
.question-answer .question img {
max-width: 24px;
max-height: 24px;
}
#media (max-width: 767px) {
.question-answer .question .content {
padding-top: 15px;
padding-bottom: 15px;
padding-right: 0px;
}
}
<div class="question-answer">
<div class="question">
<div class="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</div>
<img class="img-down" src="https://i.ibb.co/pRztJtW/arrow-circle-down-solid.png" alt="">
</div>
</div>
Please add this style. It will make your image vertically center.
.question {align-items: center;}
.question-answer .question img{margin: 0;}