I'm trying to replicate the sections on the following page
I'm using flexbox in my version, however my version using flexbox seems to adjust to smaller screen sizes differently. For example the original that I'm trying to copy eats into the margin first as the screen gets smaller before adjusting the size of the text and images. When it does adjust the size of the the text and image it seems to do it a way that's a lot more asthetically pleasing. Once the screen size hits 960px wide I'm going to use media queries to set flexbox to block. However I'd like the text and images to adjust the same was the originally between 1440px and 960px. I've recorded a video to show what I mean - https://youtu.be/1pKq_UW-3Hk
And here's my code...
.section3-h1 {
font-size: 3.125rem;
font-family: "Roboto";
}
button {
width: 176px;
height: 47px;
background: #6442ff;
color: #ffffff;
font-family: "Roboto";
font-size: 12px;
line-height: 18px;
align-items: center;
border: none;
}
.section2-head {
margin: 150px;
margin-top: 50px;
margin-bottom: 50px;
display: flex;
flex-flow: row wrap-reverse;
}
.section2-text {
max-width: 537px;
margin-right: 74px;
}
.button {
margin-top: 60px;
}
.section3-head {
margin: 150px;
margin-top: 50px;
margin-bottom: 50px;
display: flex;
flex-flow: row wrap;
}
.section3-text {
max-width: 537px;
margin-left: 74px;
font-family: "Roboto";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<section id="section2">
<header class="section2-head">
<div class="section2-text">
<h1 class="section2-h1"> Lorem ipsum dolor sit ame.
</h1>
<p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
<button class="button">READ MORE</button>
</div>
<img src="https://via.placeholder.com/528x396" alt="" class="section2-img">
</header>
</section>
<section id="section3">
<header class="section3-head">
<img src="https://via.placeholder.com/528x396" alt="" class="section3-img">
<div class="section3-text">
<h1 class="section3-h1"> Lorem ipsum dolor sit ame.
</h1>
<p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
<button class="button">READ MORE</button>
</div>
</header>
</section>
</body>
</html>
Here is your code completely rewritten, removing all of the max-widths and unnecessary CSS. I added the media query for desktop styles as well.
button {
width: 176px;
height: 47px;
background: #6442ff;
color: #ffffff;
font-family: "Roboto";
font-size: 12px;
line-height: 18px;
align-items: center;
border: none;
}
section {
margin: 0 20px;
max-width: 1170px;
padding: 50px 0;
}
section header {
display: flex;
flex-direction: column;
}
section header .text {
margin: 30px 0 0 0;
}
section header img {
display: block;
width: 100%;
height: auto;
}
section.reverse header .text {
order: 2;
}
section.reverse header img {
order: 1;
}
#media (min-width: 992px) {
section {
margin: 40px auto;
}
section header {
flex-direction: row;
flex-wrap: nowrap;
}
section header .text {
flex: 0 0 calc(50% - 30px);
margin: 0 0 0 30px;
}
section header img {
flex: 0 0 calc(50% - 30px);
margin: 0 30px 0 0;
}
section.reverse header .text {
margin: 0 30px 0 0;
order: 1;
}
section.reverse header img {
order: 2;
margin: 0 0 0 30px;
}
}
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
<div class="container">
<section id="section2" class="reverse">
<header class="section2-head">
<div class="section2-text text">
<h1 class="section2-h1"> Lorem ipsum dolor sit ame.
</h1>
<p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia
nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
<button class="button">READ MORE</button>
</div>
<img src="https://via.placeholder.com/528x396" alt="" class="section2-img">
</header>
</section>
</div>
<div class="container">
<section id="section3">
<header class="section3-head">
<img src="https://via.placeholder.com/528x396" alt="" class="section3-img">
<div class="section3-text text">
<h1 class="section3-h1"> Lorem ipsum dolor sit ame.
</h1>
<p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia
nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
<button class="button">READ MORE</button>
</div>
</header>
</section>
</div>
I've observed that you have written so much redundant code in here. I have reframed you code.
please refer the code below. I have changed all classes and structure to reduce stylesheet overhead.
* {
font-family: "Roboto";
}
.button {
width: 176px;
height: 47px;
background: #6442ff;
color: #ffffff;
font-family: "Roboto";
font-size: 12px;
line-height: 18px;
align-items: center;
border: none;
margin-top: 60px;
}
.container {
width: 90%;
margin: 0 auto;
}
.flexbox {
display: flex;
flex-grow: 1;
flex-basis: 0;
}
.flexbox * {
width: 100%;
}
.marr74 {
margin-right: 74px;
}
.marl74 {
margin-left: 74px;
}
.flex-image img {
width: 100%;
}
.heading {
font-size: 3.125rem;
}
#media only screen and (max-width: 764px){
.flexbox {
flex-direction: column;
}
}
And here is HTML
<section>
<div class="container">
<div class="flexbox">
<div class="flex-content marr74">
<p class="heading">Lorem ipsum dolor sit ame. </p>
<p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
READ MORE
</div>
<div class="flex-image"><img src="https://via.placeholder.com/528x396" alt="" class="section2-img"></div>
</div>
<div class="flexbox">
<div class="flex-image"><img src="https://via.placeholder.com/528x396" alt="" class="section2-img"></div>
<div class="flex-content marl74">
<p class="heading">Lorem ipsum dolor sit ame. </p>
<p>Morbi sit amet varius nunc, blandit vulputate mi. Nulla a lobortis magna. Ut bibendum, augue quis lacinia tempus, justo ligula tincidunt ligula, eu bibendum ante libero imperdiet magna. Mauris vel consectetur arcu. Pellentesque risus tortor, lacinia nec dictum a, sagittis quis turpis. Aliquam dolor ante, rhoncus nec congue at, dictum vitae eros. Integer nec viverra leo. Curabitur blandit pretium rhoncus. In ut egestas elit</p>
READ MORE
</div>
</div>
</div>
</section>
Also note that you should not use more than one h1 on one single page. This affects the SEO of your website. Instead use p or similar element with font-size to achieve large fonts.
Related
I have created the layout using the flexbox. I have an image and some text in the footer. But when I am zooming out or in the browser to check for responsiveness the image in the footer is going out.
This is what happens when the browser window size is decreased.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: "Lato", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: 400;
letter-spacing: 0;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: "liga" on;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
.container {
display: flex;
height: 100vh;
}
.sidebar {
flex: 1;
}
.content {
-webkit-flex: 5;
flex: 5;
background-color: lightblue;
}
.main {
padding: 1rem;
height: 70vh;
background-color: #ececec;
overflow-y: scroll;
}
.header,
.footer {
display: flex;
align-items: center;
height: 15vh;
}
header,
footer,
article,
nav,
aside {
padding: 1em;
}
.player {
border: 1px solid red;
}
.player {
display: flex;
align-items: center;
}
.album__cover>img {
width: 3.5rem;
height: 3.5rem;
}
.album__cover {
display: flex;
align-items: center;
margin-right: 1rem;
}
.playing__track {
display: flex;
flex-direction: column;
}
.playing__album {
display: flex;
align-items: center;
}
.album {
font-size: .875rem;
font-weight: 300;
}
.track {
font-size: .75rem;
}
<link
href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
rel="stylesheet">
<body>
<div class="container">
<nav class="sidebar">
<a>Logo Goes Here</a>
</nav>
<div class="content">
<header class="header">Header</header>
<main class="main">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis auctor sem, vitae
scelerisque eros feugiat non. Mauris sit amet arcu sed ligula pellentesque tempus non imperdiet
elit. Aliquam dapibus metus ac odio facilisis, vitae bibendum quam lacinia. Phasellus a ante ut
justo dictum bibendum et ut massa. Etiam hendrerit sapien venenatis lacinia sodales. In et massa
leo. Integer imperdiet orci ac scelerisque malesuada. Donec mattis velit nec elit tincidunt mattis.
Proin vel varius felis, vel scelerisque mauris. Nunc malesuada purus velit, eu euismod tellus
consectetur et.
</p>
<p>
Quisque tincidunt nisi non dolor porttitor maximus. Donec tempus auctor leo vitae maximus. Sed
mattis nibh velit, iaculis molestie massa tempus vitae. Aliquam ipsum sem, ornare condimentum magna
vitae, auctor sagittis odio. Duis ut urna vel est luctus suscipit. Suspendisse at aliquet metus, in
rhoncus ligula. Aliquam erat volutpat. Nullam ultricies elit vel eros convallis, ut suscipit erat
mattis. In hac habitasse platea dictumst.
</p>
<p>
Ut enim diam, auctor eu turpis non, egestas accumsan dui. Suspendisse vel lorem tempor, imperdiet
purus vel, tincidunt turpis. Praesent sit amet lacus vel enim iaculis egestas vitae eget nibh. Donec
consequat placerat odio, in laoreet magna pretium ac. Curabitur porttitor a elit sed scelerisque.
Curabitur laoreet eu nisi ac ornare. Cras ornare, metus ut vestibulum rhoncus, purus arcu lobortis
odio, ac iaculis urna mi ut ex. Maecenas vitae dolor non felis rhoncus imperdiet a vitae enim.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur eget condimentum dolor. Duis
lacinia libero quis lacinia lacinia. Ut pretium pulvinar vestibulum. Ut blandit eget tellus sit amet
ornare.
</p>
</main>
<footer class="footer">
<div class="player">
<div class="playing__album">
<div class="album__cover">
<img src="https://images.pexels.com/photos/1051838/pexels-photo-1051838.jpeg?cs=srgb&dl=pexels-prasanth-inturi-1051838.jpg" />
</div>
<div class="playing__track">
<div class="album">
Last and the first freedom
</div>
<div class="track">
<span> Chapter 1</span>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>
</body>
How can I keep the image precisely inside the footer with the same padding and orientation?
You need to get rid of the fixed height and control the image it's width and height if you want the footer to be either bigger of smaller.
This is the solution
.header, .footer {
display: flex;
align-items: center;
/* height: 15vh; */
background-color: lightblue;
}
I think the issue is the units used for the padding, image size and font size. If you try using the vh unit instead of the rem unit, you might hav success.
.album__cover>img {
width: 3.5rem;
height: 3.5rem;
}
footer {
height: 10vh;
}
.album,
.track {
.album {
font-size: 0.875rem;
}
I am trying to make cards highlighting projects for a test portfolio. When I work on it in Codepen on my desktop it looks fine, but when I look on mobile the project images are poking through the bottom. Setting a bottom left and right margin to match the bottom of the card works on mobile but then it is formatted wrong on desktop.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #143861;
}
.section-header {
color: white;
font-size: 20px;
text-align: center;
backgroun-color: ;
}
.grid-wrapper {
display: grid;
height: 100vh;
width: 100vw;
grid-template-rows: .5fr 1fr 4fr 1fr;
grid-template-columns: minmax(0, 1fr);
overflow: auto;
text-align: center;
}
.header {
display: flex;
align-items: center;
}
.profile-image {
left: 0;
}
.about {
margin-top: 20rem;
margin-bottom: 20rem;
margin-left: 40px;
margin-right: 40px;
text-align: left;
color: white;
font-size: 20px;
}
.nav {
display: flex;
text-align: center;
gap: 2rem;
padding: 1rem;
position: fixed;
}
<DOCTYPE! html>
<html>
<body>
<div class="grid-wrapper">
<div class="header">
<img id="profile-image" src="https://via.placeholder.com/140x100"></img>
<div class="nav">
<div class="nav-links">About</div>
<div class="nav-links">Projects</div>
<div class="nav-links">Contact</div>
</div>
</div>
<section id="about">
<div class="about">
<h1 class="section-header">About</h1><br>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed felis quam, cursus vel scelerisque eu, sollicitudin ac neque. Mauris in dui a lacus rutrum bibendum et at turpis. Curabitur velit felis, consequat vel leo in, molestie egestas arcu. Aenean condimentum,
est nec viverra suscipit, nibh dui fermentum justo, eget eleifend turpis felis interdum nulla. Etiam eros turpis, faucibus ac fermentum a, sodales a lacus. Praesent vulputate, justo tristique mattis feugiat, ipsum nunc commodo turpis, in euismod
sem quam sit amet augue. Donec iaculis malesuada hendrerit. Proin venenatis, nibh in pulvinar sollicitudin, dui dui placerat metus, eu sodales tellus sapien ut urna. Phasellus et ipsum accumsan, pulvinar felis vitae, maximus metus. Vestibulum
sodales rhoncus enim, ut convallis massa scelerisque id. Nunc venenatis lacus eu finibus vulputate. Proin tincidunt turpis at ipsum porttitor varius. Sed accumsan arcu in odio dapibus, nec elementum dolor feugiat.
</p>
</div>
<section id="projects">
<h1 class="section-header">Projects</h1>
<div class="content">
<div class="project">
<img src="https://content.syndigo.com/asset/56a5cb78-9825-423a-a9df-fa0f5f2438f7/480.jpeg" alt="project image" class="project-image"></img>
<a class="project-link" href="https://codepen.io/nanglewi/full/qBVENGg" target="_blank">Cherry MX Product Landing Page</a>
</div>
I'm currently making a (static) website from scratch (so code the HTML and CSS stuff myself), and I want to have a responsive "image gallery" that changes the width of the pictures according to your screen width, so I followed this tutorial: CSS Image Gallery - responsive
However, changing it to my own likings I encountered an issue I could not fix with my current HTML/CSS skillset (it is not that much, I'm quite new in this). My problem is when I have (in my example three) images of the same size in my gallery, but the captions of the image have different length, this negatively affects the text that is followed by the gallery (see example and image below). I tried to fix this with the tutorials available at W3 and stuff, but nothing worked yet.
Does any of you how to (easily) fix this? And if so, please explain what you changed, because I want to truly understand what is going on at my website (that is why I didn't want to use these static site generators).
Note: I have made 3 types of galleries, one for two, three and four images, which explains the ".responsivethree" etc classes
<!DOCTYPE html>
<html lang="en-NL">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<style type="text/css">
body {
font-family: helvetica;
padding: 20px;
font-size:11pt;
}
header {
max-width: 800px;
}
main {
max-width: 800px;
}
section {
padding-left: 15px;
border-left: 1px solid rgb(223, 223, 223);
border-radius: 5px;
}
footer {
max-width: 800px;
}
div.gallery {
padding: 0px;
}
div.gallery img {
width: 98%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
div.desc {
padding: 2px;
padding-bottom: 5px;
text-align: center;
color: gray;
font-size: 85%;
}
* {
box-sizing: border-box;
}
.responsivefour {
padding: 0 6px;
float: left;
width: 24.99999%;
}
.responsivethree {
padding: 0 6px;
float: left;
width: 33.32%;
}
.responsivetwo {
padding: 0 6px;
float: left;
width: 49.9988%;
}
#media only screen and (max-width: 700px) {
.responsivefour {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsivefour {
width: 100%;
}
.responsivethree {
width: 100%;
}
.responsivetwo {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<!-- #################################################################### -->
<header id="top">
<h1>Header</h1>
</header>
<!-- #################################################################### -->
<main>
<article id="test">
<h2>bla</h2>
<section>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
</p>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 1">
<div class="desc">--- short description ---</div>
</div>
</div>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 2" >
<div class="desc">--- Very, utterly, super uber mega long description, don't you think, geeeeeez! ---</div>
</div>
</div>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 3" >
<div class="desc">--- stuff ---</div>
</div>
</div>
<p>
<b>This is my problem...</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
</p>
</section>
</article>
</main>
<!-- #################################################################### -->
<footer>
<p style="text-align: center;">footer tooter</p>
</footer>
<!-- #################################################################### -->
</body>
</html>
The float:left property you gave to the responsivethree class aligns the images to the left. Since you did not reset the left justification feature afterward, you are having a problem with the text scrolling. The clear:both command is used to reset the float:left property.
<!DOCTYPE html>
<html lang="en-NL">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<style type="text/css">
body {
font-family: helvetica;
padding: 20px;
font-size:11pt;
}
header {
max-width: 800px;
}
main {
max-width: 800px;
}
section {
padding-left: 15px;
border-left: 1px solid rgb(223, 223, 223);
border-radius: 5px;
}
footer {
max-width: 800px;
}
div.gallery {
padding: 0px;
}
div.gallery img {
width: 98%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
div.desc {
padding: 2px;
padding-bottom: 5px;
text-align: center;
color: gray;
font-size: 85%;
}
* {
box-sizing: border-box;
}
.responsivefour {
padding: 0 6px;
float: left;
width: 24.99999%;
}
.responsivethree {
padding: 0 6px;
float: left;
width: 33.32%;
}
.responsivetwo {
padding: 0 6px;
float: left;
width: 49.9988%;
}
#media only screen and (max-width: 700px) {
.responsivefour {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsivefour {
width: 100%;
}
.responsivethree {
width: 100%;
}
.responsivetwo {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<!-- #################################################################### -->
<header id="top">
<h1>Header</h1>
</header>
<!-- #################################################################### -->
<main>
<article id="test">
<h2>bla</h2>
<section>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
</p>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 1">
<div class="desc">--- short description ---</div>
</div>
</div>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 2" >
<div class="desc">--- Very, utterly, super uber mega long description, don't you think, geeeeeez! ---</div>
</div>
</div>
<div class="responsivethree">
<div class="gallery">
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="image 3" >
<div class="desc">--- stuff ---</div>
</div>
</div>
<p class="clear">
<b>This is my problem...</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiamlobortis facilisis sem. Nullam nec mi et neque pharetrasollicitudin. Praesent imperdiet mi nec ante. Donec ullamcorper,felis non sodales commodo, lectus velit ultrices augue, adignissim nibh lectus placerat pede. Vivamus nunc nunc, molestieut, ultricies vel, semper in, velit. Ut porttitor. Praesent in sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis fringilla tristique neque. Sed interdum libero ut metus. Pellentesque placerat. Nam rutrum augue a leo. Morbi sed elit sit amet ante lobortis sollicitudin. Praesent blandit blandit mauris. Praesent lectus tellus, aliquet aliquam, luctus a, egestas a, turpis. Mauris lacinia lorem sit amet ipsum. Nunc quis urna dictum turpis accumsan semper.
</p>
</section>
</article>
</main>
<!-- #################################################################### -->
<footer>
<p style="text-align: center;">footer tooter</p>
</footer>
<!-- #################################################################### -->
</body>
</html>
More specific I want the content section (the section with the white background) fill the mising space, so the header and footer have it's own fixed size and the content section is as big as it takes to fill/fit the full height.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Startseite - Malermeister Gen</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/script.js"></script>
<link rel="shortcut icon" type="image/png" href="img/favicon.ico">
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="last-modified" content="21.10.2018 08:22:20"> <!-- Edit: Nach Abschluss der Arbeit aktualisieren! -->
<meta charset="UTF-8">
<meta name="author" content="Til Jungbluth">
<meta name="description" content="Hier wird eine Beschreibung stehen..."> <!-- Edit: Beschreibung hinzufuegen! -->
<!-- <meta name="keywords" content="Malerorth, GmbH, Maler, Orth, Malermeister, Westerwald, Seck"> <!-- Edit: Ergaenzen! -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<div id="headerWrapper">
<header id="header">
<img id="headerLogo" src="img/Logo Malerinnung.jpg" alt="">
<h1 id="headerHeading">Malermeister Gen</h1>
<p id="headerSlogan"><span id="gestaltung">Gestaltung</span> - <span id="schoenheit">Schöhnheit</span> - <span id="schutz">Schutz</span></p>
</header>
<nav id="headerNav">
Home
Unser Team
Kontakt
</nav>
</div>
<div id="contentWrapper">
<h2 id="contentHeading">Lorem ipsum dolor sit amet</h2>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mattis ligula ac dui rhoncus finibus. Duis sit amet sollicitudin lorem, id interdum nisi. Curabitur tincidunt odio vitae elit hendrerit, sit amet pellentesque nibh faucibus. Ut in molestie lectus, sed faucibus dui. Phasellus auctor finibus erat, eget iaculis nunc euismod in. Suspendisse rhoncus erat volutpat neque varius, a sodales ante pharetra. Sed ullamcorper dictum eros non porta. Nulla viverra enim id odio eleifend, eu malesuada est mollis.</p>
<p>Phasellus nec egestas dolor, a blandit nibh. Fusce sit amet volutpat turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum nunc erat, et finibus erat scelerisque sed. Praesent eget dolor dolor. Praesent sit amet nisi est. Vivamus augue purus, dapibus vitae velit et, ultricies commodo diam. Proin in justo sed mi molestie malesuada a eget enim. Donec venenatis posuere nisi. Fusce felis metus, scelerisque ut lacus ut, hendrerit porta magna.</p>
<p>Nullam dictum varius mi sit amet gravida. Sed tortor metus, bibendum et sem quis, aliquet lacinia dolor. Suspendisse eu enim eget metus tristique laoreet sit amet vel ligula. Sed risus diam, elementum ac est a, mollis porta lacus. Nullam in erat elementum, venenatis purus et, iaculis odio. Aenean et orci viverra, aliquet elit vel, blandit ipsum. Aenean id velit id tellus faucibus pretium et eu ipsum. Fusce ac libero ultricies, vestibulum eros vel, aliquam lectus. Nullam est magna, vestibulum rutrum enim a, ultricies auctor ipsum. Nunc consectetur, sem at facilisis lacinia, nibh libero pulvinar elit, et convallis massa ligula in libero. Etiam finibus imperdiet odio vel tristique. Vestibulum ornare nibh at justo dictum accumsan. Donec non sapien risus. Suspendisse sed ante vitae neque sollicitudin posuere. Fusce mollis dapibus rutrum.</p>
<p>Etiam vel odio est. Nulla quis urna bibendum, tincidunt est id, laoreet nulla. Nunc consequat, ante at blandit rutrum, nisl odio vestibulum est, ut aliquam ligula ligula in nulla. Quisque rutrum, lorem in posuere fringilla, lorem libero bibendum metus, vel aliquet ex urna sed sem. Donec quis nisi arcu. Nunc magna odio, mollis auctor tortor nec, tincidunt ornare magna. Aenean sagittis enim et libero condimentum, at pellentesque risus hendrerit. Quisque eget purus in dui semper dignissim blandit non dui. Etiam mollis vehicula nulla lacinia pretium. Ut cursus, libero eu vehicula dapibus, massa nisi venenatis ex, nec fermentum mi lacus in leo. Nunc massa orci, vestibulum in pellentesque vitae, suscipit at augue. Vestibulum tempus arcu at fermentum aliquet. Duis feugiat, lacus eu accumsan viverra, eros nisi sodales libero, non pulvinar ante erat id lorem. Phasellus mauris orci, condimentum in eros non, aliquam egestas erat. Etiam neque libero, imperdiet vitae lobortis id, ultrices efficitur ante.</p>
</div>
</div>
<footer id="footer">
<p id="footerP">© Malermeister Gen GmbH |
Kontakt |
Impressum
</p>
<button onclick="topFunction()" id="scrollBackToTop" title="Go to top">Zum Seitenanfang</button>
</footer>
</div>
</body>
</html>
CSS:
body{
background: linear-gradient(to right, rgb(0, 51, 145) 0%, rgb(241, 185, 0) 50%, rgb(212, 24, 0) 100%);
margin: 0;
font-size: 14px;
}
#header{
height: 4.3em; /*Actual height is 4.1em. There was a space between #header and #headerNav, whyever...*/
margin: 0 0 -0.2em 0; /*In this way they overlap, so there's no unwanted space between.*/
padding: 0.6em;
background: darkgrey;
}
#headerLogo{
float: left;
height: 100%;
}
#headerHeading{
margin: 0 0 0 0.4em;
display: inline-block;
}
#headerSlogan{
display: block;
margin: 0.2em 0.2em 0 0;
float: right;
font-size: 1.25em;
}
#gestaltung{
color: rgb(0, 51, 145);
}
#schoenheit{
color: rgb(241, 185, 0);
}
#schutz{
color: rgb(212, 24, 0);
}
#headerNav{
height: 1.9em; /*Actual height is 1.7em. There was a space between #headerWrapper and #contentWrapper, whyever...*/
margin: 0 0 -0.2em 0;
padding: 0.5em 0 0.23em 0;
display: block;
text-align: center;
background: lightgrey;
}
.headerNavLinks{
margin: 0 0.4em;
padding: 0 0.6em;
text-decoration: none;
font-size: 1.25em;
border: 0.0625em solid black;
border-radius: 10%;
}
.headerNavLinks:hover{
background: black;
color: white;
}
#headerNavActive{
border: 0.0625em solid green;
border-radius: 10%;
}
#contentWrapper{
background: white;
padding: 0.6em;
}
#contentHeading{
margin: 0;
}
#content{
}
#content p:last-child{
margin: 1em 0 0 0;
}
#footer{
background: darkgrey;
padding: 0.6em;
}
#footerP{
margin: 0 0 0.4em 0;
text-align: center;
}
#scrollBackToTop{
background: lightgrey;
display: block;
margin: 0 auto;
}
#media only screen and (min-width: 480px){
body{
font-size: 15px;
}
}
#media only screen and (min-width: 545px){
body{
font-size: 16px;
}
#headerHeading{
margin: 0;
display: block;
}
#headerLogo{
margin: 0 0.8em 0 0;
}
}
#media only screen and (min-width: 650px){
body{
font-size: 17px;
}
}
#media only screen and (min-width: 768px){
body{
font-size: 18px;
}
#headerLogo{
margin: 0 1.2em 0 0;
}
#headerSlogan{
margin: 0.2em 0.2em 0 0;
}
}
#media only screen and (min-width: 1024px){
#wrapper{
width: 768px;
margin: auto;
}
}
#media only screen and (min-width: 1676px){ /* Just tried to make the content fit the height...*/
html{
max-height: 52.38em;
}
body{
max-height: 52.38em;
}
}
#media only screen and (min-width: 2560px){
#wrapper{
height: 100%;
}
}
body {
height: 100vh; //sets the height of the website to fit the screen.(even if the content is too less)
overflow-y:auto; // allows vertical scroll if the content is more.
}
I'm trying to align a div at the bottom right corner inside a specific column, but all instead it aligns at the bottom right corner of the main parent.
https://jsfiddle.net/jonnijonnason/L9vg468g/
If you check the fiddle, I want it to align beneath the image.
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width" />
<title>Arbetsprov | Baldvin Haraldsson</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<div class="page">
<div class="row">
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue enim sed tristique interdum. Integer id lectus et risus pulvinar ornare. Donec congue tortor non risus ullamcorper vestibulum. Nullam in hendrerit tellus. Vestibulum lorem nulla, maximus non pretium a, tincidunt id quam. Donec quis sollicitudin urna, sed sagittis purus. Pellentesque sapien libero, blandit a nunc in, iaculis viverra ipsum</p>
</div>
<div class="item">
<p>Nullam maximus pretium arcu at sodales. Sed id venenatis ante. Nullam sollicitudin id nisl quis dictum. Duis imperdiet diam at nibh laoreet egestas. Integer volutpat, dolor a pulvinar mollis, nisl lorem hendrerit tortor, sit amet posuere ante odio quis lorem. Vivamus luctus sem quis eros elementum pretium. Sed facilisis sem at velit euismod pretium. Maecenas posuere sapien elit, at accumsan orci pretium non. Suspendisse id sem nisi.</p>
</div>
<div class="item">
<H3>Image</H3>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Stockholm_Port.jpg" width="140px" height = "140px" />
Donec bibendum nibh a odio venenatis, vel ultricies turpis varius. Vestibulum varius sollicitudin rutrum. Nam eleifend ac nisl non aliquet. Donec vel scelerisque sapien. Donec ultrices vel neque ut bibendum. Suspendisse bibendum, ex sed congue dapibus, nibh magna malesuada dolor, at scelerisque dolor ex quis lectus. Curabitur rhoncus elit efficitur hendrerit malesuada. Morbi condimentum convallis laoreet.
<div class = "foo">Read More</div>
</div>
</div>
</div>
</body>
</html>
CSS
#charset "UTF-8";
.item {
width: 33%;
background: rgba(0, 0, 0, 0.1);
display: table-cell;
}
.row {
border: 1px solid red;
display: table;
border-spacing: 20px;
}
.page {
max-width: 900px;
margin: 0px auto 0px auto;
position: relative;
background-color: #fff;
}
img {
float: right;
margin: 0 0 10px 10px;
padding: 10px;
}
.foo {
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif";
color: #fff;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #4a4a4a;
height: 50px;
width: 162px;
position: absolute;
bottom: 0;
right: 0;
}
Add to <div class="item"> column a position:relative;
The button inside has an absolute position so it is relative to the next parent element with relative (or absolute) positioning.
Also, to make it not overlap the text you can also set padding-bottom
.item.contains-button {
position:relative;
padding-bottom:60px;
}
Your updated JSFiddle
What you need to do is just add Position: relative; to the last column. This will make Read more div to be at bottom right corner of the direct parent DIV instead of the main DIV.
Updated jsFiddle: https://jsfiddle.net/L9vg468g/4/
HTML:
<body>
<div class="page">
<div class="row">
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue enim sed tristique interdum. Integer id lectus et risus pulvinar ornare. Donec congue tortor non risus ullamcorper vestibulum. Nullam in hendrerit tellus. Vestibulum lorem nulla, maximus non pretium a, tincidunt id quam. Donec quis sollicitudin urna, sed sagittis purus. Pellentesque sapien libero, blandit a nunc in, iaculis viverra ipsum</p>
</div>
<div class="item">
<p>Nullam maximus pretium arcu at sodales. Sed id venenatis ante. Nullam sollicitudin id nisl quis dictum. Duis imperdiet diam at nibh laoreet egestas. Integer volutpat, dolor a pulvinar mollis, nisl lorem hendrerit tortor, sit amet posuere ante odio quis lorem. Vivamus luctus sem quis eros elementum pretium. Sed facilisis sem at velit euismod pretium. Maecenas posuere sapien elit, at accumsan orci pretium non. Suspendisse id sem nisi.</p>
</div>
<div class="item lastcol">
<H3>Image</H3>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Stockholm_Port.jpg" width="140px" height = "140px" />
Donec bibendum nibh a odio venenatis, vel ultricies turpis varius. Vestibulum varius sollicitudin rutrum. Nam eleifend ac nisl non aliquet. Donec vel scelerisque sapien. Donec ultrices vel neque ut bibendum. Suspendisse bibendum, ex sed congue dapibus, nibh magna malesuada dolor, at scelerisque dolor ex quis lectus. Curabitur rhoncus elit efficitur hendrerit malesuada. Morbi condimentum convallis laoreet.
<div class = "foo">Read More</div>
</div>
</div>
</div>
</body>
CSS:
#charset "UTF-8";
.item {
width: 33%;
background: rgba(0, 0, 0, 0.1);
display: table-cell;
position: relative;
}
.item.lastcol {
position: relative;
}
.row {
border: 1px solid red;
display: table;
border-spacing: 20px;
}
.page {
max-width: 900px;
margin: 0px auto 0px auto;
position: relative;
background-color: #fff;
}
img {
float: right;
margin: 0 0 10px 10px;
padding: 10px;
}
.foo {
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif";
color: #fff;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #4a4a4a;
height: 50px;
width: 162px;
position: absolute;
bottom: 0;
right: 0;
}
As you have placed other two columns description inside paragraph tag, you can keep third description also inside a paragraph and it can be achievable by using css flexbox if your browser support is IE10 +.
Updated code below.
.item {
width: 33%;
background: rgba(0, 0, 0, 0.1);
display: table-cell;
display: flex;
flex-direction: column;
}
.row {
border: 1px solid red;
display: flex;
flex-direction: row;
flex-wrap: wrap;
border-spacing: 20px;
}
.page {
max-width: 900px;
margin: 0px auto 0px auto;
position: relative;
background-color: #fff;
}
img {
float: right;
margin: 0 0 10px 10px;
padding: 10px;
}
.foo {
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif";
color: #fff;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #4a4a4a;
height: 50px;
width: 162px;
position: relative;
bottom: 0;
right: 0;
}
.item h3 {
order: 1;
}
.item img {order: 2;}
.item div {order: 3;}
.item p {order: 4;}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width" />
<title>Arbetsprov | Baldvin Haraldsson</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<div class="page">
<div class="row">
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue enim sed tristique interdum. Integer id lectus et risus pulvinar ornare. Donec congue tortor non risus ullamcorper vestibulum. Nullam in hendrerit tellus. Vestibulum lorem nulla, maximus non pretium a, tincidunt id quam. Donec quis sollicitudin urna, sed sagittis purus. Pellentesque sapien libero, blandit a nunc in, iaculis viverra ipsum</p>
</div>
<div class="item">
<p>Nullam maximus pretium arcu at sodales. Sed id venenatis ante. Nullam sollicitudin id nisl quis dictum. Duis imperdiet diam at nibh laoreet egestas. Integer volutpat, dolor a pulvinar mollis, nisl lorem hendrerit tortor, sit amet posuere ante odio quis lorem. Vivamus luctus sem quis eros elementum pretium. Sed facilisis sem at velit euismod pretium. Maecenas posuere sapien elit, at accumsan orci pretium non. Suspendisse id sem nisi.</p>
</div>
<div class="item lastcol">
<H3>Image</H3>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/88/Stockholm_Port.jpg" width="140px" height = "140px" />
<p>Donec bibendum nibh a odio venenatis, vel ultricies turpis varius. Vestibulum varius sollicitudin rutrum. Nam eleifend ac nisl non aliquet. Donec vel scelerisque sapien. Donec ultrices vel neque ut bibendum. Suspendisse bibendum, ex sed congue dapibus, nibh magna malesuada dolor, at scelerisque dolor ex quis lectus. Curabitur rhoncus elit efficitur hendrerit malesuada. Morbi condimentum convallis laoreet.</p>
<div class = "foo">Read More</div>
</div>
</div>
</div>
</body>
</html>