I'm satisfied where my brand is, however I would like my About, Gallery and icons shifted more to the right. As you can see, there is a big gap at the end of the "envelope" icon, I would like it even, just as my brand/avatar is.
I have tried doing ml-auto, mr-auto in the bootstrap code, but nothing has worked.
html {
box-sizing: border-box;
}
*,
*: before,
*: after {
box-sizing: inherit;
padding: 0;
margin: 0;
}
body {
background-image: url();
width: 100%;
height: 100%;
background-position: bottom center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family: "Quicksand";
font-size: 1.2em;
line-height: 1.375em;
padding: 0;
margin: 0;
background-color: #2F3A3B;
-webkit-font-smoothing: antialiased;
}
.avatar {
height: 3em;
width: 3em;
margin-top: -8px;
border-radius: 5.0em;
margin-right: 1em;
margin-left: -5em;
margin-bottom: -8px
}
nav ul li {}
#media screen and (min-width: 640px) {}
#media screen and (min-width: 960px) {}
main {
flex: 1;
}
.intro {
display: inline-block;
width: 100%;
padding: 90px 0 120px;
background-color: #2A2332;
background-size: cover;
font-size: 1.9em;
text-align: center;
color: #FFF;
}
h1 {
font-weight: medium;
text-shadow: 5px 5px 10px black;
}
h4 {}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="home.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="container" style="
margin-left: 100px;">
<a class="navbar-brand" href="home.html"><img class="avatar" src="images/Originals/avatar.jpg" alt>Munoz Designs</a>
<!--Toggle Button-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<!--Navbar links-->
<div class="collapse navbar-collapse" style="margin-left: ;" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<!--Social Media Icons-->
<li class="nav-item">
<a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="contact.html" title="Email" target="_blank">
<i class="fa fa-envelope-o" aria-hidden="true"></i></a>
</ul>
</div>
</div>
</nav>
<div class="intro">
<h1>Hi, I'm Eddie.</h1>
<h4>I'm a character artist.</h4>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
As I see you want full width navbar so remove container div, Its unnecessary according to your requirement.
Also you have to change the css for navbar-brand.
Reference Link
Stack Snippet
body {
background-image: url();
width: 100%;
height: 100%;
background-position: bottom center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family: "Quicksand";
font-size: 1.2em;
line-height: 1.375em;
padding: 0;
margin: 0;
background-color: #2F3A3B;
-webkit-font-smoothing: antialiased;
}
.avatar {
height: 3em;
width: 3em;
margin-top: -8px;
border-radius: 5.0em;
}
nav ul li {}
#media screen and (min-width: 640px) {}
#media screen and (min-width: 960px) {}
main {
flex: 1;
}
.intro {
display: inline-block;
width: 100%;
padding: 90px 0 120px;
background-color: #2A2332;
background-size: cover;
font-size: 1.9em;
text-align: center;
color: #FFF;
}
h1 {
font-weight: medium;
text-shadow: 5px 5px 10px black;
}
h4 {}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="home.html"><img class="avatar" src="http://via.placeholder.com/50x50" alt>Munoz Designs</a>
<!--Toggle Button-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<!--Navbar links-->
<div class="collapse navbar-collapse" style="margin-left: ;" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<!--Social Media Icons-->
<li class="nav-item">
<a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="contact.html" title="Email" target="_blank">
<i class="fa fa-envelope-o" aria-hidden="true"></i></a>
</ul>
</div>
</nav>
<div class="intro">
<h1>Hi, I'm Eddie.</h1>
<h4>I'm a character artist.</h4>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
Related
In the picture below you can see that my Skills text is in the section where it is not supposed to be which is the home-section
In the above picture, you can see that Skills has appeared in the section of the home. Note that I used Bootstrap row to style my content
Below is the html code ------- <-- I added bootstrap -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Portfolio</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />
<script
src="https://kit.fontawesome.com/29ea37403a.js"
crossorigin="anonymous"
></script>
</head>
<body>
<section id="home-section">
<nav class="navbar navbar-expand-lg navbar-light">
<h1 class="navbar-brand">ᔕᗩᗰᑌᗴᒪ</h1>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="home-contect">
<h1 class="home-title">I have software development experience</h1>
<h5 class="home-description">
Hi! I'm a software developer - Developing elegant mobile sofwares
for companies all over the world
</h5>
<div class="button-con">
<button
type="button"
class="home-button btn btn-lg btn-warning download-button"
>
Let's Talk <i class="fa-solid fa-paper-plane"></i>
</button>
<button
type="button"
class="home-button btn btn-lg btn-outline-warning download-button">
Resume <i class="fa-solid fa-arrow-down"></i>
</button>
</div>
<div class="links">
<h6>Check Out My
<div class="home-icon-container" id="github"></i></div>
<div class="home-icon-container"><i class="home-icon fa-brands fa-linkedin-in"></i></div>
<div class="home-icon-container"><i class="home-icon fa-brands fa-twitter"></i> </div>
</h6>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<img
class="personal-photo"
src="assets/portfolio-image.png"
alt="A picture of me"
/>
</div>
</div>
</section>
<section title="skill-section">
<h1>Skills</h1>
</section>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>
Below is my css styling
/* Home Section */
#home-section{
padding-left: 10%;
padding-right: 10%;
}
h1{
text-align: left;
font-size: xxx-large;
}
.personal-photo{
position: absolute;
margin-left: 11%;
}
.btn{
margin-top: 15px;
}
.home-description{
text-align: left;
padding: 2% 0;
}
.home-button{
margin-right: 4px;
}
.home-icon{
color: black;
}
.home-icon-container#github{
margin-left: 20px;
}
.home-icon-container{
margin-top: 15px;
margin-right: 13px;
padding: 11px;
border-radius: 100%;
background-color: #dcedc8;
display: inline-block;
}
/* skill-section */
#skill-section{
background-color: gold;
padding: 5% 10%;
}
/* media-queries */
#media (min-width: 500){
.personal-photo{
width: 0px;
}
}
#media (max-width: 768px){
h1.home-title{
text-align: center;
}
.home-description{
text-align: center;
}
.button-con{
text-align: center;
}
.links{
text-align: center;
}
.personal-photo{
width: 50%;
}
}
The image has a display property of 'absolute'. MDN.
It may need more of a margin to avoid covering up the text, but you're probably better off using a different way to position the image instead of using absolute.
The other elements of the navbar do not appear on my mobile devices, only the logo.
NavBar HTML Code:
.navbar-logo {
width: 93.75px;
height: 23.5px;
margin-left: 10rem;
}
.navbar-right-space {
margin-right: 10rem;
}
.nav-icon {
color: #fff;
text-decoration: none;
font-size: 26px;
transition: 0.5s;
}
.nav-icon:hover {
font-size: 28px;
color: #fff;
}
#navRight .nav-item {
margin-left: 10px;
}
#navElements {
margin-top: 0.75rem;
}
#navRight {
margin-right: 10rem;
}
<!-- NavBar -->
<nav data-aos="fade-down" class="navbar navbar-expand-lg navbar-light bg-transparent">
<a class="navbar-brand" href="https://ionut.app/"><img src="assets/img/logo_light.png" alt="Ionut Logo" class="navbar-logo"></a>
<div class="collapse navbar-collapse" id="navElements">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0" id="navRight">
<li class="nav-item">
<a class="fab fa-github nav-icon" target="_blank" href="https://github.com/wIonut"></a>
</li>
<li class="nav-item">
<a class="fab fa-instagram nav-icon" target="_blank" href="https://www.instagram.com/patrascu.ionut.2008/"></a>
</li>
<li class="nav-item">
<a class="fab fa-facebook nav-icon" target="_blank" href="https://www.facebook.com/patrascu.ionut.2008/"></a>
</li>
</ul>
</div>
</nav>
<!-- End of Nav Bar -->
Anything inside the collapsible element gets hidden for mobile. It's presumed that you'll show it with a toggle button (which you don't have). See the docs.
.navbar-logo {
width: 93.75px;
height: 23.5px;
margin-left: 10rem;
}
.navbar-right-space {
margin-right: 10rem;
}
.nav-icon {
/* color: #fff; */
text-decoration: none;
font-size: 26px;
transition: 0.5s;
}
.nav-icon:hover {
font-size: 28px;
color: #fff;
}
#navRight .nav-item {
margin-left: 10px;
}
#navElements {
margin-top: 0.75rem;
}
#navRight {
margin-right: 10rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<nav data-aos="fade-down" class="navbar navbar-expand-lg navbar-light bg-transparent">
<a class="navbar-brand" href="https://ionut.app/"><img src="https://via.placeholder.com/80" alt="Ionut Logo" class="navbar-logo"></a>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0" id="navRight">
<li class="nav-item">
<a class="fab fa-github nav-icon" target="_blank" href="https://github.com/wIonut">Github</a>
</li>
<li class="nav-item">
<a class="fab fa-instagram nav-icon" target="_blank" href="https://www.instagram.com/patrascu.ionut.2008/">Instagram</a>
</li>
<li class="nav-item">
<a class="fab fa-facebook nav-icon" target="_blank" href="https://www.facebook.com/patrascu.ionut.2008/">Facebook</a>
</li>
</ul>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
there is a website that I came across and I was making a clone of it using html css and bootstrap. But I am facing problems like my navbar is not working out. I need help I need to center the items in the navbar in the center and the social icons on the right side. I am new to this thing can anyone please help me?
here's the website that I am trying to make a clone of
and here is my code
/* #navbarNav {
padding-bottom: 36px;
padding-top: 54px;
} */
.nav-img {
width: auto;
max-width: 100%;
max-height: 69px;
}
.navbar-custom {
background-color: #000000;
}
.title-div {
position: absolute;
z-index: 1;
top: 461px;
}
.home-heading {
background-color: rgba(255, 255, 255, 0.5);
color: black;
}
.main-image {
/* background-image: url(../img/ill.jpg); */
width: 100%;
height: 82%;
position: relative;
z-index: -1;
}
.navbar {
padding: 100px;
background-color: black;
}
.navbar-brand {
margin: 0px 0px 0px 30px;
}
.navbar-toggler {
filter: invert(100%);
}
.navbar-nav li {
float: left;
}
.nav-item a {
display: block;
text-align: center;
}
.instagram {
filter: invert(100%);
padding: 6px;
}
.facebook {
filter: invert(100%);
padding: 6px;
}
.email {
filter: invert(100%);
padding: 6px;
}
.phone-call {
filter: invert(100%);
}
/* .mid{
margin: 0px 0px 0px 200px;
padding: 0px 0px 0px 235px;
} */
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
background-color: #000;
}
li {
float: left;
/* border-right: 1px solid #bbb; */
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: right;
padding: 14px 16px;
text-decoration: none;
}
.logo {
/* width: 133px;
height: 69px; */
width: auto;
max-width: 100%;
max-height: 69px;
margin-top: 9px;
margin-bottom: 17px;
margin-left: 16px;
}
.bdy-img{
width: 45% !important;
height: auto !important;
padding-top: 96px;
padding-left: 75px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Roboto:wght#300&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital#1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<!-- <nav class="navbar navbar-expand-lg navbar-custom " >
<img class="navbar-brand nav-img" src="img/logo-nav.jpg" alt="">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav justify-content-center" >
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav> -->
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">
<img src="img/logo-nav.jpg" class="logo" alt="" loading="lazy" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<div class="cintainer-fluid">
<div class="row">
<div class="span6" style=" float: none; margin: 0 auto;">
<ul class=" navbar-nav ">
<li>
<a class="nav-link" href="">Shop</a>
</li>
<li>
<a class="nav-link" href=""> I Love Lables</a>
</li>
<li>
<a class="nav-link" href=""> About</a>
</li>
<li>
<a class="nav-link" href=""> How It Works</a>
</li>
<ul class="list2">
<li>
<a class="nav-link" href=""> Charities</a>
</li>
<li>
<a class="nav-link" href=""> Sell With Us</a>
</li>
<li>
<a class="nav-link" href=""> News</a>
</li>
<li>
<a class="nav-link" href=""> Designers</a>
</li>
</ul>
<ul class="list3">
<li>
<a class="nav-link" href=""> Contact</a>
</li>
</ul>
</div>
</div>
</div>
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/instagram.png" class="instagram" width="50" height="50" alt=""
loading="lazy" />
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/email.png" class="email" width="50" height="50" alt="" loading="lazy" />
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/facebook.png" class="facebook" width="50" height="50" alt=""
loading="lazy" />
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/phone-call.png" class="phone-call" width="50" height="50" alt=""
loading="lazy" />
</a>
</li>
</ul>
</div>
</nav>
<!-- <div class="main-bdy-div align-items-center" >
<div class="container-fluid title-div home-heading">
<h1 class="" style="font-size: calc(3.6vw + 1rem); font-family: 'Playfair Display', serif;" >I love labels</h1>
</div>
<div class="container-fluid title-div " style="width: 49%; background-color: rgba(255, 255, 255, 0.5); ">
<h1 class="" style="text-align: justify; font-size: calc(1.44vw + 1rem); font-family: 'Cormorant Garamond', serif;">New Zealand's
Premier Boutique for Quality Preloved Designer Fashion</h1>
</div>
<img class="main-image" src="img/ill.jpg" alt="">
</div> -->
<div class="main-img">
<img class="main-image" src="img/ill.jpg" alt="">
</div>
<div class="container-fluid justify-content-start">
<div class="container-fluid title-div " style=" text-align: center; width: 28%; background-color: rgba(255, 255, 255, 0.5); ">
<h1 class="" style="font-size: calc(3.6vw + 1rem); font-family: 'Playfair Display', serif;">I love labels
</h1>
</div>
<div class="container-fluid title-div justify-content-between " style="width: 49%; background-color: rgba(255, 255, 255, 0.5); top: 576px; ">
<h1 class=""
style="text-align: justify; font-size: calc(1.44vw + 1rem); font-family: 'Cormorant Garamond', serif;">
New Zealand's
Premier Boutique for Quality Preloved Designer Fashion</h1>
</div>
</div>
<!-- main body section -->
<div class="container-fluid">
<div>
<img class="bdy-img" src="img/IMG_0018.jpg" style=" width: 100%;
height: auto;" alt="">
<div class="d-flex align-items-start justify-content-end">
<h1 style="text-align: center;">Our Unique Approach.</h1>
</div>
</div>
</div>
<!-- bootstrap js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
</body>
</html>
Please view the snippet in full page mode.
I have only tried to help in what you have asked, there are still some issues which I have not tried to solve as you are trying to learn.
Below are the changes:
1 Added justify-content-md-center in below tag
<div class="collapse navbar-collapse justify-content-md-center" id="navbarTogglerDemo01">
2 Adjusted above tag's children to have two ul only
3 added ml-auto css class in above two ul tags
/* #navbarNav {
padding-bottom: 36px;
padding-top: 54px;
} */
.nav-img {
width: auto;
max-width: 100%;
max-height: 69px;
}
.navbar-custom {
background-color: #000000;
}
.title-div {
position: absolute;
z-index: 1;
top: 461px;
}
.home-heading {
background-color: rgba(255, 255, 255, 0.5);
color: black;
}
.main-image {
/* background-image: url(../img/ill.jpg); */
width: 100%;
height: 82%;
position: relative;
z-index: -1;
}
.navbar {
padding: 100px;
background-color: black;
}
.navbar-brand {
margin: 0px 0px 0px 30px;
}
.navbar-toggler {
filter: invert(100%);
}
.navbar-nav li {
float: left;
}
.nav-item a {
display: block;
text-align: center;
}
.instagram {
filter: invert(100%);
padding: 6px;
}
.facebook {
filter: invert(100%);
padding: 6px;
}
.email {
filter: invert(100%);
padding: 6px;
}
.phone-call {
filter: invert(100%);
}
/* .mid{
margin: 0px 0px 0px 200px;
padding: 0px 0px 0px 235px;
} */
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
background-color: #000;
}
li {
float: left;
/* border-right: 1px solid #bbb; */
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: right;
padding: 14px 16px;
text-decoration: none;
}
.logo {
/* width: 133px;
height: 69px; */
width: auto;
max-width: 100%;
max-height: 69px;
margin-top: 9px;
margin-bottom: 17px;
margin-left: 16px;
}
.bdy-img {
width: 45% !important;
height: auto !important;
padding-top: 96px;
padding-left: 75px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Roboto:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital#1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<!-- <nav class="navbar navbar-expand-lg navbar-custom " >
<img class="navbar-brand nav-img" src="img/logo-nav.jpg" alt="">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav justify-content-center" >
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav> -->
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">
<img src="img/logo-nav.jpg" class="logo" alt="Logo Img" loading="lazy" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarTogglerDemo01">
<ul class=" navbar-nav ml-auto">
<li>
<a class="nav-link" href="">Shop</a>
</li>
<li>
<a class="nav-link" href=""> I Love Lables</a>
</li>
<li>
<a class="nav-link" href=""> About</a>
</li>
<li>
<a class="nav-link" href=""> How It Works</a>
</li>
<li>
<a class="nav-link" href=""> Charities</a>
</li>
<li>
<a class="nav-link" href=""> Sell With Us</a>
</li>
<li>
<a class="nav-link" href=""> News</a>
</li>
<li>
<a class="nav-link" href=""> Designers</a>
</li>
<li>
<a class="nav-link" href=""> Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/instagram.png" class="instagram" width="50" height="50" alt="" loading="lazy" />
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/email.png" class="email" width="50" height="50" alt="" loading="lazy" />
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/facebook.png" class="facebook" width="50" height="50" alt="" loading="lazy" />
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/phone-call.png" class="phone-call" width="50" height="50" alt="" loading="lazy" />
</a>
</li>
</ul>
</div>
</nav>
<!-- <div class="main-bdy-div align-items-center" >
<div class="container-fluid title-div home-heading">
<h1 class="" style="font-size: calc(3.6vw + 1rem); font-family: 'Playfair Display', serif;" >I love labels</h1>
</div>
<div class="container-fluid title-div " style="width: 49%; background-color: rgba(255, 255, 255, 0.5); ">
<h1 class="" style="text-align: justify; font-size: calc(1.44vw + 1rem); font-family: 'Cormorant Garamond', serif;">New Zealand's
Premier Boutique for Quality Preloved Designer Fashion</h1>
</div>
<img class="main-image" src="img/ill.jpg" alt="">
</div> -->
<div class="main-img">
<img class="main-image" src="img/ill.jpg" alt="">
</div>
<div class="container-fluid justify-content-start">
<div class="container-fluid title-div " style=" text-align: center; width: 28%; background-color: rgba(255, 255, 255, 0.5); ">
<h1 class="" style="font-size: calc(3.6vw + 1rem); font-family: 'Playfair Display', serif;">I love labels
</h1>
</div>
<div class="container-fluid title-div justify-content-between " style="width: 49%; background-color: rgba(255, 255, 255, 0.5); top: 576px; ">
<h1 class="" style="text-align: justify; font-size: calc(1.44vw + 1rem); font-family: 'Cormorant Garamond', serif;">
New Zealand's Premier Boutique for Quality Preloved Designer Fashion</h1>
</div>
</div>
<!-- main body section -->
<div class="container-fluid">
<div>
<img class="bdy-img" src="img/IMG_0018.jpg" style=" width: 100%;
height: auto;" alt="">
<div class="d-flex align-items-start justify-content-end">
<h1 style="text-align: center;">Our Unique Approach.</h1>
</div>
</div>
</div>
<!-- bootstrap js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
You could use 'justify-content-center' class to align list items to center:
<ul class="nav justify-content-center">
and 'nav justify-content-end' to align items to right:
<ul class="nav justify-content-end">
https://getbootstrap.com/docs/4.4/components/navs/
I can't seem to make my social media icons be responsive when in cellular mode. it stays to the very corner of the right. I would like it to be centered /horizontally right under the bio section. I'm finding it a bit difficult because I'm not using bootstrap for this feature, just basic ul list. If anyone can help, i would appreciate it.
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="about1.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="home.html"><img class="avatar" src="images/Originals/avatar.jpg" alt>Munoz Designs</a>
<!--Toggle Button-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<!--Navbar links-->
<div class="collapse navbar-collapse text-center" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link"
href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="gallery.html">Gallery</a>
</li>
<!--Social Media Icons-->
<li class="nav-item">
<a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://twitter.com/arkadiusart" title="Follow on Twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="index.php" title="Email">
<i class="fa fa-envelope-o" aria-hidden="true"></i></a>
</ul>
</div>
</div>
</nav>
<div class="intro">
<h1>About</h1>
</div>
<main>
<div class="row">
<div class="col"><p> <h5> Eddie Munoz is an Austin, Texas based character artist currently working with QC Games, a video game development company. He previously worked at Carbine Studios in Aliso Viejo, California helping create various creatures, armors, mounts, and weapons for WildStar; a free-to-play online game. Be sure to follow him on instagram for his latest projects. <h5><br></div>
<!-- <img src="images/hammer.gif" alt="" width="200" height="275"><-->
</div>
</main>
<footer class="page-footer">
<ul>
<li>
<i class="fa fa-instagram fa-lg" aria-hidden="true" style="color:white"></i>
<li>
<i class="fa fa-linkedin-square fa-lg" aria-hidden="true" style="color:white"></i>
<li>
<i class="fa fa-twitter fa-lg" aria-hidden="true" style="color:white"></i>
<li>
<i class="fa fa-deviantart fa-lg" aria-hidden="true" style="color:white"></i>
<li>
<i class="fa fa-paint-brush fa-lg" aria-hidden="true" style="color:white"></i>
<li>
<a href="index.php" title="Email">
<i class="fa fa-envelope-o fa-lg" aria-hidden="true" style="color:white"></i></a>
</ul>
</li>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
html{
box-sizing: border-box;}
*,
*: before,
*: after {
box-sizing: inherit;
padding: 0;
margin: 0;
}
body{
background-image: url();
width: 100%;
height: 100%;
background-position: bottom center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family:"Quicksand";
font-size: 1.2em;
line-height: 1.375em;
padding: 0;
margin: 0;
background-color: #2F3A3B;
-webkit-font-smoothing: antialiased;
}
navbar-brand{
height: 3em;
width: 3em;
margin-top: -8px;
border-radius: 5.0em;
margin-right: 1em;
margin-left: -5em;
margin-bottom: -8px
}
.avatar{
border-radius: 5em;
margin-right: .5em;
margin-left: 1em;
}
.intro{
display: inline-block;
width: 100%;
padding: 65px 0 65px;
background-color: #2A2332;
background-size: cover;
font-size: 1.9em;
text-align: center;
color: #FFF;
}
h1{
font-weight: medium;
text-shadow:5px 5px 10px black;
position: center;
}
h5{
color: #FFF;
margin: 10px 75px 10px;
padding-left: 2px;
padding-right: 2px;
font-size: .9em;
}
.row{
display: flex;
flex-flow: column wrap;
margin-left: .6em;
margin-right: .6em;
}
.col{
flex: 1;
margin: .5em;
padding: 15px 75px 15px;
color: #FFF;
font-size: .9em;
}
.page-footer{
display:flex;
margin: 10px 475px 10px;
list-style-type: none;
}
.page-footer ul{
align-items:center;
}
.page-footer ul li{
display:inline-block;
margin-right: 20px;
margin-left: 20px;
}
#media screen and (min-width: 640px){
.row{flex-flow: row wrap;}
main .col:nth-child(2){flex: 1;}
}
#media screen and (min-width: 960px){
main .col:nth-child(2){flex: .40;}
}
main {flex: 1;}
try this (i gave the ul a class to avoid affecting other uls in the page) :
ul.social-icons {
display: block;
margin: 0 auto;
text-align: center
}
ul.social-icons li {
display: inline-block;
}
I'm very happy with my bootstrap contact form, however when I minimize it down to cellular level it disappears and I have to scroll all the way to the right. Can anyone help me with my CSS to size it down perfectly?
Also, is there any way to make the toggle buttons center when they visible rather than floating to the left.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="contact.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="home.html"><img class="avatar" src="images/Originals/avatar.jpg" alt>Munoz Designs</a>
<!--Toggle Button-->
<button class="navbar-toggler" type="button" data-toggle="collapse"data-target="#navbarResponsive"aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<!--Navbar links-->
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link"
href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="gallery.html">Gallery</a>
</li>
<!--Social Media Icons-->
<li class="nav-item">
<a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://twitter.com/arkadiusart" title="Follow on Twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" title="Email">
<i class="fa fa-envelope-o" aria-hidden="true"></i></a>
</ul>
</div>
</div>
</nav>
<div class="intro">
<h1>Contact</h1>
<h4>If you would like to work with me, send me a message!</h4>
</div>
<!--Contact-->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="well well-sm">
<form class="form-horizontal" method="post">
<fieldset>
<div class="form-group">
<div class="col-md-8">
<div class="input-wrapper">
<input id="fname" name="name" placeholder="Name" type="text" class="form-control">
<label for="fname" class="fa fa-user input-icon bigicon"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<div class="input-wrapper">
<input id="email" name="email" type="text" placeholder="Email" class="form-control">
<label for="email" class="fa fa-envelope-o input-icon bigicon"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<div class="input-wrapper">
<textarea class="form-control" id="message" name="message" placeholder="Message" rows="3"></textarea>
<label for="message" class="fa fa-pencil input-icon bigicon"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-outline-secondary btn-md">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
html{
box-sizing: border-box;}
*,
*: before,
*: after {
box-sizing: inherit;
padding: 0;
margin: 0;
}
body{background-image: url();
width: 100%;
height: 100%;
background-position: bottom center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family:"Quicksand";
font-size: 1.2em;
line-height: 1.375em;
padding: 0;
margin: 0;
background-color: #2F3A3B;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
navbar-brand{
height: 3em;
width: 3em;
margin-top: -8px;
border-radius: 5.0em;
margin-right: 1em;
margin-left: -5em;
margin-bottom: -8px
}
.avatar{
border-radius: 5em;
margin-right: .5em;
margin-left: 1em;
}
.intro{
display: inline-block;
width: 100%;
padding: 65px 0 65px;
background-color: #2A2332;
background-size: cover;
font-size: 1.9em;
text-align: center;
color: #FFF;
}
h1{
font-weight: medium;
text-shadow:5px 5px 10px black;
}
h4{
font-size: -.5em;
}
.row{
margin-right: 4em;
margin-left: 4em;
margin-top: .10em;
padding-bottom: -.30em;
}
.container {
margin-left: 17em;
padding-top: 1.5em;
}
.bigicon {
font-size: 35px;
color: #808080;
}
.input-icon {
position: absolute;
left: .5rem;
top: .7rem;
/* Keep icon in center of input, regardless of the input height */
}
#message {
vertical-align: middle;
}
input {
padding-right:30px;
}
.form-control {
text-indent: 2rem;
width: 75%;
}
.input-wrapper {
position: relative;
}
.btn{
margin-right: 10em;
}
#media screen and (min-width: 640px){
}
#media screen and (min-width: 960px){
}
main {flex: 1;}
Perhaps instead of using separate li tags you can use the bootstrap row and column parameters. Try something like this:
<!--Social Media Icons-->
<li class="nav-item">
<div class="row">
<div class="col-xs-2">
<a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</div>
<div class="col-xs-2">
<a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
</div>
<div class="col-xs-2">
<a class="nav-link" href="https://twitter.com/arkadiusart" title="Follow on Twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</div>
<div class="col-xs-2">
<a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>
</div>
<div class="col-xs-2">
<a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>
</div>
<div class="col-xs-2">
<a class="nav-link" title="Email"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
</div>
</div>
</li>
I found the answers:
For the contact form to be responsive I deleted the .row in CSS. Once I did that, it was working as a responsive form.
For the toggle buttons to be center, I simply added "text-center" to the collapse property. See below.
<div class="collapse navbar-collapse text-center" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link"
href="about.html">About</a>
</li>