Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Cascading Style Sheets _ Need help to align items left in footer
Posted by: JUI43555 Apr 9 2023, 07:38 AM
Hi all, i need to align all items in the footer to the left like the screenshot below. This is for the media query when it's in mobile. Except the social icons which need to remain in the center as is.
Tried everything but cant seem to work it out what m doing wrong. Thanks. 
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Frontend Mentor | Fylo landing page with two column layout</title>
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main>
<div class="container">
<header>
<img src="images/logo.svg" alt="Fylo logo" class="logo" />
<ul class="main-nav">
<li><a href="#">Features</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Sign In</a></li>
</ul>
</header>
<div class="top-flex">
<div class="top-flex__left">
<h1>All your files in one secure location, accessible anywhere.</h1>
<p>Fylo stores your most important files in one secure location. Access them wherever you need, share and collaborate with friends, family, and co-workers.</p>
<div class="email-form-container">
<input type="text" class="email" placeholder="Enter your email..." />
<button class="email-form-button"><a href="#">Get started</a></button>
</div>
</div>
<div class="top-rightimage">
<img src="images/illustration-1.svg" alt="" class="illustrations" />
</div>
</div>
<!-- <img src="images/bg-curve-desktop.svg" alt="" class="curve1" /> -->
<div class="middle-flex">
<div class="middle-container__content">
<h1>Stay productive, wherever you are</h1>
<p>Never let location be an issue when accessing your files. Fylo has you covered for all of your file storage needs.</p>
<p>Securely share files and folders with friends, family and colleagues for live collaboration. No email attachments required!</p>
<a href="#">See how Fylo works <img src="images/icon-arrow.svg" alt="" class="arrow" /></a>
<div class="testimonial-box">
<img src="images/icon-quotes.svg" alt="quotation marks" />
<p>Fylo has improved our team productivity by an order of magnitude. Since making the switch our team has become a well-oiled collaboration machine.</p>
<div class="user-info">
<div><img src="images/avatar-testimonial.jpg" alt="" /></div>
<div>
<h4>Kyle Burton</h4>
<small>Founder & CEO, Huddle</small>
</div>
</div>
</div>
</div>
<div class="middle-imageright">
<img src="images/illustration-2.svg" alt="" class="illustrations" />
</div>
</div>
<div class="bottom-flex">
<div class="bottom-section__content">
<h1>Get early access today</h1>
<p>It only takes a minute to sign up and our free starter tier is extremely generous. If you have any questions, our support team would be happy to help you.</p>
</div>
<div class="bottom-section_form">
<input type="text" class="email2" placeholder="email@example.com.au" />
<button><a href="#">Get started for free</a></button>
</div>
</div>
<footer>
<div class="footer-container">
<div class="footer-container__logo-contact flex">
<img src="images/logo_white.svg" alt="" class="footer-logo" />
<p><img src="images/icon-phone.svg" alt="" />Phone: +1-543-123-4567</p>
<p><img src="images/icon-email.svg" alt="" />example@fylo.com</p>
</div>
<div class="row1 flex">
<ul>
<li><a href="#"></a>About Us</li>
<li><a href="#"></a>Jobs</li>
<li><a href="#"></a>Press</li>
<li><a href="#"></a>Blog</li>
</ul>
</div>
<div class="row2 flex">
<ul>
<li><a href="#"></a>Contact Us</li>
<li><a href="#"></a>Terms</li>
<li><a href="#"></a>Privacy</li>
</ul>
</div>
<div class="social">
<a href="#"><img src="assets/small_facebook_media_online_social_icon.png" alt="facebook" /></a>
<a href="#"><img src="Assets/small_twitter_icon.png" alt="twitter" /></a>
<a href="#"><img src="assets/small_instagram_media_online_social_icon.png" alt="instagram" /></a>
</div>
</div>
</footer>
</div>
</main>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Frontend Mentor | Fylo landing page with two column layout</title>
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main>
<div class="container">
<header>
<img src="images/logo.svg" alt="Fylo logo" class="logo" />
<ul class="main-nav">
<li><a href="#">Features</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Sign In</a></li>
</ul>
</header>
<div class="top-flex">
<div class="top-flex__left">
<h1>All your files in one secure location, accessible anywhere.</h1>
<p>Fylo stores your most important files in one secure location. Access them wherever you need, share and collaborate with friends, family, and co-workers.</p>
<div class="email-form-container">
<input type="text" class="email" placeholder="Enter your email..." />
<button class="email-form-button"><a href="#">Get started</a></button>
</div>
</div>
<div class="top-rightimage">
<img src="images/illustration-1.svg" alt="" class="illustrations" />
</div>
</div>
<!-- <img src="images/bg-curve-desktop.svg" alt="" class="curve1" /> -->
<div class="middle-flex">
<div class="middle-container__content">
<h1>Stay productive, wherever you are</h1>
<p>Never let location be an issue when accessing your files. Fylo has you covered for all of your file storage needs.</p>
<p>Securely share files and folders with friends, family and colleagues for live collaboration. No email attachments required!</p>
<a href="#">See how Fylo works <img src="images/icon-arrow.svg" alt="" class="arrow" /></a>
<div class="testimonial-box">
<img src="images/icon-quotes.svg" alt="quotation marks" />
<p>Fylo has improved our team productivity by an order of magnitude. Since making the switch our team has become a well-oiled collaboration machine.</p>
<div class="user-info">
<div><img src="images/avatar-testimonial.jpg" alt="" /></div>
<div>
<h4>Kyle Burton</h4>
<small>Founder & CEO, Huddle</small>
</div>
</div>
</div>
</div>
<div class="middle-imageright">
<img src="images/illustration-2.svg" alt="" class="illustrations" />
</div>
</div>
<div class="bottom-flex">
<div class="bottom-section__content">
<h1>Get early access today</h1>
<p>It only takes a minute to sign up and our free starter tier is extremely generous. If you have any questions, our support team would be happy to help you.</p>
</div>
<div class="bottom-section_form">
<input type="text" class="email2" placeholder="email@example.com.au" />
<button><a href="#">Get started for free</a></button>
</div>
</div>
<footer>
<div class="footer-container">
<div class="footer-container__logo-contact flex">
<img src="images/logo_white.svg" alt="" class="footer-logo" />
<p><img src="images/icon-phone.svg" alt="" />Phone: +1-543-123-4567</p>
<p><img src="images/icon-email.svg" alt="" />example@fylo.com</p>
</div>
<div class="row1 flex">
<ul>
<li><a href="#"></a>About Us</li>
<li><a href="#"></a>Jobs</li>
<li><a href="#"></a>Press</li>
<li><a href="#"></a>Blog</li>
</ul>
</div>
<div class="row2 flex">
<ul>
<li><a href="#"></a>Contact Us</li>
<li><a href="#"></a>Terms</li>
<li><a href="#"></a>Privacy</li>
</ul>
</div>
<div class="social">
<a href="#"><img src="assets/small_facebook_media_online_social_icon.png" alt="facebook" /></a>
<a href="#"><img src="Assets/small_twitter_icon.png" alt="twitter" /></a>
<a href="#"><img src="assets/small_instagram_media_online_social_icon.png" alt="instagram" /></a>
</div>
</div>
</footer>
</div>
</main>
</body>
</html>
CODE
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&family=Raleway:wght@400;700&display=swap");
/* font-family: 'Open Sans', sans-serif;
font-family: 'Raleway', sans-serif; */
:root {
/* ### Primary */
--Very-Dark-Blue: hsl(243, 87%, 12%);
--Desaturated-Blue: hsl(238, 22%, 44%);
/* ### Accent */
--Bright-Blue: hsl(224, 93%, 58%);
--Moderate-Cyan: hsl(170, 45%, 43%);
/* ### Neutral */
--Light-Grayish-Blue: hsl(240, 75%, 98%);
--Light-Gray: hsl(0, 0%, 75%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
main {
margin: 0 auto;
max-width: 100%;
/* width: 1200px; */
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Raleway", sans-serif;
}
body {
margin: 0;
font-family: "Open Sans", sans-serif;
font-size: 16px;
line-height: 1.6;
color: #4b4e6d;
background-color: #fff;
}
.container {
margin: 0 auto;
}
/* header */
header {
display: flex;
justify-content: space-between;
padding: 30px;
}
.logo {
width: 150px;
height: 45px;
align-items: center;
margin: 30px 0;
}
.illustrations {
width: 500px;
margin: auto 50px;
}
.main-nav {
display: flex;
justify-content: space-between;
list-style: none;
align-items: center;
margin: 30px 0;
}
.main-nav li {
margin-right: 30px;
}
.main-nav a {
color: var(--Very-Dark-Blue);
text-decoration: none;
}
/* top section */
.top-flex {
display: flex;
padding: 30px;
align-items: center;
}
.top-flex > div {
flex: 1;
}
.top-flex__left h1 {
line-height: 50px;
margin-bottom: 10px;
}
.top-flex__left p {
margin-bottom: 20px;
word-spacing: 0.1rem;
}
/* email & button */
.email-form-container {
display: flex;
flex-direction: row;
gap: 10px;
}
.email {
width: 70%;
border: 1px solid grey;
border-radius: 5px;
}
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
padding: 10px;
}
.email-form-button {
background-color: var(--Bright-Blue);
color: white;
padding: 10px;
border: none;
border-radius: 3px;
width: 30%;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.email-form-button a {
color: white;
text-decoration: none;
}
/* Middle section */
.curve1 {
float: left;
}
.middle-flex {
/* background-color: var(--Light-Grayish-Blue); */
background-color: rgba(248, 248, 253);
display: flex;
padding: 30px;
align-items: center;
}
.middle-flex > div {
flex: 1;
}
.middle-container__content h1 {
margin-bottom: 20px;
}
.middle-container__content p {
margin-bottom: 15px;
word-spacing: 0.1rem;
}
.middle-container__content a {
color: var(--Moderate-Cyan);
text-underline-offset: 8px;
}
/* testimonial card */
.testimonial-box {
background-color: #fff;
padding: 20px;
margin-top: 30px;
width: 60%;
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
border-radius: 5px;
}
.testimonial-box p {
font-size: 14px;
font-weight: 600;
line-height: 25px;
}
.user-info {
display: flex;
align-items: center;
font-size: 12px;
}
.user-info img {
height: 40px;
width: 40px;
border-radius: 50%;
margin-right: 10px;
}
/* Dark purple bottom section */
.bottom-flex {
background-color: var(--Desaturated-Blue);
display: flex;
padding: 40px;
}
.bottom-flex > div {
flex: 1;
}
.bottom-section__content {
margin: 40px 0;
color: white;
}
.bottom-section_form {
display: flex;
flex-direction: column;
justify-content: center;
}
.bottom-section__content h1 {
margin-bottom: 20px;
}
.bottom-section__content p {
width: 80%;
}
.email2 {
width: 80%;
padding: 10px;
margin-bottom: 10px;
}
.bottom-section_form button {
background-color: var(--Bright-Blue);
color: white;
text-decoration: none;
padding: 10px;
border: none;
border-radius: 3px;
width: 35%;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.bottom-section_form button a {
text-decoration: none;
color: white;
}
/* Footer */
footer {
color: white;
background-color: var(--Very-Dark-Blue);
}
.footer-container {
display: flex;
justify-content: space-evenly;
align-items: center;
}
.flex {
margin: 140px 20px;
}
.footer-logo {
margin-bottom: 10px;
}
.footer-container__logo-contact {
margin-top: 50px;
}
.footer-container__logo-contact img {
margin-right: 15px;
}
.footer-container__logo-contact p {
margin-bottom: 10px;
}
.flex li {
margin-bottom: 10px;
text-decoration: none;
list-style: none;
}
.social img {
margin-right: 10px;
}
@media only screen and (max-width: 700px) {
.top-flex {
display: flex;
flex-direction: column-reverse;
text-align: center;
gap: 20px;
}
.middle-flex {
display: flex;
flex-direction: column;
}
/* email input & button - mobile */
.email-form-container {
display: flex;
flex-direction: column;
align-items: center;
}
.email {
padding: 15px;
width: 90%;
}
.email-form-button {
padding: 15px;
width: 90%;
}
/* middle section mobile */
.middle-flex {
display: flex;
flex-direction: column-reverse;
text-align: center;
}
.testimonial-box {
text-align: start;
margin: auto;
margin-top: 20px;
width: 80%;
}
.bottom-flex {
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
align-items: center;
}
.bottom-section_form {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.bottom-section_form button {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
margin-bottom: 50px;
}
.footer-container {
display: flex;
flex-direction: column;
justify-content: left;
align-items: left;
text-align: left;
}
.flex {
margin: 20px;
display: flex;
flex-direction: column;
}
.social {
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 50px;
}
}
/* font-family: 'Open Sans', sans-serif;
font-family: 'Raleway', sans-serif; */
:root {
/* ### Primary */
--Very-Dark-Blue: hsl(243, 87%, 12%);
--Desaturated-Blue: hsl(238, 22%, 44%);
/* ### Accent */
--Bright-Blue: hsl(224, 93%, 58%);
--Moderate-Cyan: hsl(170, 45%, 43%);
/* ### Neutral */
--Light-Grayish-Blue: hsl(240, 75%, 98%);
--Light-Gray: hsl(0, 0%, 75%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
main {
margin: 0 auto;
max-width: 100%;
/* width: 1200px; */
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Raleway", sans-serif;
}
body {
margin: 0;
font-family: "Open Sans", sans-serif;
font-size: 16px;
line-height: 1.6;
color: #4b4e6d;
background-color: #fff;
}
.container {
margin: 0 auto;
}
/* header */
header {
display: flex;
justify-content: space-between;
padding: 30px;
}
.logo {
width: 150px;
height: 45px;
align-items: center;
margin: 30px 0;
}
.illustrations {
width: 500px;
margin: auto 50px;
}
.main-nav {
display: flex;
justify-content: space-between;
list-style: none;
align-items: center;
margin: 30px 0;
}
.main-nav li {
margin-right: 30px;
}
.main-nav a {
color: var(--Very-Dark-Blue);
text-decoration: none;
}
/* top section */
.top-flex {
display: flex;
padding: 30px;
align-items: center;
}
.top-flex > div {
flex: 1;
}
.top-flex__left h1 {
line-height: 50px;
margin-bottom: 10px;
}
.top-flex__left p {
margin-bottom: 20px;
word-spacing: 0.1rem;
}
/* email & button */
.email-form-container {
display: flex;
flex-direction: row;
gap: 10px;
}
.email {
width: 70%;
border: 1px solid grey;
border-radius: 5px;
}
::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
padding: 10px;
}
.email-form-button {
background-color: var(--Bright-Blue);
color: white;
padding: 10px;
border: none;
border-radius: 3px;
width: 30%;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.email-form-button a {
color: white;
text-decoration: none;
}
/* Middle section */
.curve1 {
float: left;
}
.middle-flex {
/* background-color: var(--Light-Grayish-Blue); */
background-color: rgba(248, 248, 253);
display: flex;
padding: 30px;
align-items: center;
}
.middle-flex > div {
flex: 1;
}
.middle-container__content h1 {
margin-bottom: 20px;
}
.middle-container__content p {
margin-bottom: 15px;
word-spacing: 0.1rem;
}
.middle-container__content a {
color: var(--Moderate-Cyan);
text-underline-offset: 8px;
}
/* testimonial card */
.testimonial-box {
background-color: #fff;
padding: 20px;
margin-top: 30px;
width: 60%;
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
border-radius: 5px;
}
.testimonial-box p {
font-size: 14px;
font-weight: 600;
line-height: 25px;
}
.user-info {
display: flex;
align-items: center;
font-size: 12px;
}
.user-info img {
height: 40px;
width: 40px;
border-radius: 50%;
margin-right: 10px;
}
/* Dark purple bottom section */
.bottom-flex {
background-color: var(--Desaturated-Blue);
display: flex;
padding: 40px;
}
.bottom-flex > div {
flex: 1;
}
.bottom-section__content {
margin: 40px 0;
color: white;
}
.bottom-section_form {
display: flex;
flex-direction: column;
justify-content: center;
}
.bottom-section__content h1 {
margin-bottom: 20px;
}
.bottom-section__content p {
width: 80%;
}
.email2 {
width: 80%;
padding: 10px;
margin-bottom: 10px;
}
.bottom-section_form button {
background-color: var(--Bright-Blue);
color: white;
text-decoration: none;
padding: 10px;
border: none;
border-radius: 3px;
width: 35%;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.bottom-section_form button a {
text-decoration: none;
color: white;
}
/* Footer */
footer {
color: white;
background-color: var(--Very-Dark-Blue);
}
.footer-container {
display: flex;
justify-content: space-evenly;
align-items: center;
}
.flex {
margin: 140px 20px;
}
.footer-logo {
margin-bottom: 10px;
}
.footer-container__logo-contact {
margin-top: 50px;
}
.footer-container__logo-contact img {
margin-right: 15px;
}
.footer-container__logo-contact p {
margin-bottom: 10px;
}
.flex li {
margin-bottom: 10px;
text-decoration: none;
list-style: none;
}
.social img {
margin-right: 10px;
}
@media only screen and (max-width: 700px) {
.top-flex {
display: flex;
flex-direction: column-reverse;
text-align: center;
gap: 20px;
}
.middle-flex {
display: flex;
flex-direction: column;
}
/* email input & button - mobile */
.email-form-container {
display: flex;
flex-direction: column;
align-items: center;
}
.email {
padding: 15px;
width: 90%;
}
.email-form-button {
padding: 15px;
width: 90%;
}
/* middle section mobile */
.middle-flex {
display: flex;
flex-direction: column-reverse;
text-align: center;
}
.testimonial-box {
text-align: start;
margin: auto;
margin-top: 20px;
width: 80%;
}
.bottom-flex {
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
align-items: center;
}
.bottom-section_form {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.bottom-section_form button {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
margin-bottom: 50px;
}
.footer-container {
display: flex;
flex-direction: column;
justify-content: left;
align-items: left;
text-align: left;
}
.flex {
margin: 20px;
display: flex;
flex-direction: column;
}
.social {
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 50px;
}
}
Posted by: Jason Knight Apr 9 2023, 11:14 AM
See the justify-content on .social? Switch that to "start". Or just remove the flex and flex-related properties from that entirely since you don't need them.
That said, you've got MAJOR issues with your markup. The <main> wrapping everything is jibbberish, it's unlikely you need the containing <div>, you have an IMG tag doing H1's job, no NAV around the menu, endless pointless DIV for nothing or DIV doing SECTION's job, DIV doing FORM's job, PLACEHOLDER doing LABEL's job, DIV doing BLOCKQUOTE's job, H4 doing CITE or FIGCAPTION's job, the social anchors have no "non-screen" content and are just anchors slopped in any-old-way, anchor inside a button, multiple H1 violating logical document structure, H4 without any H3 for it to be marking the start of a subsection of, paragraphs around elements and content that are not grammatical paragraphs... and that's just the markup.
Don't get me started about all those PX declarations in the CSS telling users with accessibility needs to go plow themselves.
Also not helping is trying to load the font from the CSS, meaning the CSS has to load first delaying the font. @import is almost always a bad idea unless you're going to add a <link rel="preload">, in which case just put it in the markup!
No offense, but it's a laundry-list of how NOT to use HTML or CSS properly. *SIGH* alright, let's try first to clean up the markup.
Where are you learning to code from? Methinks we need to give you some corrective action.
Posted by: JUI43555 Apr 9 2023, 01:49 PM
QUOTE(Jason Knight @ Apr 10 2023, 12:14 AM) 
See the justify-content on .social? Switch that to "start". Or just remove the flex and flex-related properties from that entirely since you don't need them.
That said, you've got MAJOR issues with your markup. The <main> wrapping everything is jibbberish, it's unlikely you need the containing <div>, you have an IMG tag doing H1's job, no NAV around the menu, endless pointless DIV for nothing or DIV doing SECTION's job, DIV doing FORM's job, PLACEHOLDER doing LABEL's job, DIV doing BLOCKQUOTE's job, H4 doing CITE or FIGCAPTION's job, the social anchors have no "non-screen" content and are just anchors slopped in any-old-way, anchor inside a button, multiple H1 violating logical document structure, H4 without any H3 for it to be marking the start of a subsection of, paragraphs around elements and content that are not grammatical paragraphs... and that's just the markup.
Don't get me started about all those PX declarations in the CSS telling users with accessibility needs to go plow themselves.
Also not helping is trying to load the font from the CSS, meaning the CSS has to load first delaying the font. @import is almost always a bad idea unless you're going to add a <link rel="preload">, in which case just put it in the markup!
No offense, but it's a laundry-list of how NOT to use HTML or CSS properly. *SIGH* alright, let's try first to clean up the markup.
Where are you learning to code from? Methinks we need to give you some corrective action.
Thanks for the feedback, I guess. This is my first project like this which I’ve started from scratch independent of guides etc so yeah it’s very much a work in progress. I’ve been coding for a month and a month ago I couldnt even link a css style sheet. I’m learning from YouTube and asking for help in this forum.
I’m aware I’ve got a lot of work to do, I’ll get there.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)