The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Need help to align items left in footer
JUI43555
post Apr 9 2023, 07:38 AM
Post #1


Member
***

Group: Members
Posts: 44
Joined: 6-March 23
From: Perth
Member No.: 28,833
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.

IPB Image


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>


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;
    }

    
}


This post has been edited by JUI43555: Apr 9 2023, 07:39 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jason Knight
post Apr 9 2023, 11:14 AM
Post #2


Advanced Member
****

Group: Members
Posts: 103
Joined: 25-December 22
Member No.: 28,719
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.

This post has been edited by Jason Knight: Apr 9 2023, 11:19 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JUI43555
post Apr 9 2023, 01:49 PM
Post #3


Member
***

Group: Members
Posts: 44
Joined: 6-March 23
From: Perth
Member No.: 28,833
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 27th April 2024 - 09:42 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC