Center a container horizontally and vertically (with responsive elements) - html

Question

I'm trying to center a logo and menu list in the center of the page (keeping them side by side on desktop view) and stacked in mobile view. My problem is making them neatly stacked in mobile view. For some reason when it goes into mobile, all the items get pushed down. I'm also trying to having the social media links stay right at the bottom of the viewport at across all devices.
Here is my code:
https://jsfiddle.net/bp8epdbx/1/
HTML:
<div class = "container">
<div class="block" style="height: 600px;">
<div class="centered centered-mobile">
<img src="http://allprofitorganization.com/wp-content/uploads/2017/08/home-logo-delete.png" />
</div>
<div class="centered vertical-menu">
EVENTS
STORE
ARTISTS
</div>
</div>
<div id="manu-social" class="manu">
<div id="manu-social" class="manu"></div>
<ul id="manu-social-items" class="manu-items">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
CSS:
body {
background: #fff;
}
img{
width: 270px;
height: 100%;
}
.block {
text-align: center !important;
margin: 80px !important;
HEIGHT: 300px;
}
.block:before {
content: '\200B';
/* content: '';
margin-left: -0.25em; */
display: inline-block;
height: 100%;
vertical-align: middle;
}
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
margin: 15px;
}
.logo
{
float: left;
vertical-align: middle;
width: 300px;
margin: 15px;
}
.nav
{
float: right;
vertical-align: middle;
width: 300px;
margin: 15px;
}
.vertical-menu {
width: 85px;
}
.vertical-menu a {
font-size: 16px !important;
color: black;
display: block;
padding: 12px;
text-decoration: none;
font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
}
.vertical-menu a:hover {
color: red !important;
}
.vertical-menu a.active {
background-color: #4CAF50;
color: white;
}
#manu-social {
padding: 20px 0;
}
#manu-social ul {
list-style: none;
text-align: center;
margin: 0;
padding: 10px 0;
}
#manu-social ul li {
display: inline-block;
position: relative;
}
#manu-social li a {
color: #D3D3D3;
margin: 0 10px;
}
#manu-social li a:hover {
color: red;
}
#manu-social li a::before {
content: "\f135";
display: inline-block;
padding: 0 5px;
font-family: FontAwesome;
font-size: 24px;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#manu-social li a[href*="facebook.com/allprofitofficial"]::before {
content: "\f09a";
}
#manu-social li a[href*="twitter.com/realallprofit"]::before {
content: "\f099";
}
#manu-social li a[href*="instagram.com/allprofitofficial"]::before {
content: "\f16d";
}
a {
-webkit-transition: .15s all linear;
-moz-transition: .15s all linear;
-o-transition: .15s all linear;
transition: .15s all linear;
}
#media screen and (max-width: 960px) { /* whatever width you prefer */
.nav, .logo {
float:none;
position: static;
/* width: auto; -- may be helpful */
}
}
#media screen and (max-width: 720px) {
.nav {
/* display: none; —- remove the menu, perhaps */
}
}
#media print, screen and (max-width: 480px) {
.content, .menu {
/* more targetting -- usually margins and padding adjusting */
}
}

Answer 1

You can use flexbox to vertically and horizontally center the logo and nav on desktop and then just change the flex-direction for mobile to get them to stack.
.block {
display: flex;
justify-content: center;
align-items: center;
}
#media screen and (max-width: 480px) {
.block {
flex-direction: column;
}
}

Answer 2

You can create a fixed footer like this,
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
so apply this code to your social icons and they will always be at the bottom of the page if you only want them at the bottom of the page on mobile view then wrap it in a media query as for your other content once the footer is fixed just minus margin margin: - //whatever number looks right