I'm running a Drupal site and currently having issues with the current footer, I'm trying to figure out why it's constantly overlapping the entire site, I've been able to find out that color of the footer is the issue, I've tried changing the color, the same issue happens. I've tried putting a div tag before the footer and a horizontal line before the footer.
Below I've attached the code the footer is a responsive site, the main purpose of the footer was to have it able to run on mobile and desktop just haven't been able to get this last issue to be resolved. Each section contains a title of each feature including in the
The first section is the style sheet at the very top contains the form height and width. the footer colors are labeled as ct-footer this only includes the tag for each section such as ct-footer background or ct-footer pre for forms and div.
html,
body,
img,
figure {
max-width: 100%;
}
html,
body {
overflow-x: hidden;
color: #000;
-ms-overflow-style: scrollbar;
-webkit-font-smoothing: antialiased;
}
a,
a:hover,
a:focus,
a:active {
text-decoration: none;
color: inherit;
}
a {
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
.ct-u-paddingTop10 {
padding-top: 10px !important;
}
.ct-footer {
background-color: #111;
padding-top: 70px;
margin-top: 20px;
position: relative;
}
.ct-footer-pre {
width: 100%;
padding-bottom: 55px;
border-bottom: 1px solid #555;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ct-footer-pre span {
font-family: 'Open Sans Condensed', sans-serif;
color: #ebebeb;
font-size: 30px;
}
.ct-footer-pre .form-group {
position: relative;
margin: 0;
}
.ct-footer-pre .form-group:before,
.ct-footer-pre .form-group:after {
content: '';
display: table;
}
.ct-footer-pre .form-group:after {
clear: both;
}
.ct-footer-pre .form-group input {
border: 1px solid #39a2bf;
background-color: #333;
color: #fff;
height: 50px;
padding: 0 30px;
margin: 0 5px;
border-radius: 0 !important;
}
.ct-footer-pre .form-group button {
height: 50px;
position: relative;
width: 80px;
padding: 0
}
.ct-footer-list {
padding: 50px 0;
list-style: none;
padding-left: 0;
display: table;
width: 100%;
border-bottom: 1px solid #555;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ct-footer-list>li .ct-footer-list-header {
font-family: 'Open Sans Condensed', sans-serif;
color: #3a98b2;
font-size: 30px;
}
.ct-footer-list>li ul {
list-style: none;
padding-left: 0;
}
.ct-footer-list>li ul li a {
color: #fff;
}
.ct-footer-list>li ul li a:hover,
.ct-footer-post a:hover {
text-decoration: underline;
}
.ct-footer-post {
background: #000;
padding: 30px 0;
}
.ct-footer-post .inner-left,
.ct-footer-post .inner-right {
padding: 20px 0;
}
.ct-footer-post ul {
list-style: none;
padding-left: 0;
margin: 0 -20px;
}
.ct-footer-post ul li {
display: inline-block;
margin: 0 20px;
}
.ct-footer-post a {
color: #fff;
}
.ct-footer-post p {
color: #fff;
}
.ct-footer-meta {
padding-top: 30px;
}
.ct-footer-meta .ct-socials {
padding: 20px 0;
}
.ct-footer-meta .ct-socials li {
padding: 0 3px;
}
.ct-footer--with-button {
padding-top: 150px;
}
address {
color: #fff;
display: inline-block;
}
address span {
font-weight: 600;
}
address a {
color: #fff;
}
address a:hover {
text-decoration: underline;
}
.btn {
font-family: 'Open Sans Condensed', sans-serif;
border-radius: 0;
border: none;
text-transform: uppercase;
color: #111;
font-size: 26px;
padding: 12px 30px;
}
.btn.btn-motive {
background-color: #00bff3;
-webkit-transition: all .25s ease;
transition: all .25s ease;
}
.btn.btn-motive:hover,
.btn.btn-motive:hover:active {
background-color: #00bff3;
}
.btn.btn-violet {
color: #fff;
background-color: #4f4f99;
-webkit-transition: all .25s ease;
transition: all .25s ease;
}
.btn.btn-violet:hover {
background-color: #37376b;
}
.btn.btn-violet:hover:active {
background-color: #2f2f5b
}
.btn.btn-green {
color: #fff;
background-color: #43670f;
-webkit-transition: all .25s ease;
transition: all .25s ease;
}
.btn.btn-green:hover {
background-color: #36520c;
}
.btn.btn-green:hover:active {
background-color: #314a0b;
}
.btn.btn-red {
color: #fff;
background-color: #da2229;
-webkit-transition: all .25s ease;
transition: all .25s ease;
}
.btn.btn-red:hover {
background-color: #ae1b21;
}
.btn.btn-red:hover:active {
background-color: #9d181e
}
.btn.btn-white {
background-color: #fff;
-webkit-transition: all .25s ease;
transition: all .25s ease;
}
.btn.btn-white:hover {
background-color: #d9d9d9;
}
.btn.btn-white:hover:active {
background-color: #c9c9c9
}
.btn.btn-large {
padding: 20px 50px;
font-size: 30px;
white-space: normal;
}
.ct-mediaSection {
background-attachment: fixed;
}
.ct-section_header--type1 {
font-family: 'Open Sans Condensed', sans-serif;
color: #000;
font-size: 115px;
text-transform: uppercase;
}
.ct-section_header--type2 small {
font-family: 'coquette', fantasy;
font-size: 58px;
line-height: .7;
display: block;
font-weight: 700;
position: relative;
left: -12px;
}
.ct-section_header--type2 span {
font-family: 'Bebas Neue';
font-size: 115px;
line-height: .8;
}
.ct-section_header--type2 img {
display: inline-block;
float: left;
position: relative;
top: 15px;
padding-right: 3px;
}
.ct-section_header--type3 {
text-align: center;
}
.ct-section_header--type3 small {
font-family: 'coquette', fantasy;
font-size: 50px;
padding: 15px 0;
font-weight: 700;
color: #fff;
background-image: url("/core/fileparse.php/16/urlt/../images/ribbon.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block
}
.ct-section_header--type3 span {
font-family: 'Bebas Neue';
font-size: 150px;
font-weight: 400;
text-transform: uppercase;
line-height: .85
}
.ct-section_header--type4 {
text-align: center;
}
.ct-section_header--type4:before,
.ct-section_header--type4:after {
content: '';
display: table
}
.ct-section_header--type4:after {
clear: both
}
.ct-section_header--type4 small {
font-family: 'coquette', fantasy;
font-size: 50px;
color: inherit;
font-weight: 700;
display: block
}
.ct-section_header--type4 span {
font-family: 'nimbus-sans-condensed', sans-serif;
font-weight: 400;
font-weight: bold;
font-size: 150px;
text-transform: uppercase;
display: block;
line-height: .7
}
.ct-section_header+p {
font-size: 30px;
font-weight: 700;
letter-spacing: -1.5px;
text-align: center;
}
.ct-section_header--type4+p {
font-family: 'nimbus-sans-condensed', sans-serif;
font-weight: 400;
font-size: 40px;
font-weight: 700;
line-height: 1;
}
/* Media Queries */
#media (min-width:1200px) {
.ct-footer-pre {
display: table;
}
.ct-footer-pre>.inner {
display: table-cell;
vertical-align: middle;
}
.ct-footer-list>li {
width: 20%;
display: table-cell;
vertical-align: top;
}
.ct-footer-list>li:last-child {
width: 7%;
}
}
#media (max-width:1199px) {
.ct-footer-pre .form-group {
padding-top: 15px
}
}
#media (max-width: 1199px) {
.ct-footer-list>li {
display: inline-block;
float: left;
}
}
#media (min-width:992px) {
.ct-footer-post .inner-left {
float: left;
}
.ct-footer-post .inner-right {
float: right;
}
}
#media (max-width:991px) {
.ct-footer-post {
text-align: center;
}
}
#media (min-width: 768px) and (max-width: 1199px) {
.ct-footer-list>li {
width: 33.3333%;
}
}
#media (min-width:768px) {
.ct-footer-post p {
display: inline-block;
}
.ct-footer-post p+p {
padding-left: 50px;
}
}
#media (max-width:767px) {
address {
padding-top: 30px;
}
}
#media (min-width: 480px) and (max-width:767px) {
.ct-footer-list>li {
width: 50%;
}
}
#media (min-width:480px) {
.ct-footer-pre .form-group button {
top: -1px;
}
.ct-footer-pre .form-group input {
width: 331px;
}
}
#media (max-width:479px) {
.ct-footer-pre .form-group input {
float: left;
width: 70%;
margin: 0;
}
.ct-footer-pre .form-group button {
float: left;
width: 30%;
}
.ct-footer-list>li {
width: 100%;
text-align: center;
}
.ct-footer-list {
padding: 20px 0;
}
.btn.btn-large {
padding: 20px 10px;
line-height: .9;
font-size: 26px;
letter-spacing: -.2px;
}
.ct-section_header--type1 {
font-size: 60px;
line-height: .8;
}
.ct-section_header+p {
font-size: 22px;
}
.ct-section_header--type3 small {
font-size: 25px;
}
.ct-section_header--type4 small {
font-size: 40px;
}
.ct-section_header--type3 span {
font-size: 90px;
}
.ct-section_header--type4 span {
font-size: 80px;
}
.ct-section_header--type4+p {
font-size: 28px;
}
}
<footer class="ct-footer">
<div class="container">
<form action="" enctype="multipart/form-data" method="post" name="contentForm"> </form>
<ul class="ct-footer-list text-center-sm">
<li>
<h2 class="ct-footer-list-header">Contract Vehicles</h2>
<ul>
<li>Company</li>
<li>Clients</li>
<li>News</li>
<li>Careers</li>
</ul>
</li>
<li>
<h2 class="ct-footer-list-header">Services</h2>
<ul>
<li>Design</li>
<li>Marketing</li>
<li>Sales</li>
<li>Programming</li>
<li>Support</li>
</ul>
</li>
<li>
<h2 class="ct-footer-list-header">About us</h2>
<ul>
<li>Thought Leadership</li>
<li>Webinars</li>
<li>Events</li>
<li>Sponsorships</li>
<li>Advisors</li>
<li>Training Program</li>
<li>Activities & Campaigns</li>
</ul>
</li>
<li>
<h2 class="ct-footer-list-header">Resources </h2>
<ul>
<li>WebCorpCo Blog</li>
<li>Hackathons</li>
<li>Videos</li>
<li>News Releases</li>
<li>Newsletters
<ul>
<li>FAQ</li>
<li>Our Board</li>
<li>Our Staff</li>
<li>Contact Us</li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="ct-footer-meta text-center-sm">
<div class="row">
<div class="col-sm-6 col-md-2"><img alt="logo" src="https://www.solodev.com/assets/footer/logo.png" /></div>
<div class="col-sm-6 col-md-3">
<address><span>WebCorpCo</span><br />
123 Easy Street<br />
Orlando, Florida, 32801<br />
<span>Phone: (555) 555-8899</span></address>
</div>
<div class="col-sm-6 col-md-2 ct-u-paddingTop10">
<img alt="app store" src="https://www.solodev.com/assets/footer/appstore.png" />
</div>
<div class="col-sm-6 col-md-2 ct-u-paddingTop10">
<img alt="google play store" src="https://www.solodev.com/assets/footer/androidstore.png" />
</div>
<div class="col-sm-6 col-md-3">
<ul class="ct-socials list-unstyled list-inline">
<li>
<img alt="facebook" src="https://www.solodev.com/assets/footer/facebook-white.png" />
</li>
<li>
<img alt="twitter" src="https://www.solodev.com/assets/footer/twitter-white.png" />
</li>
<li>
<img alt="youtube" src="https://www.solodev.com/assets/footer/youtube-white.png" />
</li>
<li>
<img alt="instagram" src="https://www.solodev.com/assets/footer/instagram-white.png" />
</li>
<li>
<img alt="pinterest" src="https://www.solodev.com/assets/footer/pinterest-white.png" />
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="ct-footer-post">
<div class="container">
<div class="inner-left">
<ul>
<li>FAQ</li>
<li>News</li>
<li>Contact Us</li>
</ul>
</div>
<div class="inner-right">
<p>Copyright © 2016 WebCorpCo. Privacy Policy</p>
<p><a class="ct-u-motive-color" href="" target="_blank">Web Design</a> by DigitalUs on Solodev CMS</p>
</div>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
The procedure I did to make the footer stay in place and not overlap the content is putting a and I even added a to double check the issue, at the beginning of the code. The footer stays in place and doesn't overlap the website content anymore. It's also a very responsive footer plus the improvement.
<style type="text/css">html,
body,
img,
figure {
max-width: 100%;
}
html,
body {
overflow-x: hidden;
color: #000;
-ms-overflow-style: scrollbar;
-webkit-font-smoothing: antialiased;
}
a,
a:hover,
a:focus,
a:active {
text-decoration: none;
color: inherit;
}
a {
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
.ct-u-paddingTop10 {
padding-top: 10px !important;
}
.ct-footer {
background-color: #111;
padding-top: 70px;
margin-top: 20px;
position: relative;
}
.ct-footer-pre {
width: 100%;
padding-bottom: 55px;
border-bottom: 1px solid #555;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ct-footer-pre span {
font-family: 'Open Sans Condensed', sans-serif;
color: #ebebeb;
font-size: 30px;
}
.ct-footer-pre .form-group {
position: relative;
margin: 0;
}
.ct-footer-pre .form-group:before,
.ct-footer-pre .form-group:after {
content: '';
display: table;
}
.ct-footer-pre .form-group:after {
clear: both;
}
.ct-footer-pre .form-group input {
border: 1px solid #39a2bf;
background-color: #333;
color: #fff;
height: 50px;
padding: 0 30px;
margin: 0 5px;
border-radius: 0 !important;
}
.ct-footer-pre .form-group button {
height: 50px;
position: relative;
width: 80px;
padding: 0
}
.ct-footer-list {
padding: 50px 0;
list-style: none;
padding-left: 0;
display: table;
width: 100%;
border-bottom: 1px solid #555;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ct-footer-list > li .ct-footer-list-header {
font-family: 'Open Sans Condensed', sans-serif;
color: #3a98b2;
font-size: 30px;
}
.ct-footer-list > li ul {
list-style: none;
padding-left: 0;
}
.ct-footer-list > li ul li a {
color: #fff;
}
.ct-footer-list > li ul li a:hover,
.ct-footer-post a:hover {
text-decoration: underline;
}
.ct-footer-post {
background: #000;
padding: 30px 0;
}
.ct-footer-post .inner-left,
.ct-footer-post .inner-right {
padding: 20px 0;
}
.ct-footer-post ul {
list-style: none;
padding-left: 0;
margin: 0 -20px;
}
.ct-footer-post ul li {
display: inline-block;
margin: 0 20px;
}
.ct-footer-post a {
color: #fff;
}
.ct-footer-post p {
color: #fff;
}
.ct-footer-meta {
padding-top: 30px;
}
.ct-footer-meta .ct-socials {
padding: 20px 0;
}
.ct-footer-meta .ct-socials li {
padding: 0 3px;
}
.ct-footer--with-button {
padding-top: 150px;
}
address {
color: #fff;
display: inline-block;
}
address span {
font-weight: 600;
}
address a {
color: #fff;
}
address a:hover {
text-decoration: underline;
}
.btn {
font-family: 'Open Sans Condensed', sans-serif;
border-radius: 0;
border: none;
text-transform: uppercase;
color: #111;
font-size: 26px;
padding: 12px 30px;
}
.btn.btn-motive {
background-color: #00bff3;
-webkit-transition: all .25s ease;
transition: all .25s ease;
}
.btn.btn-motive:hover,
.btn.btn-motive:hover:active {
background-color: #00bff3;
}
.btn.btn-violet {
color: #fff;
background-color: #4f4f99;
-webkit-transition: all .25s ease;
transition: all .25s ease;
}
.btn.btn-violet:hover {
background-color: #37376b;
}
.btn.btn-violet:hover:active {
background-color: #2f2f5b
}
.btn.btn-green {
color: #fff;
background-color: #43670f;
-webkit-transition: all .25s ease;
transition: all .25s ease;
}
.btn.btn-green:hover {
background-color: #36520c;
}
.btn.btn-green:hover:active {
background-color: #314a0b;
}
.btn.btn-red {
color: #fff;
background-color: #da2229;
-webkit-transition: all .25s ease;
transition: all .25s ease;
}
.btn.btn-red:hover {
background-color: #ae1b21;
}
.btn.btn-red:hover:active {
background-color: #9d181e
}
.btn.btn-white {
background-color: #fff;
-webkit-transition: all .25s ease;
transition: all .25s ease;
}
.btn.btn-white:hover {
background-color: #d9d9d9;
}
.btn.btn-white:hover:active {
background-color: #c9c9c9
}
.btn.btn-large {
padding: 20px 50px;
font-size: 30px;
white-space: normal;
}
.ct-mediaSection {
background-attachment: fixed;
}
.ct-section_header--type1 {
font-family: 'Open Sans Condensed', sans-serif;
color: #000;
font-size: 115px;
text-transform: uppercase;
}
.ct-section_header--type2 small {
font-family: 'coquette', fantasy;
font-size: 58px;
line-height: .7;
display: block;
font-weight: 700;
position: relative;
left: -12px;
}
.ct-section_header--type2 span {
font-family: 'Bebas Neue';
font-size: 115px;
line-height: .8;
}
.ct-section_header--type2 img {
display: inline-block;
float: left;
position: relative;
top: 15px;
padding-right: 3px;
}
.ct-section_header--type3 {
text-align: center;
}
.ct-section_header--type3 small {
font-family: 'coquette', fantasy;
font-size: 50px;
padding: 15px 0;
font-weight: 700;
color: #fff;
background-image: url("/core/fileparse.php/16/urlt/../images/ribbon.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block
}
.ct-section_header--type3 span {
font-family: 'Bebas Neue';
font-size: 150px;
font-weight: 400;
text-transform: uppercase;
line-height: .85
}
.ct-section_header--type4 {
text-align: center;
}
.ct-section_header--type4:before,
.ct-section_header--type4:after {
content: '';
display: table
}
.ct-section_header--type4:after {
clear: both
}
.ct-section_header--type4 small {
font-family: 'coquette', fantasy;
font-size: 50px;
color: inherit;
font-weight: 700;
display: block
}
.ct-section_header--type4 span {
font-family: 'nimbus-sans-condensed', sans-serif;
font-weight: 400;
font-weight: bold;
font-size: 150px;
text-transform: uppercase;
display: block;
line-height: .7
}
.ct-section_header + p {
font-size: 30px;
font-weight: 700;
letter-spacing: -1.5px;
text-align: center;
}
.ct-section_header--type4 + p {
font-family: 'nimbus-sans-condensed', sans-serif;
font-weight: 400;
font-size: 40px;
font-weight: 700;
line-height: 1;
}
/* Media Queries */
#media (min-width:1200px) {
.ct-footer-pre {
display: table;
}
.ct-footer-pre > .inner {
display: table-cell;
vertical-align: middle;
}
.ct-footer-list > li {
width: 20%;
display: table-cell;
vertical-align: top;
}
.ct-footer-list > li:last-child {
width: 7%;
}
}
#media (max-width:1199px) {
.ct-footer-pre .form-group {
padding-top: 15px
}
}
#media (max-width: 1199px) {
.ct-footer-list > li {
display: inline-block;
float: left;
}
}
#media (min-width:992px) {
.ct-footer-post .inner-left {
float: left;
}
.ct-footer-post .inner-right {
float: right;
}
}
#media (max-width:991px) {
.ct-footer-post {
text-align: center;
}
}
#media (min-width: 768px) and (max-width: 1199px) {
.ct-footer-list > li {
width: 33.3333%;
}
}
#media (min-width:768px) {
.ct-footer-post p {
display: inline-block;
}
.ct-footer-post p + p {
padding-left: 50px;
}
}
#media (max-width:767px) {
address {
padding-top: 30px;
}
}
#media (min-width: 480px) and (max-width:767px) {
.ct-footer-list > li {
width: 50%;
}
}
#media (min-width:480px) {
.ct-footer-pre .form-group button {
top: -1px;
}
.ct-footer-pre .form-group input {
width: 331px;
}
}
#media (max-width:479px) {
.ct-footer-pre .form-group input {
float: left;
width: 70%;
margin: 0;
}
.ct-footer-pre .form-group button {
float: left;
width: 30%;
}
.ct-footer-list > li {
width: 100%;
text-align: center;
}
.ct-footer-list {
padding: 20px 0;
}
.btn.btn-large {
padding: 20px 10px;
line-height: .9;
font-size: 26px;
letter-spacing: -.2px;
}
.ct-section_header--type1 {
font-size: 60px;
line-height: .8;
}
.ct-section_header + p {
font-size: 22px;
}
.ct-section_header--type3 small {
font-size: 25px;
}
.ct-section_header--type4 small {
font-size: 40px;
}
.ct-section_header--type3 span {
font-size: 90px;
}
.ct-section_header--type4 span {
font-size: 80px;
}
.ct-section_header--type4 + p {
font-size: 28px;
}
}
</style>
<div class="container"> </div>
<footer class="ct-footer">
<div class="container">
<form action="" enctype="multipart/form-data" method="post" name="contentForm"> </form>
<ul class="ct-footer-list text-center-sm">
<li>
<h2 class="ct-footer-list-header">Contract Vechciles</h2>
<ul>
<li>Company</li>
<li>Clients</li>
<li>News</li>
<li>Careers</li>
</ul>
</li>
<li>
<h2 class="ct-footer-list-header">Services</h2>
<ul>
<li>Design</li>
<li>Marketing</li>
<li>Sales</li>
<li>Programming</li>
<li>Support</li>
</ul>
</li>
<li>
<h2 class="ct-footer-list-header">About us</h2>
<ul>
<li>Thought Leadership</li>
<li>Webinars</li>
<li>Events</li>
<li>Sponsorships</li>
<li>Advisors</li>
<li>Training Program</li>
<li>Activities & Campaigns</li>
</ul>
</li>
<li>
<h2 class="ct-footer-list-header">Resources </h2>
<ul>
<li>WebCorpCo Blog</li>
<li>Hackathons</li>
<li>Videos</li>
<li>News Releases</li>
<li>Newsletters
<ul>
<li>FAQ</li>
<li>Our Board</li>
<li>Our Staff</li>
<li>Contact Us</li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="ct-footer-meta text-center-sm">
<div class="row">
<div class="col-sm-6 col-md-2"><img alt="logo" src="https://www.solodev.com/assets/footer/logo.png" /></div>
<div class="col-sm-6 col-md-3">
<address><span>WebCorpCo</span><br />
123 Easy Street<br />
Orlando, Florida, 32801<br />
<span>Phone: (555) 555-8899</span></address>
</div>
<div class="col-sm-6 col-md-2 ct-u-paddingTop10"> </div>
<div class="col-sm-6 col-md-3">
<p><img alt="facebook" src="https://www.solodev.com/assets/footer/facebook-white.png" /><img alt="twitter" src="https://www.solodev.com/assets/footer/twitter-white.png" /><img alt="youtube" src="https://www.solodev.com/assets/footer/youtube-white.png" /><img alt="instagram" src="https://www.solodev.com/assets/footer/instagram-white.png" /><img alt="pinterest" src="https://www.solodev.com/assets/footer/pinterest-white.png" /></p>
</div>
</div>
</div>
</div>
<div class="ct-footer-post">
<div class="container">
<div class="inner-left">
<ul>
<li>FAQ</li>
<li>News</li>
<li>Contact Us</li>
</ul>
</div>
<div class="inner-right">
<p>Copyright © 2016 WebCorpCo. Privacy Policy</p>
<p><a class="ct-u-motive-color" href="" target="_blank">Web Design</a> by DigitalUs on Solodev CMS</p>
</div>
</div>
</div>
</footer>
Related
I followed youtube tutorial, becouse I a m new and still learning front-end. When the menu is on deskop resolution, it is in a line, but when it gets to mobile resolution it changes to hamburger menu. Is is working fine, but after I click some link, I want it to close, becouse otherwise you cant see the content of the page.
nav {
height: 75px;
width: 100%;
background-color: #171c1f;
display: flex;
justify-content: space-between;
z-index: 99;
}
.logo-container {
display: flex;
align-items: center;
width: auto;
margin: 0;
}
.logo-txt {
font-size: 35px;
line-height: 75px;
padding-left: 30px;
font-family: 'Signika Negative', sans-serif;
font-weight: bold;
color: rgb(255, 255, 255);
cursor: pointer;
}
.nav-list {
position: fixed;
width: 100%;
height: 0vh;
top: 75px;
background: #4a499e;
float: right;
text-align: center;
transition: all .5s;
z-index: 2;
}
.nav-list li {
opacity: 0;
line-height: 30px;
margin: 50px 0;
transition: all .5s;
}
.nav-list li a {
color: #fff;
font-size: 27.5px;
text-transform: uppercase;
text-decoration: none;
font-weight: 900;
transition: .5s;
}
.nav-list li a.active,.nav-list li a:hover{
color: #00b1f7;
transition: 0.5s;
}
.hamburger-btn {
display: block;
font-size: 30px;
color: white;
float: right;
line-height: 75px;
margin-right: 40px;
cursor: pointer;
}
#check {
display: none;
}
#check:checked ~ .nav-list {
height: 100vh;
}
#check:checked ~ .nav-list li {
opacity: 1;
}
#media only screen and (min-width: 1100px) {
nav{
height: 100px;
background-color: transparent;
}
.hamburger-btn{
display: none;
}
.nav-list {
position: relative;
height: 100px;
top: 0;
background: none;
float: right;
text-align: right;
margin-right: 25px;
transition: none;
text-shadow: 2px 2px 3px #00b1f7;
}
.nav-list li a {
color: rgb(0, 0, 0);
font-size: 27.5px;
text-transform: uppercase;
text-decoration: none;
font-weight: 900;
}
.nav-list li{
display: inline-block;
opacity: 1;
line-height: 100px;
margin: 0 20px;
transition: none;
}
.nav-list li a.active, .nav-list li a:hover {
color: #00b1f7;
text-shadow: 1px 1px #000000;
}
.logo-txt {
font-size: 35px;
line-height: 75px;
padding-left: 30px;
font-family: 'Signika Negative', sans-serif;
font-weight: bold;
color: rgb(0, 0, 0);
cursor: pointer;
}
}
<header>
<nav>
<div class="logo-container">
<label class="logo-txt">Autirock</label>
</div>
<input type="checkbox" id="check">
<label for="check" class="hamburger-btn">
<i class="fas fa-bars"></i>
</label>
<ul class="nav-list">
<li><a class="active" href="#banner">DOMŮ</a></li>
<li>SLUŽBY A POMŮCKY</li>
<li>O MNĚ</li>
<li>CENÍK</li>
<li>KONTAKT</li>
</ul>
</nav>
</header>
That's a nice idea for hamburger menu. But you will need javascript to close it when clicking on a link. That's what I did. It is operated using a checkbox, so I unchecked it.
document.querySelectorAll(".nav-list li a").forEach(function(elem) {
elem.addEventListener('click', function(ev) {
document.getElementById("check").checked = false;
});
})
nav {
height: 75px;
width: 100%;
background-color: #171c1f;
display: flex;
justify-content: space-between;
z-index: 99;
}
.logo-container {
display: flex;
align-items: center;
width: auto;
margin: 0;
}
.logo-txt {
font-size: 35px;
line-height: 75px;
padding-left: 30px;
font-family: 'Signika Negative', sans-serif;
font-weight: bold;
color: rgb(255, 255, 255);
cursor: pointer;
}
.nav-list {
position: fixed;
width: 100%;
height: 0vh;
top: 75px;
background: #4a499e;
float: right;
text-align: center;
transition: all .5s;
z-index: 2;
}
.nav-list li {
opacity: 0;
line-height: 30px;
margin: 50px 0;
transition: all .5s;
}
.nav-list li a {
color: #fff;
font-size: 27.5px;
text-transform: uppercase;
text-decoration: none;
font-weight: 900;
transition: .5s;
}
.nav-list li a.active,
.nav-list li a:hover {
color: #00b1f7;
transition: 0.5s;
}
.hamburger-btn {
display: block;
font-size: 30px;
color: white;
float: right;
line-height: 75px;
margin-right: 40px;
cursor: pointer;
}
#check {
display: none;
}
#check:checked~.nav-list {
height: 100vh;
}
#check:checked~.nav-list li {
opacity: 1;
}
#media only screen and (min-width: 1100px) {
nav {
height: 100px;
background-color: transparent;
}
.hamburger-btn {
display: none;
}
.nav-list {
position: relative;
height: 100px;
top: 0;
background: none;
float: right;
text-align: right;
margin-right: 25px;
transition: none;
text-shadow: 2px 2px 3px #00b1f7;
}
.nav-list li a {
color: rgb(0, 0, 0);
font-size: 27.5px;
text-transform: uppercase;
text-decoration: none;
font-weight: 900;
}
.nav-list li {
display: inline-block;
opacity: 1;
line-height: 100px;
margin: 0 20px;
transition: none;
}
.nav-list li a.active,
.nav-list li a:hover {
color: #00b1f7;
text-shadow: 1px 1px #000000;
}
.logo-txt {
font-size: 35px;
line-height: 75px;
padding-left: 30px;
font-family: 'Signika Negative', sans-serif;
font-weight: bold;
color: rgb(0, 0, 0);
cursor: pointer;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<header>
<nav>
<div class="logo-container">
<label class="logo-txt">Autirock</label>
</div>
<input type="checkbox" id="check">
<label for="check" class="hamburger-btn">
<i class="fas fa-bars"></i>
</label>
<ul class="nav-list">
<li><a class="active" href="#banner">DOMŮ</a></li>
<li>SLUŽBY A POMŮCKY</li>
<li>O MNĚ</li>
<li>CENÍK</li>
<li>KONTAKT</li>
</ul>
</nav>
</header>
I was able to find an html and css code to start creating my footer.
I was able to make it look a bit the way I want as seen in the following code:
However, I wanna be able to center all three headers and I can't seem to find how...
* {
margin: 0;
padding: 0;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700&display=swap');
body {
line-height: 1.5;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.textDecoration {
text-decoration: none;
color: inherit;
}
.container {
max-width: 100%;
margin: 0px;
}
.row {
display: flex;
flex-wrap: wrap;
}
ul {
list-style: none;
}
.footer {
background-color: #24262b;
padding: 0px 0;
width: 100%;
}
.footer-col {
width: 25%;
padding: 0 15px;
}
.footer-col h4 {
font-size: 18px;
color: #ffffff;
text-transform: capitalize;
margin-bottom: 35px;
font-weight: 500;
position: relative;
}
.footer-col h4::before {
content: '';
position: absolute;
left: 0;
bottom: -10px;
background-color: red;
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer-col ul li:not(:last-child) {
margin-bottom: 10px;
}
.footer-col ul li a {
font-size: 16px;
text-transform: capitalize;
color: #ffffff;
text-decoration: none;
font-weight: 300;
color: #bbbbbb;
display: block;
transition: all 0.3s ease;
}
.footer-col ul li a:hover {
color: #ffffff;
padding-left: 8px;
}
.footer-col .social-links a {
display: inline-block;
height: 40px;
width: 40px;
background-color: rgba(255, 255, 255, 0.2);
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer-col .social-links a:hover {
color: #24262b;
background-color: #ffffff;
}
<p>In this example, we remove the bullets from the list, and its default padding and margin.</p>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col">
<h4>Terms & Conditions</h4>
</div>
<div class="footer-col">
<h4><a class="textDecoration" href="#privacy">Privacy and Policy</a></h4>
</div>
<div class="footer-col">
<h4>Follow Us</h4>
<div class="social-links">
</div>
</div>
<div class="footer-col">
<div class="social-links">
<h3><img src="https://i.ibb.co/Lp1sB0M/face4.png"></a>
<img src="https://i.ibb.co/XVzFjBR/ig3.png"></a>
<img src="https://i.ibb.co/vVRq5dz/tw2.png"></a>
<img src="https://i.ibb.co/8j8dWcG/yt2.png"></a>
</h3>
</div>
</div>
</div>
</footer>
Any hints you can provide me to achieve this?
What would you recommend for social network icons for the footer?
It makes sense to put all h4's in a single footer-col div together because you want them grouped in the center. So you can do that, then add display: flex; to footer-col and use justify-content: center; to center them. Then you can add a gap to space them out. I also added display: flex; on your social-links to allow them to flex to stay on the same line.
* {
margin: 0;
padding: 0;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700&display=swap');
body {
line-height: 1.5;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.social-links {
display: flex;
}
.textDecoration {
text-decoration: none;
color: inherit;
}
.container {
max-width: 100%;
margin: 0px;
}
.row {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
ul {
list-style: none;
}
.footer {
background-color: #24262b;
padding: 0px 0;
width: 100%;
}
.footer-col {
display: flex;
width: 100%;
justify-content: center;
gap: 2em;
}
.footer-col h4 {
font-size: 18px;
color: #ffffff;
text-transform: capitalize;
margin-bottom: 35px;
font-weight: 500;
position: relative;
}
.footer-col h4::before {
content: '';
position: absolute;
left: 0;
bottom: -10px;
background-color: red;
height: 2px;
box-sizing: border-box;
width: 50px;
}
.footer-col ul li:not(:last-child) {
margin-bottom: 10px;
}
.footer-col ul li a {
font-size: 16px;
text-transform: capitalize;
color: #ffffff;
text-decoration: none;
font-weight: 300;
color: #bbbbbb;
display: block;
transition: all 0.3s ease;
}
.footer-col ul li a:hover {
color: #ffffff;
padding-left: 8px;
}
.footer-col .social-links a {
display: inline-block;
height: 40px;
width: 40px;
background-color: rgba(255, 255, 255, 0.2);
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer-col .social-links a:hover {
color: #24262b;
background-color: #ffffff;
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<p>In this example, we remove the bullets from the list, and its default padding and margin.</p>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col">
<h4>Terms & Conditions</h4>
<h4><a class="textDecoration" href="#privacy">Privacy and Policy</a></h4>
<h4>Follow Us</h4>
</div>
<div class="social-links"><img src="./img/face4.png">
<img src="./img/ig3.png">
<img src="./img/tw2.png">
<img src="./img/yt2.png">
</div>
</div>
</div>
</footer>
</body>
</html>
I have tried literally everything to try and make the exit icon show up on the menu by giving it an index of 999 but still no luck in making it show, any idea why it is not working?
I have added the JavaScript as well.
menuBtn.addEventListener('click' , () => {
const menu = document.querySelectorAll('.menu');
for(let el of menu){
el.style.display = 'block'
}
})
/*Navbar*/
.navbar {
width: 100%;
position: fixed;
font-family: "Ubuntu", sans-serif;
padding: 30px 0;
}
.navbar .logo a {
font-size: 2rem;
font-weight: 600;
color: white;
}
.navbar .logo a span {
color: crimson;
transition: all 0.3s ease;
}
.sticky {
padding: 30px 0;
background-color: crimson;
}
.sticky .logo a span {
color: #fff;
}
.menu li {
display: inline-block;
list-style: none;
}
.menu li a {
color: #fff;
font-size: 1.1rem;
font-weight: 500;
margin-left: 35px;
padding-left: 5px;
transition: color 0.3s ease;
}
.menu li a:hover {
border-left: 3px solid white;
color: crimson;
}
.sticky .menu li a:hover {
color: white;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/*Menu Button*/
.fa.fa-bars.menuBtn {
color: #fff;
font-size: 35px;
cursor: pointer;
display: none;
}
.fa.fa-times-circle.exit {
color: white;
font-size: 35px;
cursor: pointer;
display: none;
}
#media (max-width: 934px) {
.max-width {
padding: 0 50px;
}
.fa.fa-bars.menuBtn {
display: block;
padding-left: 10em;
}
.menu {
position: fixed;
height: 100vh;
width: 100%;
left: 0;
top: 0;
background-color: #111;
text-align: center;
padding-top: 110px;
display: none;
}
.fa.fa-times-circle.exit {
z-index: 999;
display: none;
margin: 1.8rem;
}
.menu ul li {
display: block;
}
.menu ul li a {
display: inline-block;
margin: 20px 0;
font-size: 35px;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/fontawesome.min.css" integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni" crossorigin="anonymous">
<header>
<nav class="navbar" id="nav">
<div class="max-width">
<div class="logo"><a id="headSpan" href="index.html">Port<span>folio.</span></a></div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>CV</li>
<li>Contact</li>
</ul>
</div>
<div>
<i class="fa fa-bars menuBtn" id="menuBtn" aria-hidden="true"></i>
<i class="fa fa-times-circle exit" id="exitBtn" aria-hidden="true"></i>
</div>
</div>
</nav>
<!--Head Banner-->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Hadi Zouhbi</div>
<div class="text-3">And I'm a <span id="headSpan"><Developer></Developer></span></div>
</div>
</div>
</section>
</header>
Because it never made display:block when enter in small screen like you did for menubtn.
.fa.fa-bars.menuBtn {
display: block;
padding-left: 10em;
}
Do the same for exit icon under #media (max-width: 934px) also
.fa.fa-times-circle.exit {
display: inline-block;
}
And remove this code
.fa.fa-times-circle.exit {
z-index: 999;
display: none;
margin: 1.8rem;
}
Working example:
/*Navbar*/
body {
background-color: #ccc;
}
.navbar {
width: 100%;
position: fixed;
font-family: "Ubuntu", sans-serif;
padding: 30px 0;
}
.navbar .logo a {
font-size: 2rem;
font-weight: 600;
color: white;
}
.navbar .logo a span {
color: crimson;
transition: all 0.3s ease;
}
.sticky {
padding: 30px 0;
background-color: crimson;
}
.sticky .logo a span {
color: #fff;
}
.menu li {
display: inline-block;
list-style: none;
}
.menu li a {
color: #fff;
font-size: 1.1rem;
font-weight: 500;
margin-left: 35px;
padding-left: 5px;
transition: color 0.3s ease;
}
.menu li a:hover {
border-left: 3px solid white;
color: crimson;
}
.sticky .menu li a:hover {
color: white;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/*Menu Button*/
.fa.fa-bars.menuBtn {
color: #fff;
font-size: 35px;
cursor: pointer;
display: none;
}
.fa.fa-times-circle.exit {
color: white;
font-size: 35px;
cursor: pointer;
display: none;
}
#media (max-width: 934px) {
.max-width {
padding: 0 50px;
}
.fa.fa-bars.menuBtn {
display: block;
padding-left: 10em;
}
.fa.fa-times-circle.exit {
display: inline-block;
}
.menu {
position: fixed;
height: 100vh;
width: 100%;
left: 0;
top: 0;
background-color: #111;
text-align: center;
padding-top: 110px;
display: none;
}
.menu ul li {
display: block;
}
.menu ul li a {
display: inline-block;
margin: 20px 0;
font-size: 35px;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/fontawesome.min.css" integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni" crossorigin="anonymous">
<header>
<nav class="navbar" id="nav">
<div class="max-width">
<div class="logo"><a id="headSpan" href="index.html">Port<span>folio.</span></a></div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>CV</li>
<li>Contact</li>
</ul>
</div>
<div>
<i class="fa fa-bars menuBtn" id="menuBtn" aria-hidden="true"></i>
<i class="fa fa-times-circle exit" id="exitBtn" aria-hidden="true"></i>
</div>
</div>
</nav>
<!--Head Banner-->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Hadi Zouhbi</div>
<div class="text-3">And I'm a <span id="headSpan"><Developer></Developer></span></div>
</div>
</div>
</section>
</header>
html,
body {
width: 100%;
margin: 0px;
padding: 0px;
font-family: 'Century Gothic', sans-serif;
box-sizing: border-box;
overflow-x: hidden;
}
.wrapper {
overflow-x: hidden;
}
#main-header {
background-color: transparent;
text-align: center;
color: darkslategray;
font-family: 'Century Gothic', sans-serif;
font-size: 20px;
letter-spacing: 4px;
line-height: 50px;
}
#main-header a {
color: darkslategray;
text-decoration: none;
transition: all ease-in-out 250ms;
}
#main-header a:hover {
color: #5e3232;
}
#menu {
background-color: transparent;
}
#menu ul {
background-color: transparent;
text-align: center;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
font-size: 18px;
padding-left: 10px;
padding-right: 10px;
color: darkslategray;
text-decoration: none;
transition: all ease-in-out 250ms;
}
#menu a:hover {
color: rgb(136, 94, 38);
}
body {
background-color: /*linear-gradient(60deg, #CCFFFF, #FFCCCC);*/
thistle;
background-repeat: none;
line-height: 24px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
color: #555;
font-weight: normal;
}
main {
margin: 0 auto;
padding: 30px 20px;
width: 90vw;
}
section {
margin: auto;
}
article {
padding: 20px;
margin-bottom: 20px;
}
footer {
text-align: center;
font-size: 15px;
font-family: 'Century Gothic', sans-serif;
padding: 20px;
background-color: thistle;
bottom: 0;
margin: 0;
width: 100%;
position: absolute;
}
#item a {
font-size: 18px;
color: darkslategray;
text-decoration: none;
transition: all ease-in-out 250ms;
}
#item a:hover {
color: rgba(104, 161, 28, 0.911);
}
#media (max-width: 768px) {
#main-header {
float: none;
text-align: center;
padding-top: 15px;
}
#main-header h1 {
font-size: 24px;
line-height: 25px;
}
.logos {
padding-top: 5px;
}
#menu {
margin-top: -10px;
}
#menu a {
font-size: 17px;
}
body {
position: relative;
}
body::after {
content: "";
display: block;
height: 50px;
}
body h2 {
font-size: 20px;
margin-top: -25px;
}
body p {
font-size: 16px;
}
}
<div class="wrapper">
<header id="main-header" class="alt">
<div class="logos">
</i>
</i>
</i>
</div>
</header>
<nav id="menu">
<!--<div class="container">-->
<ul class="links">
<li>Home</li>
<li>About Me</li>
<li class="current">Projects</li>
</ul>
<!--</div>-->
</nav>
<main>
<section>
<article id="item">
<h2>Projects</h2>
<h4>Request</h4>
<small>January to April 2020</small>
<h4>Reverse</h4>
<small>September to December 2018</small>
</article>
</section>
</main>
<footer>
<p>© 2020</p>
</footer>
</div>
I'm not sure why my footer is not centered. The main header, menu, and social media links are all centered, but it's just the footer that is not. I've tried redoing the code from scratch, but I'm not sure if I missed something. I'm new to coding, so any help would be appreciated.
The problem is in your footer css declaration. You have the padding set to 20px and width at 100%, which is adding some space to the left of your footer and offsetting it, but since the width is 100%, it spans past the page width.
Just change the padding to only apply to the top and bottom
footer {
text-align: center;
font-size: 15px;
font-family: 'Century Gothic', sans-serif;
padding: 20px 0;
background-color: thistle;
bottom: 0;
margin: 0;
width: 100%;
position: absolute;
}
Your problem is with box-sizing box-sizing: content-box is the default setting, which means that the rendering engine measures the width (set here to 100%) before adding the padding. box-sizing: content-box will tell the rendering engine to add the padding into the measurement, so your width: 100% will include the 20px padding.
html,
body {
width: 100%;
margin: 0px;
padding: 0px;
font-family: 'Century Gothic', sans-serif;
box-sizing: border-box;
overflow-x: hidden;
}
.wrapper {
overflow-x: hidden;
}
#main-header {
background-color: transparent;
text-align: center;
color: darkslategray;
font-family: 'Century Gothic', sans-serif;
font-size: 20px;
letter-spacing: 4px;
line-height: 50px;
}
#main-header a {
color: darkslategray;
text-decoration: none;
transition: all ease-in-out 250ms;
}
#main-header a:hover {
color: #5e3232;
}
#menu {
background-color: transparent;
}
#menu ul {
background-color: transparent;
text-align: center;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
font-size: 18px;
padding-left: 10px;
padding-right: 10px;
color: darkslategray;
text-decoration: none;
transition: all ease-in-out 250ms;
}
#menu a:hover {
color: rgb(136, 94, 38);
}
body {
background-color: /*linear-gradient(60deg, #CCFFFF, #FFCCCC);*/
thistle;
background-repeat: none;
line-height: 24px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
color: #555;
font-weight: normal;
}
main {
margin: 0 auto;
padding: 30px 20px;
width: 90vw;
}
section {
margin: auto;
}
article {
padding: 20px;
margin-bottom: 20px;
}
footer {
text-align: center;
font-size: 15px;
font-family: 'Century Gothic', sans-serif;
padding: 20px;
background-color: thistle;
bottom: 0;
margin: 0;
width: 100%;
position: absolute;
box-sizing: border-box;
}
#item a {
font-size: 18px;
color: darkslategray;
text-decoration: none;
transition: all ease-in-out 250ms;
}
#item a:hover {
color: rgba(104, 161, 28, 0.911);
}
#media (max-width: 768px) {
#main-header {
float: none;
text-align: center;
padding-top: 15px;
}
#main-header h1 {
font-size: 24px;
line-height: 25px;
}
.logos {
padding-top: 5px;
}
#menu {
margin-top: -10px;
}
#menu a {
font-size: 17px;
}
body {
position: relative;
}
body::after {
content: "";
display: block;
height: 50px;
}
body h2 {
font-size: 20px;
margin-top: -25px;
}
body p {
font-size: 16px;
}
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="wrapper">
<header id="main-header" class="alt">
<div class="logos">
</i>
</i>
</i>
</div>
</header>
<nav id="menu">
<!--<div class="container">-->
<ul class="links">
<li>Home</li>
<li>About Me</li>
<li class="current">Projects</li>
</ul>
<!--</div>-->
</nav>
<main>
<section>
<article id="item">
<h2>Projects</h2>
<h4>Request</h4>
<small>January to April 2020</small>
<h4>Reverse</h4>
<small>September to December 2018</small>
</article>
</section>
</main>
<footer>
<p>© 2020</p>
</footer>
</div>
My input isnt alignin properly with the element under it, the accordion. I want the input to align horizontally with the accordion as the textt to the left does, Tried around diffrent things, but did more harm then good.
//Accordion-----------------------------------------------
$(document).ready(function () {
$(".accordion-desc").fadeOut(0);
$(".accordion").click(function () {
$(".accordion-desc").not($(this).next()).slideUp('fast');
$(this).next().slideToggle(400);
});
});
$(".accordion").click(function () {
$(".accordion").not(this).find(".rotate").removeClass("down");
$(this).find(".rotate").toggleClass("down");
});
//-----------------------------------------------------------
body {
background-color: #eee;
font-family: "Open Sans", sans-serif;
}
header {
background-color: #2cc185;
color: #fff;
padding: 2em 1em;
margin-bottom: 1.5em;
}
h1 {
font-weight: 300;
text-align: center;
}
.container {
position: relative;
margin: 0 auto;
}
button {
background-color: #2cc185;
color: #fff;
border: 0;
padding: 1em 1.5em;
}
button:hover {
background-color: #239768;
color: #fff;
}
button:focus {
background-color: #239768;
color: #fff;
}
.accordion {
position: relative;
background-color: #fff;
display: inline-block;
width: 100%;
border-top: 1px solid #f1f4f3;
border-bottom: 1px solid #f1f4f3;
font-weight: 700;
color: #74777b;
vertical-align: middle;
}
/*Rotation-------------------------------------*/
.accordion .fa {
position: relative;
float: right;
}
.rotate {
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.rotate.down {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
/*------------------------------------------*/
.link {
text-align: right;
margin-bottom: 20px;
margin-right: 30px;
}
.accordion h4 {
position: relative;
/* top: 0.8em; */
margin: 0;
font-size: 14px;
font-weight: 700;
float: left;
}
.accordion a {
position: relative;
display: block;
color: #74777b;
padding: 1em 1em 2.5em 1em;
text-decoration: none;
}
.accordion a:hover {
text-decoration: none;
color: #2cc185;
background-color: #e7ecea;
transition: 0.3s;
}
.accordion-desc {
background-color: #f1f4f3;
color: #74777b;
z-index: 2;
padding: 20px 15px;
}
#media (min-width:480px) {
.container { max-width: 80%; }
}
#media (min-width:768px) {
.container { max-width: 1000px; }
}
.accordion-desc p {
word-break: break-all;
}
.accordion .status {
position: relative;
float: right;
right: 20%;
vertical-align: middle;
}
.btn {
margin-top: 10px;
}
.heading {
margin: 10px;
vertical-align: middle;
display: inline-block;
position: relative;
width: 100%;
}
.heading h2 {
float: left;
position: relative;
margin:auto;
vertical-align: middle;
}
.heading .searcheBar {
float: right;
position: relative;
margin: auto;
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="container">
<div class ="heading">
<h2>All projekt</h2>
<input class="searcheBar form-control" type="text"/>
</div>
<div class="accordion">
<a href="#">
<h4>#item.Title</h4>
<h4 class="status">#Resource.AccordionStatus</h4>
<i class="fa fa-chevron-right rotate"></i>
</a>
</div>
<div class="accordion-desc">
<h3>#Resource.AccordionProjectLead</h3>
<h4>Kay Wiberg</h4>
<h3>#Resource.AccordionDescription</h3>
<p>
#item.Description
<p>
<div class="link">
#Resource.AccordionGoTo
</div>
</div>
Change :
.heading {
margin:10px;
//more code...
}
To:
.heading {
margin:10px 0px 10px 0px;
//More code...
}
body {
background-color: #eee;
font-family: "Open Sans", sans-serif;
}
header {
background-color: #2cc185;
color: #fff;
padding: 2em 1em;
margin-bottom: 1.5em;
}
h1 {
font-weight: 300;
text-align: center;
}
.container {
position: relative;
margin: 0 auto;
}
button {
background-color: #2cc185;
color: #fff;
border: 0;
padding: 1em 1.5em;
}
button:hover {
background-color: #239768;
color: #fff;
}
button:focus {
background-color: #239768;
color: #fff;
}
.accordion {
position: relative;
background-color: #fff;
display: inline-block;
width: 100%;
border-top: 1px solid #f1f4f3;
border-bottom: 1px solid #f1f4f3;
font-weight: 700;
color: #74777b;
vertical-align: middle;
}
/*Rotation-------------------------------------*/
.accordion .fa {
position: relative;
float: right;
}
.rotate {
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.rotate.down {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
/*------------------------------------------*/
.link {
text-align: right;
margin-bottom: 20px;
margin-right: 30px;
}
.accordion h4 {
position: relative;
/* top: 0.8em; */
margin: 0;
font-size: 14px;
font-weight: 700;
float: left;
}
.accordion a {
position: relative;
display: block;
color: #74777b;
padding: 1em 1em 2.5em 1em;
text-decoration: none;
}
.accordion a:hover {
text-decoration: none;
color: #2cc185;
background-color: #e7ecea;
transition: 0.3s;
}
.accordion-desc {
background-color: #f1f4f3;
color: #74777b;
z-index: 2;
padding: 20px 15px;
}
#media (min-width:480px) {
.container { max-width: 80%; }
}
#media (min-width:768px) {
.container { max-width: 1000px; }
}
.accordion-desc p {
word-break: break-all;
}
.accordion .status {
position: relative;
float: right;
right: 20%;
vertical-align: middle;
}
.btn {
margin-top: 10px;
}
.heading {
margin:10px 0px 10px 0px;
vertical-align: middle;
display: inline-block;
position: relative;
width: 100%;
}
.heading h2 {
float: left;
position: relative;
margin:auto;
vertical-align: middle;
}
.heading .searcheBar {
float: right;
position: relative;
margin: auto;
vertical-align: middle;
}
<div class="container">
<div class ="heading">
<h2>All projekt</h2>
<input class="searcheBar form-control" type="text"/>
</div>
<div class="accordion">
<a href="#">
<h4>#item.Title</h4>
<h4 class="status">#Resource.AccordionStatus</h4>
<i class="fa fa-chevron-right rotate"></i>
</a>
</div>
<div class="accordion-desc">
<h3>#Resource.AccordionProjectLead</h3>
<h4>Kay Wiberg</h4>
<h3>#Resource.AccordionDescription</h3>
<p>#item.Description</p>
<div class="link">
#Resource.AccordionGoTo
</div>
</div>
Option #1
Adjusting margin:
.heading {margin: 10px auto;}
//Accordion-----------------------------------------------
$(document).ready(function() {
$(".accordion-desc").fadeOut(0);
$(".accordion").click(function() {
$(".accordion-desc").not($(this).next()).slideUp('fast');
$(this).next().slideToggle(400);
});
});
$(".accordion").click(function() {
$(".accordion").not(this).find(".rotate").removeClass("down");
$(this).find(".rotate").toggleClass("down");
});
//-----------------------------------------------------------
body {
background-color: #eee;
font-family: "Open Sans", sans-serif;
}
header {
background-color: #2cc185;
color: #fff;
padding: 2em 1em;
margin-bottom: 1.5em;
}
h1 {
font-weight: 300;
text-align: center;
}
.container {
position: relative;
margin: 0 auto;
}
button {
background-color: #2cc185;
color: #fff;
border: 0;
padding: 1em 1.5em;
}
button:hover {
background-color: #239768;
color: #fff;
}
button:focus {
background-color: #239768;
color: #fff;
}
.accordion {
position: relative;
background-color: #fff;
display: inline-block;
width: 100%;
border-top: 1px solid #f1f4f3;
border-bottom: 1px solid #f1f4f3;
font-weight: 700;
color: #74777b;
vertical-align: middle;
}
/*Rotation-------------------------------------*/
.accordion .fa {
position: relative;
float: right;
}
.rotate {
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.rotate.down {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
/*------------------------------------------*/
.link {
text-align: right;
margin-bottom: 20px;
margin-right: 30px;
}
.accordion h4 {
position: relative;
/* top: 0.8em; */
margin: 0;
font-size: 14px;
font-weight: 700;
float: left;
}
.accordion a {
position: relative;
display: block;
color: #74777b;
padding: 1em 1em 2.5em 1em;
text-decoration: none;
}
.accordion a:hover {
text-decoration: none;
color: #2cc185;
background-color: #e7ecea;
transition: 0.3s;
}
.accordion-desc {
background-color: #f1f4f3;
color: #74777b;
z-index: 2;
padding: 20px 15px;
}
#media (min-width:480px) {
.container {
max-width: 80%;
}
}
#media (min-width:768px) {
.container {
max-width: 1000px;
}
}
.accordion-desc p {
word-break: break-all;
}
.accordion .status {
position: relative;
float: right;
right: 20%;
vertical-align: middle;
}
.btn {
margin-top: 10px;
}
.heading {
margin: 10px auto;
vertical-align: middle;
display: inline-block;
position: relative;
width: 100%;
}
.heading h2 {
float: left;
position: relative;
margin: auto;
vertical-align: middle;
}
.heading .searcheBar {
float: right;
position: relative;
margin: auto;
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<h1>Adjusting Margin</h1>
<div class="container">
<div class="heading">
<h2>All projekt</h2>
<input class="searcheBar form-control" type="text" />
</div>
<div class="accordion">
<a href="#">
<h4>#item.Title</h4>
<h4 class="status">#Resource.AccordionStatus</h4>
<i class="fa fa-chevron-right rotate"></i>
</a>
</div>
<div class="accordion-desc">
<h3>#Resource.AccordionProjectLead</h3>
<h4>Kay Wiberg</h4>
<h3>#Resource.AccordionDescription</h3>
<p>
#item.Description
<p>
<div class="link">
#Resource.AccordionGoTo
</div>
</div>
Option #2
Deferring to padding:
.heading {padding: 10px; box-sizing: border-box;}
//Accordion-----------------------------------------------
$(document).ready(function() {
$(".accordion-desc").fadeOut(0);
$(".accordion").click(function() {
$(".accordion-desc").not($(this).next()).slideUp('fast');
$(this).next().slideToggle(400);
});
});
$(".accordion").click(function() {
$(".accordion").not(this).find(".rotate").removeClass("down");
$(this).find(".rotate").toggleClass("down");
});
//-----------------------------------------------------------
body {
background-color: #eee;
font-family: "Open Sans", sans-serif;
}
header {
background-color: #2cc185;
color: #fff;
padding: 2em 1em;
margin-bottom: 1.5em;
}
h1 {
font-weight: 300;
text-align: center;
}
.container {
position: relative;
margin: 0 auto;
}
button {
background-color: #2cc185;
color: #fff;
border: 0;
padding: 1em 1.5em;
}
button:hover {
background-color: #239768;
color: #fff;
}
button:focus {
background-color: #239768;
color: #fff;
}
.accordion {
position: relative;
background-color: #fff;
display: inline-block;
width: 100%;
border-top: 1px solid #f1f4f3;
border-bottom: 1px solid #f1f4f3;
font-weight: 700;
color: #74777b;
vertical-align: middle;
}
/*Rotation-------------------------------------*/
.accordion .fa {
position: relative;
float: right;
}
.rotate {
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.rotate.down {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
/*------------------------------------------*/
.link {
text-align: right;
margin-bottom: 20px;
margin-right: 30px;
}
.accordion h4 {
position: relative;
/* top: 0.8em; */
margin: 0;
font-size: 14px;
font-weight: 700;
float: left;
}
.accordion a {
position: relative;
display: block;
color: #74777b;
padding: 1em 1em 2.5em 1em;
text-decoration: none;
}
.accordion a:hover {
text-decoration: none;
color: #2cc185;
background-color: #e7ecea;
transition: 0.3s;
}
.accordion-desc {
background-color: #f1f4f3;
color: #74777b;
z-index: 2;
padding: 20px 15px;
}
#media (min-width:480px) {
.container {
max-width: 80%;
}
}
#media (min-width:768px) {
.container {
max-width: 1000px;
}
}
.accordion-desc p {
word-break: break-all;
}
.accordion .status {
position: relative;
float: right;
right: 20%;
vertical-align: middle;
}
.btn {
margin-top: 10px;
}
.heading {
padding: 10px;
box-sizing: border-box;
vertical-align: middle;
display: inline-block;
position: relative;
width: 100%;
}
.heading h2 {
float: left;
position: relative;
margin: auto;
vertical-align: middle;
}
.heading .searcheBar {
float: right;
position: relative;
margin: auto;
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<h1>Deferring to Padding</h1>
<div class="container">
<div class="heading">
<h2>All projekt</h2>
<input class="searcheBar form-control" type="text" />
</div>
<div class="accordion">
<a href="#">
<h4>#item.Title</h4>
<h4 class="status">#Resource.AccordionStatus</h4>
<i class="fa fa-chevron-right rotate"></i>
</a>
</div>
<div class="accordion-desc">
<h3>#Resource.AccordionProjectLead</h3>
<h4>Kay Wiberg</h4>
<h3>#Resource.AccordionDescription</h3>
<p>
#item.Description
<p>
<div class="link">
#Resource.AccordionGoTo
</div>
</div>