Can't center social media icons in the footer - html

Question

I've been stuck on a problem for over 2 days and I need to ask for help. On Desktop browsers the icons are suppose to left align and in mobile browsers they are are suppose to center align.
Here is the site so far.
Inspect Site Here
I've created a website where the layout is comprised of stacked sections where height and width values of each section are defined using VH percentages to get a specific layout.
This is an example of how a section is defined in the CSS.
.content3 {
height: 100vh;
width: 100%;
display: table;
background: #FFFFFF url('../img/chair.png') no-repeat center center;
background-size: 60%;
}
Here is how I defined the footer's CSS.
.footer {
height: 40vh;
width: 100%;
background: #312D3B;
}
Here is the HTML for the .footer
<section class="footer">
<div class="Social">
<img class="icons" src="img/dribbble.svg">
<img class="icons2" src="img/twitter.svg">
<img class="icons3" src="img/instagram.svg">
</div>
Here is the CSS for the .Social class
.Social {
height: 100%;
float: left;
position: relative;
}
Here is the CSS for the .icons class
.icons {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
padding-left: 3.5em;
}
Here is the CSS for the .icons2 class
.icons2 {
bottom: 0;
left: 4.5em;
margin: auto;
position: absolute;
right: 0;
top: 0;
padding-left: 3.5em;
}
Here is the css for the icons3 class
.icons3 {
bottom: 0;
left: 9em;
margin: auto;
position: absolute;
right: 0;
top: 0;
padding-left: 3.5em;
}
Please help. This is my first question ever on this site.

Answer 1

