Flexbox Footer Wrap Not Expanding - css

Question

I am trying to set up my flexbox for responsiveness and accessibility. However as can be seen in the attached images, for some reason text is lost when reducing screen size.
Image of webpage at full size
Image of reduced size & clashing elements
/* Footer Styling Definitions */
footer {
display: flex;
flex-direction: row;
margin-top: 0px;
text-align: center;
background-color: black;
color: aliceblue;
}
#footer_left {
flex: 1;
padding-left: 5px;
}
#footer_centre {
flex: 1;
padding-left: 5px;
}
#footer_right {
flex: 1;
padding-left: 5px;
position: relative;
}
.logo_footer {
padding-top: 10px;
padding-bottom: 10px;
}
.legal {
margin: 0;
padding-top: 5px;
position: absolute;
top: 90%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.legal_stuff {
text-decoration: none;
color: white;
}
.privacy_policy {
text-decoration: none;
color: white;
}
.privacy_policy:hover {
font-weight: bold;
}
.legal_stuff:hover {
font-weight: bold;
}
#media screen and (max-width: 1024px) {
section {
width: 100%;
}
}
#media screen and (max-width: 800px) {
nav {
width: 100%;
}
section {
flex-direction: column;
}
aside {
display: none;
}
nav ul {
flex-direction: column;
}
form {
margin: 0 auto;
flex-direction: column;
}
.label {
text-align: left;
}
footer {
flex-direction: column;
}
}
I would love some assistance - sorry I am just new to web development so I am trying to learn as much as I can.

Answer 1

