I'm trying to clone the Google home page and I designed the footer using flexbox, but now I can't position it at the bottom of the page. How can I fix that or is there any other technique to tackle this problem.
Here is the screenshot and code of the page. I know it's messy and lack of design. First I just want to get the structure right.
screenshot of the page
```html
<body>
<div class="heading">
<div></div>
<div class="gmail">
<p>Gmail</p>
</div>
<div class="images">
<p>images</p>
</div>
<div class="gapps">
<button></button>
</div>
<div class="dp">
<p>dp</p>
</div>
</div>
<div class="container">
<div class="google-logo">
<img
src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
alt="Google logo"
/>
</div>
<div class="search-bar">
<input
type="search"
name="q"
aria-label="Search through site content"
/>
</div>
<div class="search-buttons">
<div class="search-button">
<button>Google Search</button>
</div>
<div class="feeling-lucky">
<button>I'm Feeling Lucky</button>
</div>
</div>
</div>
<div class="footer">
<div class="srilanka">
<p>Sri Lanka</p>
</div>
<div class="footer-bottom">
<div class="footer-bottom-left">
<div class="about">
<p>About</p>
</div>
<div class="advertising">
<p>Advertising</p>
</div>
<div class="business">
<p>Business</p>
</div>
<div class="how-search-works">
<p>How Search Works</p>
</div>
</div>
<div class="footer-bottom-right">
<div class="privacy">
<p>Privacy</p>
</div>
<div class="terms">
<p>Terms</p>
</div>
<div class="settings">
<p>Settings</p>
</div>
</div>
</div>
</div>
</body>
```
```css
body {
height: 100%;
}
body {
font-size: 14px;
font-family: arial, sans-serif;
color: #222;
}
.heading {
display: flex;
justify-content: flex-end;
padding-bottom: 100px;
}
.gmail {
padding: 0 15px;
}
.images {
padding: 0 15px;
}
.gapps {
padding: 0 15px;
}
.dp {
padding: 0 15px;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.google-logo {
padding-bottom: 3vh;
}
.search-bar {
padding-bottom: 3vh;
}
.search-buttons {
display: flex;
justify-content: center;
}
.feeling-lucky {
padding-left: 2vh;
}
.footer {
display: flex;
flex-direction: column;
}
.footer-bottom {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.footer-bottom-left {
display: flex;
}
.srilanka {
padding: 0 15px;
}
.about {
padding: 0 15px;
}
.advertising {
padding: 0 15px;
}
.business {
padding: 0 15px;
}
.how-search-works {
padding: 0 15px;
}
.privacy {
padding: 0 15px;
}
.terms {
padding: 0 15px;
}
.settings {
padding: 0 15px;
}
.footer-bottom-right {
display: flex;
justify-items: flex-end;
}
```
Come on broh, add a lil bit of semantics there
<html>
<head></head>
<body>
<header></header>
<main></main>
<footer class=“footer”></footer>
</body>
It doesn’t matter if you use: flex, flow, grid
as those properties are defined with display. If you want to set your element at the bottom, we are talking about a position.
So you need to set its position
.footer {
position: fixed;
left:0;
bottom:0;
width:100%;
}
It's better to post your code as well, not just a screenshot.
btw you can use the following code on your footer and it will stick to the bottom of your page
footer{
position:fixed;
bottom: 0
width: 100%
}
Related
My issue:
I'm making somewhat of a Zillow clone. I need the page to not expand beyond 100% of the viewport height however, I'm making a section with the intentions of having the overflow property set to scroll. When I do this, the section expands beyond the viewport height and leaves a large whitespace at the bottom of my page. I can adjust the height to fill up to 100vh however, if I adjust the screen vertically the div with the scroll overflow doesn't adjust to the viewport height. Thanks for any and all help!
Here's a screenshot of my issue:
The circled section is the section that I need the overflow to scroll:
This is my HTML for the entire 'popup' portion:
<div class="home__popup--backdrop">
<div class="home__popup--container">
<div class="home__popup--left">
<div class="home__popup--img--container">
<div class="home__popup--img--main--container">
<img src="./src/img/home-0.jpg" alt="home-0" class="home__popup--img--main">
</div>
<div class="home__popup--img--sub--container">
<img src="./src/img/home-1.jpg" alt="home-0" class="home__popup--img--sub">
<img src="./src/img/home-2.jpg" alt="home-0" class="home__popup--img--sub">
<img src="./src/img/home-3.jpg" alt="home-0" class="home__popup--img--sub">
<img src="./src/img/home-4.jpg" alt="home-0" class="home__popup--img--sub">
<img src="./src/img/home-5.jpg" alt="home-0" class="home__popup--img--sub">
<img src="./src/img/home-0.jpg" alt="home-0" class="home__popup--img--sub">
<img src="./src/img/home-1.jpg" alt="home-0" class="home__popup--img--sub">
<img src="./src/img/home-2.jpg" alt="home-0" class="home__popup--img--sub">
</div>
</div>
</div>
<div class="home__popup--right">
<div class="home__popup--header--container">
<div class="home__popup--logo--container">
<div class="logo__container--home">
<img src="./src/img/logo__house.svg" alt="logo-homes" class="logo logo__homes logo__homes--small">
</div>
<div class="logo__container--txt">
<img src="./src/img/logo__txt.svg" alt="logo-homes" class="logo logo__homes logo__txt--small">
</div>
</div>
<div class="home__popup--social--container">
<div class="home__popup--social">
<img src="./src/img/like.svg" alt="logo like" class="popup__logo logo__like">
<p>Save</p>
</div>
<div class="home__popup--share">
<div class="home__popup--social">
<img src="./src/img/next.svg" alt="logo next" class="popup__logo logo__next">
<p>Share</p>
</div>
</div>
<div class="home__popup--more">
<div class="home__popup--social">
<img src="./src/img/more.svg" alt="logo more" class="popup__logo logo__more">
<p>More</p>
</div>
</div>
</div>
</div>
<div class="home__popup--details--container">
<div class="home__popup--details">
<p class="home__popup--price">$500,000</p>
<p class="home__popup--beds home__popup--details--home">3 <span>bds</span></p>
<p class="home__popup--baths home__popup--details--home">2 <span>ba</span></p>
<p class="home__popup--sqft home__popup--details--home">2,245 <span>sqft</span></p>
</div>
<div class="home__popup--address--container">
<p class="home__popup--address">
4210 sharman rd<span>, </span>
</p>
<p class="home__popup--city">Madison<span>, </span></p>
<p class="home__popup--state">WI</p>
</div>
<div class="home__popup--btn--container">
<button class="btn__agent">Contact Agent</button>
</div>
</div>
<div class="home__popup--overview--container">
<div class="home__popup--overview--container--links">
<img src="./src/img/001-left-arrow.svg" alt="arrow-left" class = 'arrow-small arrow-small--left'>
<div class="home__popup--overview home__popup--overview--active home__popup--overview--container--links--text--container" data-list-section = 0>
<p class="home__popup--overview--text home__popup--overview--container--links--text">Overview</p>
</div>
<div class="home__popup--facts home__popup--overview--container--links--text--container">
<p class="home__popup--facts--text home__popup--overview--container--links--text">Facts and features</p>
</div>
<div class="home__popup--value home__popup--overview--container--links--text--container">
<p class="home__popup--value--text home__popup--overview--container--links--text">Home value</p>
</div>
<div class="home__popup--history home__popup--overview--container--links--text--container" data-list-section = 1>
<p class="home__popup--history--text home__popup--overview--container--links--text">Price and tax history</p>
</div>
<div class="home__popup--monthly home__popup--overview--container--links--text--container">
<p class="home__popup--monthly--text home__popup--overview--container--links--text">Monthly cost</p>
</div>
<div class="home__popup--rental home__popup--overview--container--links--text--container">
<p class="home__popup--rental--text home__popup--overview--container--links--text">Rental Value</p>
</div>
<div class="home__popup--schools home__popup--overview--container--links--text--container" data-list-section = 2>
<p class="home__popup--schools--text home__popup--overview--container--links--text">Nearby schools</p>
</div>
<div class="home__popup--similar home__popup--overview--container--links--text--container">
<p class="home__popup--similar--text home__popup--overview--container--links--text">Similar homes</p>
</div>
<div class="home__popup--neighborhood home__popup--overview--container--links--text--container">
<p class="home__popup--neighborhood--text home__popup--overview--container--links--text">Neighborhood</p>
</div>
<div class="home__popup--homes-for-you home__popup--overview--container--links--text--container">
<p class="home__popup--homes-for-you--text home__popup--overview--container--links--text">Homes for you</p>
</div>
<img src="./src/img/002-right-arrow.svg" alt="arrow-right" class = 'arrow-small arrow-small--right'>
</div>
<div class="home__popup--scroll">
<div class="home__popup--home--detail--container">
<div class="home__popup--map--container">
<div class="test" id = "home__popup--map"></div>
</div>
<div class="home__popup--text--container">
<div class="home__popup--text--stats">
<P class="home__popup--text--header">Overview</P>
<div class="home__popup--text--user-activity">
<p class="home__popup--text--time">Time on Home Finder  <span> --</span></p>
<p class="home__popup--text--views">Views <span>64</span></p>
<p class="home__popup--text--saves">Saves <span>1</span></p>
</div>
<p class="home__popup--text--description">
No showings until 8/22 OH.....
</p>
<p class="home__popup--text--read-more">Read more</p>
</div>
<p class="home__popup--text--open-house--header">Open House</p>
<p class="home__popup--text--open-house--day">Sun, Aug 22</p>
<p class="home__popup--text--open-house--time">12:00 PM - 2:00 PM</p>
<ul class="home__popup--text--agent--container">
<li class="home__popup--text--agent">Kavita Biyani</li>
<li class="home__popup--text--agent">Nik Tantardini</li>
<li class="home__popup--text--agent">First Weber INC</li>
<li class="home__popup--text--agent">Lena Oberwetter</li>
<li class="home__popup--text--agent">Prince Michael</li>
</ul>
<div class="home__popup--overview--text">
</div>
<div class="home--popup--overview--specs">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here's the HTML for the overflowed portion:
<div class="home__popup--scroll">
<div class="home__popup--home--detail--container">
<div class="home__popup--map--container">
<div class="test" id = "home__popup--map"></div>
</div>
<div class="home__popup--text--container">
<div class="home__popup--text--stats">
<P class="home__popup--text--header">Overview</P>
<div class="home__popup--text--user-activity">
<p class="home__popup--text--time">Time on Home Finder  <span> --</span></p>
<p class="home__popup--text--views">Views <span>64</span></p>
<p class="home__popup--text--saves">Saves <span>1</span></p>
</div>
<p class="home__popup--text--description">
No showings until 8/22 OH. Amazing opportunity ...
</p>
<p class="home__popup--text--read-more">Read more</p>
</div>
<p class="home__popup--text--open-house--header">Open House</p>
<p class="home__popup--text--open-house--day">Sun, Aug 22</p>
<p class="home__popup--text--open-house--time">12:00 PM - 2:00 PM</p>
<ul class="home__popup--text--agent--container">
<li class="home__popup--text--agent">Kavita Biyani</li>
<li class="home__popup--text--agent">Nik Tantardini</li>
<li class="home__popup--text--agent">First Weber INC</li>
<li class="home__popup--text--agent">Lena Oberwetter</li>
<li class="home__popup--text--agent">Prince Michael</li>
</ul>
<div class="home__popup--overview--text">
</div>
<div class="home--popup--overview--specs">
</div>
</div>
</div>
Here is the relevant css:
.home__popup {
&--home--detail--container {
}
&--text {
&--description{
font-size: 1.8rem;
font-weight: 300;
color: $color-grey-text;
line-height: 1.3;
}
&--user-activity{
display: flex;
margin-bottom: 2rem;
font-size: 1.4rem;
color: $color-grey-text;
& span{
color: black;
}
}
&--time{
margin-right: 2rem;
border-right: 1px solid $color-grey-medium;
& span{
font-weight: bold;
margin-right: 2rem;
}
}
&--saves{
margin-left: 2rem;
& span{
font-weight: bold;
}
}
&--views{
margin-right: 2rem;
border-right: 1px solid $color-grey-medium;
& span{
font-weight: bold;
margin-right: 2rem;
}
}
&--header {
font-size: 2rem;
font-weight: 700;
letter-spacing: 0.5px;
margin-bottom: 2rem;
}
&--container {
margin-top: 2rem;
display: flex;
flex-direction: column;
margin-left: 1rem;
}
}
&--btn {
&--container {
margin-top: 1rem;
margin-left: 1rem;
display: flex;
justify-content: space-between;
width: 100%;
position: relative;
}
}
&--address {
&--container {
display: flex;
font-weight: 300;
font-size: 1.6rem;
margin-left: 1rem;
margin-top: 1rem;
}
}
&--baths {
margin-left: 0.5rem;
}
&--beds {
margin-left: 2rem;
}
&--price {
margin-top: 3rem;
font-size: 2.5rem;
font-weight: 500;
margin-left: 1rem;
}
&--social {
cursor: pointer;
&--container {
display: flex;
align-items: center;
width: 45%;
justify-content: space-around;
}
}
&--backdrop {
width: 100vw;
height: 100vh;
z-index: 2999;
position: absolute;
top: 0;
left: 0;
backdrop-filter: blur(2px);
background-color: rgba(0, 0, 0, 0.671);
}
&--container {
position: absolute;
top: 0;
left: 50%;
height: 100vh;
width: 65vw;
background-color: white;
transform: translateX(-50%);
z-index: 3000;
backdrop-filter: blur(2px);
display: flex;
flex-direction: row;
}
&--left {
position: relative;
width: 60%;
overflow-y: scroll;
}
&--right {
width: 40%;
position: relative;
}
&--img {
&--main {
height: auto;
object-fit: cover;
width: 100%;
}
&--sub {
height: 25rem;
object-fit: cover;
width: 49.5%;
margin-bottom: 0.4rem;
&--container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
}
}
&--header {
&--container {
display: flex;
justify-content: space-between;
position: relative;
border-bottom: 1px solid #6060607a;
margin-left: 1rem;
margin-right: 1rem;
}
}
&--logo {
&--container {
display: flex;
transform: translateY(1rem);
}
&__homes {
&--small {
height: 6rem;
width: 7rem;
}
}
}
&--details {
display: flex;
align-items: flex-end;
&--container {
display: flex;
flex-direction: column;
position: relative;
}
&--home {
font-size: 1.6rem;
font-weight: 400;
& span {
border-right: 1px solid $color-grey-text;
padding-right: 0.5rem;
font-weight: 300;
}
}
}
&--sqft {
margin-left: 0.5rem;
& span {
border-right: none;
}
}
&--overview {
color: $color-primary;
border-bottom: 2px solid $color-primary;
&--container {
display: flex;
flex-direction: column;
position: relative;
&--links {
display: flex;
overflow-x: scroll;
font-size: 14px;
font-weight: 300;
height: 5rem;
align-items: center;
margin-top: 2rem;
border-top: 1px solid $color-grey-medium;
border-bottom: 1px solid $color-grey-medium;
margin-left: 0.5rem;
margin-right: 0.5rem;
&::-webkit-scrollbar {
display: none;
}
&--text {
margin-left: 1rem;
margin-right: 1rem;
width: max-content;
&--container {
cursor: pointer;
height: 100%;
display: flex;
align-items: center;
transition: .2s all;
&:hover {
color: $color-primary-light;
}
}
}
}
}
}
}
I was having way too many issues out of pure stubbornness of not wanting to change my css however, I finally gave in and refactored the section as a grid. I'm now able to get it to function properly. Here's what it looks like:
And here's the css for the grid-layout:
&--right {
width: 40%;
position: relative;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 5rem 20rem 5rem auto;
}
here's the CSS for the updated div containing the scroll bar:
&--scroll{
grid-column: 1/-1;
grid-row: 4/5;
overflow-y: scroll;
overflow-x: hidden;
}
I have a simple html document (see - https://5fa3b1d135e99.htmlsave.net). When I try to print (cmd/ctrl+P) this document, chrome evaluate the print size as 31,776 pages:
After some research, when removing the gap property from .block-row, it's fixed, but I have no idea what's the cause, plus - I do need the gap.
Any ideas?
In case the link gets expired, this is the output:
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;600;700');
#media print {
* {
-webkit-print-color-adjust: exact;
}
.block-row,
.block-signature {
break-inside: avoid;
}
}
html,
body {
margin: 0;
}
body {
font-size: 10px;
font-family: "Open Sans";
}
.page-header {
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid #eaeaea;
padding-bottom: 8px;
margin: 0 24px 24px;
width: 100%;
}
.page-header > div {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.page-header > div > .a-logo-container,
.page-header > div > .other-logo-container {
flex: 1;
}
.page-header > div > .a-logo-container {
display: flex;
align-items: center;
justify-content: center;
}
.page-header .a-logo {
display: block;
width: 79px;
height: 20px;
}
.page-header .other-logo-container {
display: flex;
align-items: center;
}
.page-header .other-logo {
background: none no-repeat center center / contain;
display: block;
width: 40px;
height: 20px;
}
.page-header .other-logo-container {
gap: 8px;
}
.page-header .other-logo-container h2 {
font-size: 10px;
}
.page-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
font-size: 8px;
font-weight: 400;
width: 100%;
margin: 0 24px;
color: #999;
}
.block-box {
padding: 16px 24px;
background-color: #f9f9f9;
border-radius: 8px;
margin: 16px 0;
}
.block-box .block-column {
gap: 10px;
}
.block-row {
display: flex;
gap: 32px;
}
.block-row > * {
flex: 1;
}
.block-row > * + * {
margin: 16px;
}
.block-column {
display: flex;
flex-direction: column;
}
.block-text,
.block-start-end-time {
display: flex;
flex-direction: column;
gap: 6px;
}
.block-inline-key-value {
display: flex;
gap: 16px;
}
.block-inline-key-value > strong {
font-weight: 600;
}
.block-inline-title {
display: block;
border-bottom: 2px solid;
line-height: 25px;
font-weight: 600;
}
.block-container .label {
white-space: nowrap;
}
.block-title {
background-color: #f9f9f9;
padding: 6px 12px;
border-radius: 8px;
font-weight: 600;
}
.block-item {
display: block;
align-items: center;
}
.block-radios {
display: flex;
flex-direction: column;
gap: 8px;
}
.block-radios .checkbox {
width: 12px;
height: 12px;
border-radius: 100%;
border: 1px solid #c4c4c4;
box-shadow: 0 0 0 1px #fff inset;
}
.block-radios .checkbox[data-checked="true"] {
background-color: #292929;
}
.block-radios > .block-container {
display: flex;
}
.block-radios > .block-container > * {
width: 100%;
}
.block-checkboxes {
display: flex;
flex-direction: column;
gap: 8px;
}
.block-checkboxes > .block-container {
display: grid;
flex-wrap: wrap;
gap: 10px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.block-checkboxes .checkbox {
width: 12px;
height: 12px;
border: 1px solid #c4c4c4;
border-radius: 2px;
}
.block-checkboxes .checkbox[data-checked="true"] {
border-color: #292929;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAHCAYAAADam2dgAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABISURBVHgBfYzBDQAQEASvBCUoQUk6oRSlqIgSlgvigrPJfCaTJVIGwHcMfYKAsSylY46gLsfSTMGkKxBPEXt3cIRFDURoX74BA3ZgYkt9TZoAAAAASUVORK5CYII=) no-repeat center center #292929;
}
.block-signature {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 12px;
min-height: 100px;
}
.block-signature .signature-title {
border-top: 2px solid;
width: 100%;
text-align: center;
padding: 8px;
box-sizing: border-box;
max-width: 50vw;
}
.block-signature .signature-container > img {
transform: translateY(50%);
height: 80px;
}
<!DOCTYPE html>
<html>
<body>
<section class="blocks">
<div class="block-row">
<div class="block-radios">
<div class="block-inline-title">Radio</div>
<div class="block-container">
</div>
</div>
</div>
<div class="block-row">
<div class="block-title">Main Header</div>
</div>
<div class="block-row">
<div class="block-radios">
<div class="block-inline-title">Drop Down</div>
<div class="block-container">
</div>
</div>
</div>
<div class="block-row">
<div class="block-text">
<div class="block-inline-title">Short Text</div>
<div class="block-container">
<div class="block-item">lorem ipsum</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-text">
<div class="block-inline-title">Number</div>
<div class="block-container">
<div class="block-item">100</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-row">
<div class="block-signature">
<div class="signature-container"><strong>Tracey Kutch</strong>
</div>
<div class="signature-title">Patient Name</div>
</div>
<div class="block-signature">
<div class="signature-container">None</div>
<div class="signature-title">Signature</div>
</div>
<div class="block-signature">
<div class="signature-container"><strong>2020-11-04T00:00:00Z</strong>
</div>
<div class="signature-title">Date</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-start-end-time">
<div class="block-inline-title">Time</div>
<div class="block-container">
<div class="block-item">Invalid Date</div>
</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-title">TODO Image #Newbie012</div>
</div>
<div class="block-row">
<div class="block-title">TODO Chart #Newbie012</div>
</div>
<div class="block-row">
<div class="block-row"></div>
</div>
<div class="block-row">
<div class="block-checkboxes">
<div class="block-inline-title">Multiple Select (check)</div>
<div class="block-container">
</div>
</div>
</div>
<div class="block-row">
<div class="block-radios">
<div class="block-inline-title">Yes/No</div>
<div class="block-container">
</div>
</div>
</div>
<div class="block-row">
<div class="block-title">Sub Header</div>
</div>
<div class="block-row">
<div class="block-text">
<div class="block-inline-title">Long Text</div>
<div class="block-container">
<div class="block-item">TypeScript supports JSX transpilation and code analysis. If you are unfamiliar with JSX here is an excerpt from the official website: JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It's NOT intended
to be implemented by engines or browsers. It's NOT a proposal to incorporate JSX into the ECMAScript spec itself. It's intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript.
The motivation behind JSX is to allow users to write HTML like views in JavaScript so that you can: Have the view Type Checked by the same code that is going to check your JavaScript Have the view be aware of the context it is
going to operate under (i.e. strengthen the controller-view connection in traditional MVC). Reuse JavaScript patterns for HTML maintenance e.g. Array.prototype.map, ?:, switch etc instead of creating new (and probably poorly typed)
alternatives. This decreases the chances of errors and increases the maintainability of your user interfaces. The main consumer of JSX at this point is ReactJS from facebook. This is the usage of JSX that we will discuss here.</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-row">
<div class="block-signature">
<div class="signature-container"><strong>Eliya Local</strong>
</div>
<div class="signature-title">Employee Name</div>
</div>
<div class="block-signature">
<div class="signature-container">None</div>
<div class="signature-title">Signature</div>
</div>
<div class="block-signature">
<div class="signature-container"><strong>2020-11-04T00:00:00Z</strong>
</div>
<div class="signature-title">Date</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-row">
<div class="block-signature">
<div class="signature-container"><strong>Signature</strong>
</div>
<div class="signature-title">Patient Name</div>
</div>
<div class="block-signature">
<div class="signature-container">None</div>
<div class="signature-title">Signature</div>
</div>
<div class="block-signature">
<div class="signature-container"><strong>2020-11-04T00:00:00Z</strong>
</div>
<div class="signature-title">Date</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-text">
<div class="block-inline-title">Date</div>
<div class="block-container">
<div class="block-item">12/Sa/1996</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-start-end-time">
<div class="block-inline-title">Time</div>
<div class="block-container">
<div class="block-item">Invalid Date</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-text">
<div class="block-inline-title">Add Free Text</div>
<div class="block-container">
<div class="block-item"></div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-title">TODO Chart #Newbie012</div>
</div>
<div class="block-row">
<div class="block-text">
<div class="block-inline-title">Blood Pressure</div>
<div class="block-container">
<div class="block-item">100 / 90</div>
</div>
</div>
</div>
<div class="block-row">
<div class="block-row"></div>
</div>
<div class="block-row">
<div class="block-row"></div>
</div>
<div class="block-row">
<div class="block-row"></div>
</div>
</section>
</body>
</html>
As pointed out by #kaiido the culprit seems to be the empty .block-row with the gap property.
We encountered the same issue and posted a bug in Chrome see link.
Our solution was to remove the gap property when the container is empty.
In your case
.block-row { display: flex; gap: 32px; }
.block-row:empty { gap: unset; }
I didn't have any empty tags and was still getting this issue. So I just removed gap entirely when in print mode and that worked.
#media print {
* {
gap: 0 !important;
}
}
I have some problems laying out my elements. I tried to achieve the following layout in my web application:
I tried to use div´s and style them but it looks like this when I run it
I wanted to create a grid with three container in each row. Also for responsiveness I used flexbox.
Any suggestions how the layout could improve? I think I messed it up a little.
.contacts-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
h1.subheading {
color: red;
}
.contact {
flex: 0 0 32%;
/* don't grow, don't shrink, width */
margin-bottom: 5px;
border: 1px solid #ddd;
}
.contact a {
color: black;
text-decoration: none;
}
.contactInfo {
padding: 1.4em;
float: left;
}
.contactInfo h2 {
margin-top: 0;
margin-bottom: 0.5em;
font-weight: normal;
}
.contactInfo p {
font-size: 95%;
}
.contactInfo .contactName {
float: right;
}
.contactDetails {
float: left;
}
.contactDetails img {
width: 50px;
height: 50px;
}
#contact .contact-buttons {
position: absolute;
bottom: 0;
left: 0;
}
/* Using flexbox with media queries to make the layout responsive*/
#media screen and (min-width: 40em) {
.contacts-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: -1em;
}
.contact-info {
display: flex;
flex: 0 1 calc(50% - 0.5em);
margin-bottom: 1em;
}
}
#media screen and (min-width: 60em) {
.contacts-container {
margin-top: inherit;
}
.contact-info {
flex: 0 1 calc(33% - 1em);
margin-bottom: 2em;
}
}
<div class="contacts">
<h1 class="subheading">Deine Kontakte</h1>
<div class="contacts-container">
<div v-for="contact in contacts" class="contact" :key="contact.name">
<div class="contactInfo">
<img :src="getImage(contactImg)" />
<div class="contactName">
<p>Prename Surname</p>
<p>City</p>
<p>Country</p>
</div>
</div>
<div class="contactDetails">
<div>
<img :src="getImage(contactImg)" style="" /> test#test.com
</div>
<div>
<img :src="getImage(contactImg)" /> test#test.com
</div>
<div>
<img :src="getImage(contactImg)" /> test#test.com
</div>
</div>
<div class="contact-buttons">
<button v-on:click="counter += 1">Add 1</button>
<button v-on:click="counter += 1">Add 1</button>
</div>
</div>
</div>
</div>
.contacts {
width: 300px;
padding: 40px;
border: 1px solid black;
}
.contact {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.contact .contactInfo {
display: flex;
margin-bottom: 30px;
}
.contact .contactInfo img {}
.contact .contactInfo .contactName {
margin: auto 0;
margin-left: 30px;
}
.contact .contactDetails {
margin-bottom: 30px;
border: 1px solid black;
}
.contact .contactDetails div {
display: flex;
margin: 10px;
}
.contact .contactDetails div p {
margin-left: 30px;
}
.contact .contact-buttons {
width: 100%;
display: flex;
justify-content: space-between;
}
<div class="contacts">
<h1 class="subheading">Deine Kontakte</h1>
<div class="contacts-container">
<div v-for="contact in contacts" class="contact" :key="contact.name">
<div class="contactInfo">
<img src="https://via.placeholder.com/150" />
<div class="contactName">
<p>Prename Surname</p>
<p>City</p>
<p>Country</p>
</div>
</div>
<div class="contactDetails">
<div>
<img src="https://via.placeholder.com/50" />
<p>test#test.com</p>
</div>
<div>
<img src="https://via.placeholder.com/50" />
<p>test#test.com</p>
</div>
<div>
<img src="https://via.placeholder.com/50" />
<p>test#test.com</p>
</div>
</div>
<div class="contact-buttons">
<button v-on:click="counter += 1">Add 1</button>
<button v-on:click="counter += 1">Add 1</button>
</div>
</div>
</div>
</div>
.contact {
margin-bottom: 5px;
border: 1px solid #ddd;
padding: 10px;
}
.contactInfo {
display: flex;
align-items: center;
}
.contactDetails {
border: 1px solid #ddd;
padding: 10px;
}
.contactDetailsRow {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.contactName,
.contactDetailsRowName {
flex: 1;
padding-left: 10px;
}
.contact-buttons {
display: flex;
}
.contact-buttons > button {
flex: 1;
margin: 10px;
}
<div class="contact">
<div class="contactInfo">
<div>
<img src="https://via.placeholder.com/100" />
</div>
<div class="contactName">
<h5>Prename Surname</h5>
<p>City</p>
<p>Country</p>
</div>
</div>
<div class="contactDetails">
<div class="contactDetailsRow">
<div>
<img src="https://via.placeholder.com/50"/>
</div>
<div class="contactDetailsRowName">
test#test.com
</div>
</div>
<div class="contactDetailsRow">
<div>
<img src="https://via.placeholder.com/50"/>
</div>
<div class="contactDetailsRowName">
test#test.com
</div>
</div>
<div class="contactDetailsRow">
<div>
<img src="https://via.placeholder.com/50"/>
</div>
<div class="contactDetailsRowName">
test#test.com
</div>
</div>
</div>
<div class="contact-buttons">
<button>Add 1</button>
<button>Add 1</button>
</div>
</div>
Been a while but something like this?
:root {
--baseMargin: 1.4em;
--buttonBorderRadius: 0.5em 0.5em 0.5em 0.5em;
--paddingBaseFill: calc(var(--baseMargin) * 2);
}
.contactInfo img {
min-width: 10em;
}
.contacts-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
}
h1.subheading {
color: red;
}
.contact {
flex: 0 1;
display: flex;
flex-direction: column;
/* don't grow, don't shrink, width */
margin-bottom: 5px;
border: 1px solid #ddd;
}
.wrapper {
margin: 0 var(--baseMargin);
}
.contact a {
color: black;
text-decoration: none;
}
.contactInfo {
flex: 1 1;
display: flex;
padding: var(--paddingBaseFill) 0;
}
.contactInfo h2 {
margin-top: 0;
margin-bottom: 0.5em;
font-weight: normal;
}
.contactInfo p {
font-size: 95%;
}
.contactInfo .contactName {
flex: 1 1;
margin-left: var(--baseMargin);
text-align: center;
}
.contactDetails {
flex: 1 1;
padding: 1em;
border: 0.1em solid black;
}
.contactDetails div {
display: flex;
align-items: center;
}
.contactDetails img {
width: 50px;
height: 50px;
padding: 0.5em;
}
.contact-buttons {
flex: 1 1;
display: flex;
justify-content: space-between;
padding: var(--baseMargin) 0;
}
.contact-buttons button {
font-size: 1.2em;
background: #018bff;
border-radius: var(--buttonBorderRadius);
padding: 0.25em;
color: #fff;
}
<div class="contacts">
<h1 class="subheading">Deine Kontakte</h1>
<div class="contacts-container">
<div v-for="contact in contacts" class="contact" :key="contact.name">
<div class="contactInfo wrapper">
<img :src="getImage(contactImg)" />
<div class="contactName">
<p>Prename Surname</p>
<p>City</p>
<p>Country</p>
</div>
</div>
<div class="contactDetails wrapper">
<div>
<img :src="getImage(contactImg)" style="" /> test#test.com
</div>
<div>
<img :src="getImage(contactImg)" /> test#test.com
</div>
<div>
<img :src="getImage(contactImg)" /> test#test.com
</div>
</div>
<div class="contact-buttons wrapper">
<button v-on:click="counter += 1">Add 1</button>
<button v-on:click="counter += 1">Add 1</button>
</div>
</div>
</div>
</div>
Currently putting CSS touches on a landing page. How do I get my p elements to align underneath my h2 elements? Like how I'd like it to look like:
Here’s what mine looks like:
And here’s the link to the CodePen.
Thanks in advance.
* {
font-family: Arial;
}
#media (max-width: 768px) {
* {
font-family: Tahoma;}
}
#header {
position: fixed;
width: 100%;
display: flex;
top: 0;
background-color: white;
opacity: 0.8;
}
#header img {
height: 75px;
width: 75px;
margin-top: -10px;
}
#header h1 {
font-size: 23px;
margin-left: -20px;
}
#header nav {
margin-left: 730px;
margin-top: 15px;
}
#header a {
color: black;
text-decoration: none;
}
.nav-link {
margin-right: 10px;
}
#glove {
margin-top: 100px;
margin-left: 50px;
}
.glove-feature {
display: flex;
flex-direction: row;
}
.glove-feature img {
height: 100px;
width; 100px;
}
.description {
padding: 5px;
margin-top: -10px;
margin-bottom: 15px;
}
#features {
margin-top: 50px;
}
#features h2 {
text-align: center;
}
#features iframe{
display: block;
margin: 0 auto;
}
#pricing {
margin-top: 100px;
text-align: center;
border: 1px dashed black;
width: 50%;
margin-left: auto;
margin-right: auto;
display: block;
}
#pricing h3 {
font-weight: normal;
}
#pricing p {
font-style: italic;
}
#close {
margin-top: 50px;
text-align: center;
font-size: 20px;
}
input[type=submit] {
background-color: #DBBC58;
border-radius: 6px;
}
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<div id=header>
<img src="http://www.free-icons-download.net/images/lightning-bolt-logo-icon-76715.png" alt="Lightning" id="header-img">
<h1>Lightning-Fast Muay Thai Gloves</h1>
<nav id="nav-bar">
Why this glove?
Features
Pricing
</nav>
</div>
<div id="glove">
<div id="leather" class="glove-feature">
<img src="https://png.icons8.com/ios/1600/leather-filled.png" alt="leather" id="leather-img">
<div class="description">
<h2>Authentic Leather</h2>
<p>Leather that won't crack and endure even the harshest blows. Straight from Phuket province.</p>
</div>
</div>
<div id="science" class="glove-feature">
<img src="https://cdn3.iconfinder.com/data/icons/pixomania/128/science-512.png" alt="science" id="science-img">
<div class="description">
<h2>Aerodynamically Tested</h2>
<p>Gloves that have been tested time and time again to ensure the fastest strike. Testers may have been injured in the process.</p>
</div>
</div>
<div id="sewing" class="glove-feature">
<img src="https://cdn2.iconfinder.com/data/icons/eldorado-appliance/40/sewing_machine-512.png" alt="sewing" id="sewing-img">
<div class="description">
<h2>Hand-made</h2>
<p>Each and every glove is made in our Bangkok factory from scratch. That's the only way to make sure we deliver what we promise.</p>
</div>
</div>
</div>
<div id="features">
<h2>In-Depth Look</h2>
<iframe id="video" width="600" height="400" src="https://www.youtube.com/embed/xo2xuNYKO0I" frameborder="0" allowfullscreen></iframe>
</div>
<div id="pricing">
<h2>Pricing</h2>
<h3>$49.99</h3>
<p>And if it doesn't last you 36 months...we'll give you a full refund.</p>
</div>
<div id="close">
<form id="form" action="https://www.freecodecamp.com/email-submit">
Take your bouts to the next level: <br>
<input id="email" type="email" placeholder="Email" name="email"><br>
<input id="submit" type="submit">
</form>
</div>
You needed an extra div around your h2s and ps to format them correctly inside of a flex parent. I simplified your CSS and HTML to the minimal correct example, also choosing to use classes instead of IDs for CSS selectors to remove duplicate styles:
* {
font-family: Arial;
}
.glove-feature {
display: flex;
flex-direction: row;
}
.glove-feature img {
height: 150px;
width: 150px;
}
.description {
padding: 10px;
}
<div id="glove">
<div id="leather" class="glove-feature">
<img src="https://png.icons8.com/ios/1600/leather-filled.png" alt="leather" id="leather-img">
<div class="description">
<h2>Authentic Leather</h2>
<p>Leather that won't crack and endure even the harshest blows. Straight from Phuket province.</p>
</div>
</div>
<div id="science" class="glove-feature">
<img src="https://cdn3.iconfinder.com/data/icons/pixomania/128/science-512.png" alt="science" id="science-img">
<div class="description">
<h2>Aerodynamically Tested</h2>
<p>Gloves that have been tested time and time again to ensure the fastest strike. Testers may have been injured in the process.</p>
</div>
</div>
<div id="sewing" class="glove-feature">
<img src="https://cdn2.iconfinder.com/data/icons/eldorado-appliance/40/sewing_machine-512.png" alt="sewing" id="sewing-img">
<div class="description">
<h2>Hand-made</h2>
<p>Each and every glove is made in our Bangkok factory from scratch. That's the only way to make sure we deliver what we promise.</p>
</div>
</div>
Below is the layout, I have used the following styles to push the footer to the bottom, it is very important the footer is anchored to the bottom:
.body {
height: 100vh;
display: flex;
flex-direction: column;
}
.container {
flex: 1 0 auto;
}
I have then used the following styles to try and position the login form vertically between the banner and the footer but is not quite right. The same layout is used by multiple forms of varying heights.
The login-layout__positioner class is my attempt to position it vertically:
.login-layout__positioner {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 0%;
left: 0;
right: 0;
bottom: 0;
}
How can I vertically align the form between the banner and the footer which takes into account different heights for the middle form?
html, body, #global__root, .global__main-content {
height: 100%;
}
.login-layout__positioner {
display: -ms-flexbox;
display: flex;
align-items: center;
position: absolute;
top: -6.5%;
left: 0;
right: 0;
bottom: 0;
}
.app-layout__body {
height: 100vh;
display: flex;
flex-direction: column;
}
.app-layout__container {
flex: 1 0 auto;
}
.banner__container {
color: #fff;
background-color: #0065bd;
}
.banner__top {
padding-top: 22px;
}
.login-layout__container {
background-color: inherit;
width: 100%;
}
wrapper {
max-width: 750px;
margin: 0 auto;
padding: 0 15px;
}
.login-layout__positioner {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.login-layout__form {
padding-left: 0;
}
.medium--eight-twelfths {
width: 66.666%;
}
.login-layout__inner__container {
padding: 0px 30px 30px;
}
.footer__footer {
text-align: left;
color: #fff;
}
.footer__footer {
padding-top: 48px;
padding-bottom: 48px;
}
.footer__footer {
font-size: 19px;
}
.footer__footer {
background-color: #0065bd;
margin-top: 48px;
text-align: center;
font-weight: 700;
font-size: 16px;
padding-top: 16px;
padding-bottom: 16px;
text-align: center;
}
.footer__footer ul {
list-style: none;
margin-left: 0;
}
.footer__footer a,
.footer__footer a:hover,
.footer__footer a:focus,
.footer__footer a:active {
outline: 0;
color: #fff;
}
<div class="app-layout__body">
<div class="wrapper login-layout__container">
<div class="banner__container">
<div class="wrapper banner__top">
<div class="grid">
<div class="grid__item large--one-third banner__grid-item-left">logo</div>
<div class="grid__item large--two-thirds ">
<h2 class="banner__heading-right"> </h2>
</div>
</div>
</div>
</div>
<div class="grid login-layout__positioner">
<div class="grid__item medium--two-thirds login-layout__form">
<div class="login-layout__inner__container">
<div class="grid">
<div class="grid__item ">
<h2 class="">Sign In</h2>
</div>
</div>
<form>
<div>
<div class="grid">
<div class="grid__item ">
<div class="form-group form-control__input">
<label for="email" id="email-label" class="label__default label__strong label__double-margin">Email</label>
<div class="input-wrapper">
<input type="text" autocomplete="off" class="input__default form-control" id="email" name="email" aria-invalid="false" aria-describedby="email-error" value="">
</div>
</div>
</div>
</div>
<div class="grid">
<div class="grid__item ">
<div class="form-group form-control__input">
<label for="password" id="password-label" class="label__default label__strong label__double-margin">Password</label>
<div class="input-wrapper ">
<input type="password" autocomplete="off" class="input__default form-control" id="password" name="password" value="">
</div>
</div>
</div>
</div>
<div class="grid login__button__container">
<div class="grid__item large--two-thirds "><a tabindex="0" href="/business/forgotten-password">Forgotten your password?</a></div>
<div class="grid__item medium--one-third ">
<button class="button__default button__primary" type="submit">LOGIN</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer__footer">
<div class="wrapper">
<div class="grid">
<div class="grid__item ">
<ul>
<li><a target="_blank" href="/static/about">About</a></li>
<li><a target="_blank" href="/static/accessibility">Accessibility</a></li>
<li><a target="_blank" href="/static/cookies">Cookies</a></li>
<li><a target="_blank" href="/static/privacy">Privacy</a></li>
</ul>
</div>
</div>
</div>
</footer>
Sorry, I had to remove about 80% of your div tree because I just couldn't wrap my head around so much stuff.
Here's a simple column layout with a header, a footer and a centered form.
html, body {margin:0}
.app-layout__body {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
header, footer {
min-height: 20vh;
background: blue;
color: white;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
footer ul li a {
color: white;
}
form {
border: green dashed 2px;
}
<div class="app-layout__body">
<header>
<div class="grid__item large--one-third banner__grid-item-left">logo</div>
</header>
<form>
<h2>Sign in</h2>
<p>Email</p>
<input>
<p>Password</p>
<input>
<button>Login</button>
</form>
<footer class="footer__footer">
<ul>
<li><a target="_blank" href="/static/about">About</a></li>
<li><a target="_blank" href="/static/accessibility">Accessibility</a></li>
<li><a target="_blank" href="/static/cookies">Cookies</a></li>
<li><a target="_blank" href="/static/privacy">Privacy</a></li>
</ul>
</footer>
</div>