I have a working code for flex in css. Although the buttons are realigning but the blue bars is not moving. Due to this changing the screen size make it seem that all the buttons have disappeared.
*
{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body
{
background-image: url(background.jpg);
background-size: cover;
background-position : center;
font-family: sans-serif;
}
.menu-bar
{
background: #273044;
text-align: center;
height:30px;
}
.menu-bar ul
{
display: inline-flex;
list-style: none;
color: #fff;
}
.menu-bar ul li
{
width: 120px;
place-items:center;
display: grid;
padding: 5px;
}
.menu-bar ul li a
{
text-decoration: none;
color: white;
}
.active, .menu-bar ul li:hover
{
background-color: #0b56ab;
height:auto;
height:30px;
}
.toggle-button{
position: absolute;
top: 0.75rem;
right: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 31px;
height: 21px;
}
.toggle-button .bar{
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media(max-width: 700px){
.toggle-button{
display:flex;
}
.menu-bar-links{
/* display:none; */
width:100%;
}
.menu-bar{
flex-direction: column;
align-items: flexstart;
}
.menu-bar-links ul{
width:100%;
flex-direction: column;
}
.menu-bar-links li{
text-align: center;
}
}
/* body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#919191; background-color:#232323;} */
This is my HTML Code:
<html>
<head>
<title> Title of page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.1/css/fontawesome.min.css">
</head>
<!----header---->
<body>
<div class="menu-bar">
<a href = "#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="menu-bar-links">
<ul>
<li class="active">Home</li>
<li>About us</li>
<li>Services</li>
<li>Investors</li>
<li>Pricing</li>
<li>Training </li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- <div class= "grid">
</div> -->
</body>
</html>
This is how it looks when in full screen:
When i rearrange the screen it looks like this:
As you can see all the buttons seems to have disappeared except the one which is hovered over
It is also not centering even with
.menu-bar-links li{
text-align: center;
The problem you have is that you have a fixed height on your .menu-bar, namely height: 30px. You're better off removing that, adding some padding for presentation and making the .menu-bar element a flex container.
Link to CodePen:
https://codepen.io/thechewy/pen/QWQQMjg
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.menu-bar {
background: #273044;
text-align: center;
/* height: 30px; */
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
}
.menu-bar ul {
display: inline-flex;
list-style: none;
color: #fff;
}
.menu-bar ul li {
width: 120px;
place-items: center;
display: grid;
padding: 5px;
}
.menu-bar ul li a {
text-decoration: none;
color: white;
}
.active,
.menu-bar ul li:hover {
background-color: #0b56ab;
height: auto;
height: 30px;
}
.toggle-button {
position: absolute;
right: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 31px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 700px) {
.toggle-button {
display: flex;
}
.menu-bar-links {
/* display:none; */
width: 100%;
}
.menu-bar {
flex-direction: column;
align-items: flexstart;
}
.menu-bar-links ul {
width: 100%;
flex-direction: column;
}
.menu-bar-links li {
text-align: center;
}
}
<html>
<head>
<title> Title of page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.1/css/fontawesome.min.css">
</head>
<body>
<div class="menu-bar">
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="menu-bar-links">
<ul>
<li class="active">Home</li>
<li>About us</li>
<li>Services</li>
<li>Investors</li>
<li>Pricing</li>
<li>Training </li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
Related
I am trying to get the 'hamburger lines' which you get when you shrink a responsive website. But the lines which I am getting is not stacked like it should be and is instead side by side:
This is the picture of the lines:
Code:
*
{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body
{
background-image: url(background.jpg);
background-size: cover;
background-position : center;
font-family: sans-serif;
}
.menu-bar
{
background: #273044;
text-align: center;
}
.menu-bar ul
{
display: inline-flex;
list-style: none;
color: #fff;
}
.menu-bar ul li
{
width: 120px;
place-items:center;
display: grid;
padding: 0px;
}
.menu-bar ul li a
{
text-decoration: none;
color: white;
}
.active, .menu-bar ul li:hover
{
background-color: #0b56ab;
height:auto;
height:30px;
}
.toggle-button{
position: absolute;
top: 0.75rem;
right: 1rem;
display: flex;
flex-direction: none;
justify-content: space-between;
width: 31px;
height: 21px;
}
.toggle-button .bar{
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media(max-width: 400px){
.toggle-button{
display:flex;
}
}
/* body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#919191; background-color:#232323;} */
<html>
<head>
<title> Title of page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.1/css/fontawesome.min.css">
</head>
<!----header---->
<body>
<div class="menu-bar">
<a href = "#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<ul>
<li class="active">Home</li>
<li>About us</li>
<li>Services</li>
<li>Investors</li>
<li>Pricing</li>
<li>Training </li>
<li>Contact</li>
</ul>
</div>
<div class= "grid">
</div>
</body>
</html>
Could you please have a look at my code and advise what I have overlooked?
You didn't specify the flex-direction as column
+(I have modified your css code a bit)
*
{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body
{
background-image: url(background.jpg);
background-size: cover;
background-position : center;
font-family: sans-serif;
}
.menu-bar
{
background: #273044;
display: inline-flex;
text-align: center;
align-items:center;
}
.menu-bar ul
{
display: inline-flex;
align-items:center;
list-style: none;
color: #fff;
}
.menu-bar ul li
{
min-width: 120px;
align-self:center;
display: grid;
padding: 0px;
}
.menu-bar ul li a
{
text-decoration: none;
color: white;
}
.active, .menu-bar ul li:hover
{
background-color: #0b56ab;
height:auto;
height:30px;
}
.toggle-button{
position: absolute;
right: 1rem;
display: flex;
flex-direction: column;
justify-content: space-around;
width: 31px;
height: 21px;
}
.toggle-button .bar{
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media(max-width: 400px){
.toggle-button{
display:flex;
}
}
/* body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#919191; background-color:#232323;} */
<html>
<head>
<title> Title of page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.1/css/fontawesome.min.css">
</head>
<!----header---->
<body>
<div class="menu-bar">
<a href = "#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<ul>
<li class="active">Home</li>
<li>About us</li>
<li>Services</li>
<li>Investors</li>
<li>Pricing</li>
<li>Training </li>
<li>Contact</li>
</ul>
</div>
<div class= "grid">
</div>
</body>
</html>
You'll want to change to display block on the a tag and the spans
.toggle-button{
position: absolute;
top: 0.75rem;
right: 1rem;
display: block;
width: 31px;
height: 21px;
}
.toggle-button .bar{
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
display: block;
margin-bottom: 3px;
}
Its not a solution for your three lines, but you just could use a SVG:
.hamburger {
width: 12rem;
height: 12rem;
}
<svg xmlns="http://www.w3.org/2000/svg" class="hamburger" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>
I am trying to get the links on the navbar to take full width and NOT take any of the area of the background image placed on the following section when the page is displayed on a smaller viewport #media (max-width: 900px).
Why is the hamburger menu icon not displaying?
I am trying to get navmenu items stacked and then a background image to display in full on a smaller viewport.
header {
position: fixed;
z-index: 100;
width: 100%;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--secondary-dark);
color: var(--main-white);
padding: 5px 30px;
height: 90px;
}
.logo {
font-size: var(--fs-600);
margin: 0.5rem;
text-decoration: none;
font-family: var(--ff-nav);
font-weight: var(--fw-400);
letter-spacing: 1px;
}
.navbar-items ul {
margin: 0;
padding: 0;
display: flex;
}
.navbar-items li a {
text-decoration: none;
color: var(--main-white);
padding: 1rem;
display: block;
}
.navbar-items li:hover a {
color: var(--blue-primary);
}
.toggle-button a {
position: absolute;
top: 0.75rem;
right: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button a .bar {
height: 3px;
width: 100%;
background-color: var(--main-white);
border-radius: 10px;
}
#media (max-width: 900px) {
.toggle-button {
display: flex;
}
.navbar-items {
/* display: none; */
width: 100%;
background-color: var(--secondary-dark);
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar-items ul {
flex-direction: column;
width: 100%;
}
.navbar-items li {
text-align: center;
}
.navbar-items li a {
padding: .5rem 1rem;
width: 100;
}
.navbar-items.active {
display: flex;
}
}
/* //////////////////////
Main
/////////////////////// */
.welcome {
position: relative;
outline: 2px solid red;
padding-top: 70px;
height: 700px;
background-image: url("/img/background.png");
background-position: center;
background-size: cover;
}
.welcome p {
position: absolute;
display: block;
bottom: 0;
right: 0;
margin: 20px 50px;
font-size: 3em;
color: var(--clr-section-background);
letter-spacing: 0.5px;
}
<header>
<nav class="navbar">
<div class="logo">
<span>Brand</span>
</div>
<div>
<a href="#">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
</div>
<div class="navbar-items">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>
Blog
</li>
<li>Newsletter</li>
</ul>
</div>
</nav>
</header>
<!--mission statement------------------------------------------>
<section class="welcome">
<div>
<p>#OnPoint</p>
</div>
</section>
Problem resolved, I just needed to add a z-index on navbar and remove padding on ul in order to have the hamburger menu displaying on full width on smaller viewports.
I have to create button animation like below:
https://media.giphy.com/media/YLgJHbH1u916XSo3JD/giphy.gif
I did it with "transition" but now can't implement that solution to my website.
my button animation solution: http://jsfiddle.net/guhqcxzt/
My website part where I wanna implement it on 'li' tags. (html and scss)
<nav class="left-side">
<ul class="navigations">
<li>ABOUT US</li>
<li>HOTEL</li>
<li>CONTACT US</li>
</ul>
<div class="rights">© 2021 All rights reserved.</div>
</nav>
nav,
.left-side {
#include flex(space-between, center, column);
min-height: 90vh;
background: $color-grey-dark-1;
padding: 5rem 0 3rem 0;
width: 18%;
color: $color-grey-light-1;
}
.navigations {
width: 100%;
li {
list-style: none;
a {
text-decoration: none;
color: $color-grey-light-1;
display: block;
padding: 2rem 0;
margin: 0.5rem 0;
padding-left: 30%;
font-size: 2.5rem;
}
}
}
a:hover {
background: $color-primary-light;
}
try this :
add transition in <a> tag
navigations {
width: 100%;
li {
list-style: none;
a {
text-decoration: none;
color: $color-grey-light-1;
display: block;
padding: 2rem 0;
margin: 0.5rem 0;
padding-left: 30%;
font-size: 2.5rem;
transition:0.5s;
}
}
}
a:hover {
background: $color-primary-light;
}
do you want this one?
try this code :
nav,.left-side
{
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
min-height: 90vh;
background: black;
padding: 4rem 0 3rem 0;
width:300px;
color: grey;
}
.navigations
{
width: 100%;
}
li
{
position:relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
width: 100%;
height: 100px;
}
li::before
{
content:'';
position:absolute;
width:0%;
height:70px;
background:red;
left:-20px;
transition:0.5s;
}
li:hover::before
{
width:100%;
}
a
{
position:relative;
color: grey;
margin: 0.5rem 0;
width:92.4%;
text-decoration:none;
}
.rights {
font-size: 1.5rem;
}
<nav class="left-side">
<ul class="navigations">
<li >ABOUT US</li>
<li> HOTE </li>
<li>CONTACT US</li>
</ul>
<div class="rights">© 2021 All rights reserved.</div>
</nav>
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.
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:+61 412 345 678">+61 123 456 789</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>
#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:+61 412 345 678">+61 123 456 789</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>
Whenever I apply flexbox stretch or width 100% to the li items they get pushed to a flex start position at the left side of the page instead of centered.
body {
margin: 0;
}
ul,
li,
a {
text-decoration: none;
list-style-type: none;
padding: 0;
}
.site-wrapper {
min-height: 100vh;
}
.main-header,
.main-nav {
display: flex;
}
.main-nav {
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 0;
}
.main-nav li {
margin-bottom: 5%;
}
.mobile-nav-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.toggle-mobile-nav {
border: 1px solid black;
height: 30px;
width: 30px;
align-self: center;
margin-right: 2.5%;
border-radius: 10%;
padding: 1%;
}
.toggle-mobile-nav:hover {
cursor: pointer;
}
#logo {
margin-left: 20%;
cursor: pointer;
}
.fa-lg {
margin-top: .15em;
font-size: 1.9em;
margin-left: .05em;
}
.intro {
display: flex;
flex-direction: column;
padding-left: 2.5%;
padding-right: 2.5%;
align-items: center;
background-color: #38A5DB;
}
.intro h1 {
padding-top: 10%;
}
.intro h3 {
padding-bottom: 5%;
}
.intro-image {
max-width: 100%;
}
<div class="site-wrapper">
<div class="mobile-nav-wrapper">
<li>
<h1 id='logo'>JP</h1>
</li>
<div class="toggle-mobile-nav">
<i class="fa fa-bars fa-lg"></i>
</div>
</div>
<header class="main-header">
<!-- Main Header Start -->
<ul class="main-nav">
<li>About Me
</li>
<li>My Work
</li>
<li>Playground
</li>
<li>Contact Me
</li>
</ul>
</header>
<!-- Main Header end -->
The align-items:center is causing the li to shrink wrap instead of stretching (which is the default).
So remove it and use text-align:center on the li.
ul,
li,
a {
text-decoration: none;
list-style-type: none;
padding: 0;
}
.main-header,
.main-nav {
display: flex;
}
.main-nav {
flex-direction: column;
justify-content: space-between;
width: 100%;
}
.main-nav li {
margin-bottom: 5%;
background: lightgreen;
text-align: center;
}
.main-nav li a {
display: block;
}
<ul class="main-nav">
<li>About Me
</li>
<li>My Work
</li>
<li>Playground
</li>
<li>Contact Me
</li>
</ul>