I think it can help you.
This is my screenshot image.
#charset "UTF-8";
/* CSS Document */
#import url('https://fonts.googleapis.com/css2?family=Baloo+2&family=Comfortaa&family=Shadows+Into+Light&display=swap');
body {
font-size: 100%;
line-height: 1.5;
margin: 0;
padding: 0;
font-family: 'Baloo 2', cursive;
/*font-family: 'Comfortaa', cursive;*/
height: 100vh;
}
p {
margin: auto;
text-align: center;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
h1 {
}
h2 {
text-align: center;
font-size: 2em;
margin-bottom: auto;
margin-top: auto;
}
/* Navigation Styling Definitions */
nav {
width: 100%;
top: 0;
position: fixed;
background-color: rgba(255,255,255,0.70);
z-index: 101;
}
nav ul {
display: flex;
}
nav li {
flex: 1;
display: inline;
list-style-type: none;
text-align: center;
}
nav a {
text-decoration: none;
color: black;
}
nav a:hover {
text-decoration: overline underline;
color: darkslategray;
}
/* Header Styling Definitions */
header {
background-image: url("images/sunset-1645103.jpeg");
position: relative;
width: 100%;
height: 200px;
background-position: center;
margin-top: 55px;
}
.logo_header {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/* Section Styling Definitions */
section {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
width: 100%;
margin: 0 auto;
}
.phone {
text-decoration: none;
color: black;
}
.phone:hover {
color: darkslategray;
}
.call_img {
width: 40px;
height: 40px;
padding-bottom: -10px;
}
/* Aside Styling Definitions */
aside {
flex: 1;
background-color: blue;
}
/* Article Styling Definitions */
article {
display: flex;
flex: 3;
background-color: transparent;
}
#article_left {
flex: 1;
align-content: center;
margin-right: auto;
background-color: aqua;
}
#article_right {
flex: 1;
align-content: center;
justify-content: center;
padding-bottom: 5px;
background-color: transparent;
margin-left: auto;
}
.cta {
flex: 30;
border: 1px solid black;
border-radius: 5px;
margin: 25px;
padding-left: 5px;
}
form {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 0 auto;
width: 80%;
}
.input-box {
padding-right: 5px;
display: flex;
width: 100%;
margin-bottom: 10px;
}
label {
width: 45%;
padding-right: 5px;
text-align: right;
}
input, textarea {
width: 150%;
}
/* Footer Styling Definitions */
footer {
display: flex;
flex-direction: row;
margin-top: 0px;
text-align: center;
background-color: black;
color: aliceblue;
}
#footer_left {
flex: 1;
padding-left: 5px;
}
#footer_centre {
flex: 1;
padding-left: 5px;
}
#footer_right {
flex: 1;
padding-left: 5px;
position: relative;
display: flex;
justify-content: center;
align-items: flex-end;
}
.logo_footer {
padding-top: 10px;
padding-bottom: 10px;
}
.legal {
margin: 0;
padding-top: 5px;
}
.legal_stuff {
text-decoration: none;
color: white;
}
.privacy_policy {
text-decoration: none;
color: white;
}
.privacy_policy:hover {
font-weight: bold;
}
.legal_stuff:hover {
font-weight: bold;
}
#media screen and (max-width: 1024px) {
section {
width: 100%;
}
}
#media screen and (max-width: 800px) {
nav {
width: 100%;
}
section {
flex-direction: column;
}
aside {
display: none;
}
nav ul {
flex-direction: column;
}
form {
margin: 0 auto;
flex-direction: column;
}
.label {
text-align: left;
}
footer {
flex-direction: column;
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css" text="text/css">
<title>Summer Escapes | Contact Us</title>
</head>
<body>
<!-- Main Navigation -->
<nav>
<ul>
<lI>Home</lI>
<lI>Reviews</lI>
<lI>Feedback</lI>
<lI>Contact Us</lI>
</ul>
</nav>
<!-- End Main Naigation -->
<!-- Page Header -->
<header>
<img class="logo_header" src="images/sunset_escapes_logo.png" alt="Summer Escapes Logo" height="auto">
</header>
<!-- End Page Header -->
<!-- Main Content -->
<section>
<article>
<div id="article_left">
<h2>Call Us!</h2>
<img class="call_img" src="images/phone-icon-925.png">
<h3>
<p>Want to speak to a human regarding our Summer Escapes reviews?</p>
<p>Maybe you have a review request?</p>
<p>Call us now!</p>
<p><a class="phone" href="tel:[phone]">[phone]</a></p>
</h3>
</div>
<div id="article_right">
<h2>Contact Us!</h2>
<form id="contact_form">
<div class="input-box">
<label for="contact_name">Full name:</label>
<input type="text" id="contact_name" name="contact_name" placeholder="Name">
</div>
<div class="input-box">
<label for="contact_phone">Mobile number:</label>
<input type="tel" id="contact_phone" name="contact_phone" placeholder="Mobile number">
</div>
<div class="input-box">
<label for="contact_email">Email address:</label>
<input type="email" id="contact_email" name="contact_email" placeholder="E-mail address">
</div>
<div class="input-box">
<label for="contact_message">Message:</label>
<textarea rows="4" cols="40" id="contact_message" name="contact+message" style="resize: none"></textarea>
</div>
<div class="button">
<button type="submit">Submit</button>
</div>
</form>
</div>
</article>
</section>
<!-- End Main Content -->
<!-- Footer -->
<footer>
<div id="footer_left">
<p>Socials</p>
</div>
<div id="footer_centre">
<img class="logo_footer" src="images/sunset_escapes_logo_inverted.png" alt="Summer Escapes Logo">
<p>Copyright © 2021 Summer Escapes</p>
</div>
<div id="footer_right">
<div class="legal">
<a class="legal_stuff" href="#" target="new">Legal Stuff</a> | <a class="privacy_policy" href="#" target="new">Privacy Policy</a>
</div>
</div>
</footer>
<!-- End Footer -->
</body>
</html>

Answer 2

#charset "UTF-8";
/* CSS Document */
#import url('https://fonts.googleapis.com/css2?family=Baloo+2&family=Comfortaa&family=Shadows+Into+Light&display=swap');
body {
font-size: 100%;
line-height: 1.5;
margin: 0;
padding: 0;
font-family: 'Baloo 2', cursive;
/*font-family: 'Comfortaa', cursive;*/
height: 100vh;
}
p {
margin: auto;
text-align: center;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
h1 {
}
h2 {
text-align: center;
font-size: 2em;
margin-bottom: auto;
margin-top: auto;
}
/* Navigation Styling Definitions */
nav {
width: 100%;
top: 0;
position: fixed;
background-color: rgba(255,255,255,0.70);
z-index: 101;
}
nav ul {
display: flex;
}
nav li {
flex: 1;
display: inline;
list-style-type: none;
text-align: center;
}
nav a {
text-decoration: none;
color: black;
}
nav a:hover {
text-decoration: overline underline;
color: darkslategray;
}
/* Header Styling Definitions */
header {
background-image: url("images/sunset-1645103.jpeg");
position: relative;
width: 100%;
height: 200px;
background-position: center;
margin-top: 55px;
}
.logo_header {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/* Section Styling Definitions */
section {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
width: 100%;
margin: 0 auto;
}
.phone {
text-decoration: none;
color: black;
}
.phone:hover {
color: darkslategray;
}
.call_img {
width: 40px;
height: 40px;
padding-bottom: -10px;
}
/* Aside Styling Definitions */
aside {
flex: 1;
background-color: blue;
}
/* Article Styling Definitions */
article {
display: flex;
flex: 3;
background-color: transparent;
}
#article_left {
flex: 1;
align-content: center;
margin-right: auto;
background-color: aqua;
}
#article_right {
flex: 1;
align-content: center;
justify-content: center;
padding-bottom: 5px;
background-color: transparent;
margin-left: auto;
}
.cta {
flex: 30;
border: 1px solid black;
border-radius: 5px;
margin: 25px;
padding-left: 5px;
}
form {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 0 auto;
width: 80%;
}
.input-box {
padding-right: 5px;
display: flex;
width: 100%;
margin-bottom: 10px;
}
label {
width: 45%;
padding-right: 5px;
text-align: right;
}
input, textarea {
width: 150%;
}
/* Footer Styling Definitions */
footer {
display: flex;
flex-direction: row;
margin-top: 0px;
text-align: center;
background-color: black;
color: aliceblue;
}
#footer_left {
flex: 1;
padding-left: 5px;
}
#footer_centre {
flex: 1;
padding-left: 5px;
}
#footer_right {
flex: 1;
padding-left: 5px;
position: relative;
}
.logo_footer {
padding-top: 10px;
padding-bottom: 10px;
}
.legal {
margin: 0;
padding-top: 5px;
position: absolute;
top: 90%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.legal_stuff {
text-decoration: none;
color: white;
}
.privacy_policy {
text-decoration: none;
color: white;
}
.privacy_policy:hover {
font-weight: bold;
}
.legal_stuff:hover {
font-weight: bold;
}
#media screen and (max-width: 1024px) {
section {
width: 100%;
}
}
#media screen and (max-width: 800px) {
nav {
width: 100%;
}
section {
flex-direction: column;
}
aside {
display: none;
}
nav ul {
flex-direction: column;
}
form {
margin: 0 auto;
flex-direction: column;
}
.label {
text-align: left;
}
footer {
flex-direction: column;
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css" text="text/css">
<title>Summer Escapes | Contact Us</title>
</head>
<body>
<!-- Main Navigation -->
<nav>
<ul>
<lI>Home</lI>
<lI>Reviews</lI>
<lI>Feedback</lI>
<lI>Contact Us</lI>
</ul>
</nav>
<!-- End Main Naigation -->
<!-- Page Header -->
<header>
<img class="logo_header" src="images/sunset_escapes_logo.png" alt="Summer Escapes Logo" height="auto">
</header>
<!-- End Page Header -->
<!-- Main Content -->
<section>
<article>
<div id="article_left">
<h2>Call Us!</h2>
<img class="call_img" src="images/phone-icon-925.png">
<h3>
<p>Want to speak to a human regarding our Summer Escapes reviews?</p>
<p>Maybe you have a review request?</p>
<p>Call us now!</p>
<p><a class="phone" href="tel:[phone]">[phone]</a></p>
</h3>
</div>
<div id="article_right">
<h2>Contact Us!</h2>
<form id="contact_form">
<div class="input-box">
<label for="contact_name">Full name:</label>
<input type="text" id="contact_name" name="contact_name" placeholder="Name">
</div>
<div class="input-box">
<label for="contact_phone">Mobile number:</label>
<input type="tel" id="contact_phone" name="contact_phone" placeholder="Mobile number">
</div>
<div class="input-box">
<label for="contact_email">Email address:</label>
<input type="email" id="contact_email" name="contact_email" placeholder="E-mail address">
</div>
<div class="input-box">
<label for="contact_message">Message:</label>
<textarea rows="4" cols="40" id="contact_message" name="contact+message" style="resize: none"></textarea>
</div>
<div class="button">
<button type="submit">Submit</button>
</div>
</form>
</div>
</article>
</section>
<!-- End Main Content -->
<!-- Footer -->
<footer>
<div id="footer_left">
<p>Socials</p>
</div>
<div id="footer_centre">
<img class="logo_footer" src="images/sunset_escapes_logo_inverted.png" alt="Summer Escapes Logo">
<p>Copyright © 2021 Summer Escapes</p>
</div>
<div id="footer_right">
<div class="legal">
<a class="legal_stuff" href="#" target="new">Legal Stuff</a> | <a class="privacy_policy" href="#" target="new">Privacy Policy</a>
</div>
</div>
</footer>
<!-- End Footer -->
</body>
</html>