You can use flexbox to help you with this issue, just replace style.css code with this one
CSS:
/* --------------------------------
Primary style
-------------------------------- */
*, *::after, *::before {
box-sizing: border-box;
}
body {
font-family: sans-serif;
line-height: 1;
margin: 0;
width: 100%;
height: 100%;
background: #1C1D21;
}
/* --------------------------------
Final project
-------------------------------- */
main {
position: relative;
z-index: 1;
height: 100vh;
overflow: hidden;
box-shadow: 0 0 50px #000;
transition: transform .5s;
}
.nav-open main {
transform: scale(.8);
}
.intro {
height: 90vh;
width: 100%;
display: table;
background: #FCC732 url('../img/WatchByMaz2.png') no-repeat center center;
background-size: 90%;
}
.content {
height: 100vh;
width: 100%;
display: table;
background: #FFFFFF url('../img/OculusConsumerByMaz.png') no-repeat center center;
background-size: 90%;
}
.content2 {
height: 100vh;
width: 100%;
display: table;
background: #FCC732 url('../img/speedingAppByMaz.png') no-repeat center center;
background-size: 90%;
}
.content3 {
height: 100vh;
width: 100%;
display: table;
background: #FFFFFF url('../img/chair.png') no-repeat center center;
background-size: 60%;
}
.footer {
height: 40vh;
width: 100%;
background: #312D3B;
}
.main-header {
position: relavtive;
background: #fff;
width: 100%;
top: 0;
}
section .center {
display: table-cell;
vertical-align: bottom;
text-align: center;
padding-bottom: 4em;
}
.btn {
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: 'lulo_cleanone' , Arial, sans-serif;
color: #312D3B;
font-size: 16px;
padding: 10px 20px 10px 20px;
border: solid #312D3B 2px;
text-decoration: none;
}
.btn:hover {
text-decoration: none;
}
.logo {
position: fixed;
z-index: 1;
top: 43px;
left: 44px;
white-space: nowrap;
}
h1 {
font-family: 'lulo_cleanone_bold' , Arial, sans-serif;
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 90px;
color: #312D3B;
}
.nav-trigger {
position: fixed;
z-index: 4;
top: 40px;
right: 46px;
height: 44px;
width: 44px;
overflow: hidden;
color: transparent;
white-space: nowrap;
text-indent: 100%;
}
.nav-trigger span,
.nav-trigger span::before,
.nav-trigger span::after {
position: absolute;
height: 4px;
width: 40px;
background: #000000;
}
.nav-trigger span {
width: 29px;
}
.nav-trigger span {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: background .3s;
}
.nav-trigger span::before,
.nav-trigger span::after {
content: '';
top: 0;
left: 0;
transition: background .3s, transform .3s;
}
.nav-trigger span::before {
transform: translateY(-12px);
}
.nav-trigger span::after {
transform: translateY(12px);
}
.nav-trigger:hover span,
.nav-trigger:hover span::before,
.nav-trigger:hover span::after {
background: #000000;
}
.nav-open .nav-trigger span {
background: transparent;
}
.nav-open .nav-trigger span::before,
.nav-open .nav-trigger span::after {
background: #FFFFFF;
}
.nav-open .nav-trigger span::before {
transform: rotate(-45deg);
}
.nav-open .nav-trigger span::after {
transform: rotate(45deg);
}
.overlay {
position: fixed;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #1C1D21;
opacity: 0;
visibility: hidden;
transition: opacity .5s, visibility .5s;
}
.nav-open .overlay {
opacity: .6;
visibility: visible;
}
.nav-container {
position: fixed;
z-index: 3;
top: 0;
right: 0;
height: 100%;
width: 90%;
max-width: 460px;
padding: 2em 3.5em;
background: #312D3B;
overflow: hidden;
transform: translateZ(0);
transform: translateX(100%);
transition: transform .5s cubic-bezier(.07,.23,.34,1);
}
.nav-open .nav-container {
transform: translateX(0);
}
.nav-container h2 {
font-size: 12px;
font-family: 'lulo_cleanone' , Arial, sans-serif;
text-transform: uppercase;
color: #AAAAAA;
margin: 2.3em 0;
}
.nav {
list-style: none;
padding: 0;
}
.nav a {
display: block;
padding: .4em 0;
font-size: 30px;
font-weight: bold;
font-family: 'lulo_cleanone' , Arial, sans-serif;
text-decoration: none;
color: #FFFFFF;
transform: translateZ(0);
}
.nav-open .nav a {
animation: slide-in .4s .2s backwards;
}
.nav-open .nav li:nth-of-type(2) a {
animation-delay: .3s;
}
.nav-open .nav li:nth-of-type(3) a {
animation-delay: .4s;
}
.nav-open .nav li:nth-of-type(4) a {
animation-delay: .5s;
}
.nav-open .nav li:nth-of-type(5) a {
animation-delay: .6s;
}
#keyframes slide-in {
0% {
opacity: 0;
transform: translateX(80px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.Social {
height: 100%;
display: flex;
justify-content: space-between;
width: 60%;
margin: 0 auto;
}
.icons {
}
.icons2 {
padding-left: 5.5em;
}
.icons3 {
padding-left: 6em;
}
.portfolio_nav {
height: 20vh;
width: 100%;
background: #312D3B;
}
.left_tab {
width: 49%;
height:100%;
background: #312D3B;
float: left;
position: relative;
}
.right_tab {
width: 49%;
height:100%;
background: #FFC600;
float: right;
position: relative;
}
.arrow {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.middle2 {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#font-face {
font-family: 'lulo_cleanone_bold';
src: url('../yellow_design_studio_-_lulo_clean_one_bold-webfont.eot');
src: url('../yellow_design_studio_-_lulo_clean_one_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../yellow_design_studio_-_lulo_clean_one_bold-webfont.woff2') format('woff2'),
url('../yellow_design_studio_-_lulo_clean_one_bold-webfont.woff') format('woff'),
url('../yellow_design_studio_-_lulo_clean_one_bold-webfont.ttf') format('truetype'),
url('../yellow_design_studio_-_lulo_clean_one_bold-webfont.svg#lulo_cleanone_bold') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'lulo_cleanone';
src: url('../yellow_design_studio_-_lulo_clean_one-webfont.eot');
src: url('../yellow_design_studio_-_lulo_clean_one-webfont.eot?#iefix') format('embedded-opentype'),
url('../yellow_design_studio_-_lulo_clean_one-webfont.woff2') format('woff2'),
url('../yellow_design_studio_-_lulo_clean_one-webfont.woff') format('woff'),
url('../yellow_design_studio_-_lulo_clean_one-webfont.ttf') format('truetype'),
url('../yellow_design_studio_-_lulo_clean_one-webfont.svg#lulo_cleanone') format('svg');
font-weight: normal;
font-style: normal;
}
/* --------------------------------
Desktop Media Queries
-------------------------------- */
#media screen and (min-width: 700px) {
.intro {
height: 100vh;
width: 100%;
display: table;
background: #FCC732 url('../img/WatchByMaz2.png') no-repeat center center;
background-size: 60%;
}
.content {
height: 100vh;
width: 100%;
display: table;
background: #F6F3F3 url('../img/OculusConsumerByMaz.png') no-repeat center center;
background-size: 60%;
}
.content2 {
height: 100vh;
width: 100%;
display: table;
background: #FCC732 url('../img/speedingAppByMaz.png') no-repeat center center;
background-size: 60%;
}
.content3 {
height: 100vh;
width: 100%;
display: table;
background: #FFFFFF url('../img/chair.png') center no-repeat;
background-size: 30%;
}
.Social {
display: flex;
justify-content: space-around;
height: 100%;
width: 30%;
margin: 0 auto;
}
.icons {
}
.icons2 {
padding-left: 3.5em;
}
.icons3 {
padding-left: 3.5em;
}

Answer 2

Here's a way to do it. Remove all absolute positions of .icon, .icon2and.icon3
Add this code on desktop :
.Social {
height: 100%;
float: left;
position: relative;
width: 100%;
text-align: left;
line-height: 40vh;
}
And this code on mobile with a media query for example :
#media (max-width: 640px) {
.Social {
text-align: center;
}
}
Change padding-left values for mobile like this :
.icons { padding-left: 1em; }
.icons2 { padding-left: 1em; }
.icons3 { padding-left: 1em; }
And keep padding-left values for desktop like this for example :
.icons { padding-left: 3.5em; }
.icons2 { padding-left: 3.5em; }
.icons3 { padding-left: 3.5em; }
I've tested it, it should works.