How do I fix my menu alignment when resizing the page? - html

Question

so I have a fixed bottom navbar with 6 links and 4 icons on it (3 for different social medias and 1 to return the the index), which looks exactly how I want it to when the page is fullscreen but once the window reaches around 60% of maximised, everything goes out of position and isn't aligned.
#import url(http://fonts.googleapis.com/css?family=Raleway:300,400,700);
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
body {
background: #333;
color: #fff;
font-size: 16px;
font-family: 'Raleway', Arial, sans-serif;
}
a {
color: #fff;
text-decoration: none;
font-weight: 700;
outline: none;
}
/* Link Colours */
.fade {
background: #333;
}
.fade a {
color: #fff;
}
a:hover,
a:focus {
color: #333;
}
.social {
float: left;
clear: none;
}
#social {
padding: 5px;
}
/* Buttons */
.Streetworn-demos {
width: 100vw;
background-color: #ff9966;
margin: 0;
text-align: center;
position: fixed;
bottom: 0;
}
.Streetworn-demos a {
text-align: center;
display: inline-block;
margin: 0.5em 0.75em;
line-height: 1;
font-family: 'Raleway', cursive;
letter-spacing: 1px;
}
.about h3 {
font-family: 'Satisfy', cursive;
font-size: 32px;
margin: 5px;
padding-top: 6px;
padding-left: 10px;
border-radius: 5px 25px 25px 5px;
background-color: #ff9966;
}
.about p {
font-family: 'Raleway', cursive;
font-weight: 700;
font-size: 16px;
padding: 10px;
margin: auto;
}
.login {
width: 100%;
margin: auto;
text-align: right;
padding: 10px;
background: #ff9966;
}
#home {
padding: 5px;
}
.home {
float: right;
clear: none;
}
.brands {
padding-top: 13px;
}
.about {
margin-top: -100px;
margin-left: auto;
margin-right: auto;
width: 75%;
padding: 15px;
text-align: justify;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
audio,
canvas,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden] {
display: none;
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
a:focus {
outline: thin dotted;
}
a:active,
a:hover {
outline: 0;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
mark {
background: #ff0;
color: #000;
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
pre {
white-space: pre-wrap;
}
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 0;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
}
button,
input {
line-height: normal;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
vertical-align: top;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
<nav class="Streetworn-demos">
<a class="home" href="index.html"><img id="home" alt="Return to the landing page" src="https://image.ibb.co/m5Fxe7/home2.png" style="height: 36px; width: 36px" onmouseover="this.src='https://image.ibb.co/m5Fxe7/home2.png'" onmouseout="this.src='https://image.ibb.co/m5Fxe7/home2.png'"></a>
<a class="brands" href="#">PALACE</a>
<a class="brands" href="#">GOLFWANG</a>
<a class="brands" href="#">SUPREME</a>
<a class="brands" href="#">BILLIONAIRE'S BOYS CLUB</a>
<a class="brands" href="#">STUSSY</a>
<a class="brands" href="#">ANTISOCIAL SOCIAL CLUB</a>
<div class="social">
<img id="social" alt="Follow Streetworn on Facebook!" src="https://image.ibb.co/hxnXCS/fb2.png" style="height: 36px; width: 36px" onmouseover="this.src='https://image.ibb.co/hxnXCS/fb2.png'" onmouseout="this.src='https://image.ibb.co/hxnXCS/fb2.png'">
<img id="social" alt="Follow Streetworn on Instagram!" src="https://image.ibb.co/hxnXCS/fb2.png" style="height: 36px; width: 36px" onmouseover="this.src='https://image.ibb.co/hxnXCS/fb2.png'" onmouseout="this.src='https://image.ibb.co/hxnXCS/fb2.png'">
<img id="social" alt="Follow Streetworn on Twitter!" src="https://image.ibb.co/hxnXCS/fb2.png" style="height: 36px; width: 36px" onmouseover="this.src='https://image.ibb.co/hxnXCS/fb2.png'" onmouseout="this.src='https://image.ibb.co/hxnXCS/fb2.png'">
</div>
</nav>
How do I go about fixing it so that when the page is resized, the menu items are all centered and maybe make the home icon go below the links, next to the social icons (ignore the icons in the snippet, just needed icons to show what I meant).
Any advice would be appreciated! Thanks, Zane.

Answer 1

you can give a variable to the size of the font with .Streetworn-demos a {... font-size: 1.3vw;} but it is not easy to read on small screens, I recommend using #media all and (max-width: 768px) {}
and position differently for example centered
this
#media all and (max-width:768px){
.Streetworn-demos > a:first-of-type{display: block;width: 100%;margin: 0;padding: 0;}
.Streetworn-demos a{font-size: 1em;display: inline-block;text-align: center;width: 46%;margin: 3px 0;padding: 4px 0;}
.social a{display: inline-block;width: 20px;margin: 0 9px;}
}
or
#media all and (max-width:768px){
.Streetworn-demos a{font-size: 1em;display: inline-block;text-align: center;width: 100%;margin: 3px 0;padding: 4px 0;}
.social a{display: inline-block;width: 20px;margin: 0 9px;}
}