Hi all,
I’m currently very new to the web development scene, I’ve only ever briefly touched up on it during university.
I’m currently making a portfolio for LinkedIn and would like my website to be responsive to resizing and mobile compatibility as well as other devices.
The issue that i’m having is that when I try to zoom in and out of the website it seems to be all over the place, the background would not stretch out to fill the screen and the nav bar would not resize. The text would also be a mess.
I’ve used gumby frameworks as part of the website. The webpage and CSS in question are both called Mainpage (.html and .css) which are attached.
As I said, the code might be horrific to view but I am very new to this and very keen to learn.
The pictures attached are showing the website on my laptop where the layout and formatting is all over the place, however on my computer, which it was developed on seems fine apart from when the window is resized? Picture of website with re-sizing issue
Any comments and solutions are welcome, it would be a big help.
Many Thanks
HTML
<!doctype html>
<html lang="en">
<head>
<title>Website Homepage</title>
<meta charset="utf-8" />
<!-- Gumby CSS -->
<link rel="stylesheet" href="gumby/css/gumby.css">
<!-- Gumby uses Moderniser JS -->
<script src="gumby/js/libs/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" src="https://platform.linkedin.com/badges/js/profile.js" async defer></script>
<!-- Application custom CSS -->
<link rel="stylesheet" href="Mainpage.css">
</head>
<body>
<div id="demo_navbar" class= 'fade-in-bar'>
<div id="main_nav" class="pretty navbar row">
<a href="#" gumby-trigger="#main_nav > ul" class="toggle">
<i class="icon-menu"></i></a>
<h3 class="four columns logo"><a href="#">Portfolio</a></h3>
<ul class="eight columns">
<li><a href="StartingXI.html">Starting XI</a>
<li><a href="Legends.html">Legendary Players</a>
<li><a href="MUFCkits.html">Manchester United Kits</a>
<li><a href="Alltimegoalscorers.html">Top Goalscorers Of All Time</a>
</ul>
</div>
</div>
<h1 class= 'fade-in-name'> Manav Trivedi</h1>
<p class= 'fade-in-degree'> B.Sc (Hons) Computer Forensics and Security</p>
<a id='linkedin' class='linkedin' href="https://www.linkedin.com/in/manav-trivedi-687569109"><img src="linkedin.jpg"/>
</a>
<a id='twitter' class='twitter' href="https://twitter.com/ManavTrivedi"><img src="twitter.jpg"/>
</a>
<a id='facebook' class='facebook' href="https://www.facebook.com/Manav.T"><img src="facebook.jpg"/>
</a>
<!-- <div id= "LI-profile-badge" class="LI-profile-badge" data-version="v1" data-size="medium" data-locale="en_US" data-type="horizontal" data-theme="dark" data-vanity="manav-trivedi-687569109"><a class="LI-simple-link" href='https://uk.linkedin.com/in/manav-trivedi-687569109?trk=profile-badge'></a></div>
<!-- Gumby JS includes -->
<script src="gumby/js/libs/jquery-2.0.2.min.js"></script>
<script gumby-touch="gumby/js/libs" src="gumby/js/libs/gumby.min.js"></script>
</body>
</html>
CSS
body {
text-align: center;
height: 100%;
width: 100%;
background: url("background.jpg") no-repeat center center fixed;
font-family: 'Oswald', 'sans-serif';
color: #ffffff;
font-size: 10em;
max-width: 50%;
margin: auto;
}
h1{
height: 200px;
width: 400px;
position: fixed;
top: 40%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
font size: 20em;
font-family: 'Lucida Handwriting';
color: #ffffff;
}
img.center {
display:block;
float:right ;
}
#demo_navbar {
font-family: 'Lucida Handwriting';
position: fixed;
text-align: justify;
max-width:150%;
}
#main_nav {
color: #ffffff;
max-width:88%;
}
h3 {
color: #fff;
font-family: 'Lucida Handwriting';
}
p {
height: 50px;
width: 400px;
position: fixed;
top: 60%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
font-size: 12.5%;
font-family: 'Lucida Handwriting';
color: red;
}
/*#LI-profile-badge {
height: 300px;
width: 400px;
position: fixed;
top: 70%;
left: 53.5%;
margin-top: -200px;
margin-left: -200px;
font-size: 12.5%;
font-family: 'Lucida Handwriting';
color: red;
text-align: justify;
}*/
#linkedin{
height: 55px;
width: 58px;
position: fixed;
top: 70%;
left: 53.5%;
margin-top: -200px;
margin-left: -200px;
font-size: 12.5%;
font-family: 'Lucida Handwriting';
color: red;
text-align: justify;
}
#twitter{
height: 55px;
width: 68px;
position: fixed;
top: 70%;
left: 58.5%;
margin-top: -200px;
margin-left: -200px;
font-size: 12.5%;
font-family: 'Lucida Handwriting';
color: red;
text-align: justify;
}
#facebook{
height: 55px;
width: 62px;
position: fixed;
top: 70%;
left: 64%;
margin-top: -200px;
margin-left: -200px;
font-size: 12.5%;
font-family: 'Lucida Handwriting';
color: red;
text-align: justify;
}
.fade-in-bar {
animation: fadeIn 1s;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to{
opacity: 1;
}
}
.fade-in-name {
animation: fadeIn 3s;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to{
opacity: 1;
}
}
.fade-in-degree {
animation: fadeIn 7s;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to{
opacity: 1;
}
}
.linkedin {
animation: fadeIn 8s;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to{
opacity: 1;
}
}
.twitter {
animation: fadeIn 8s;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to{
opacity: 1;
}
}
.facebook {
animation: fadeIn 8s;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to{
opacity: 1;
}
}
/*.LI-profile-badge {
animation: fadeIn 10s;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to{
opacity: 1;
}
}*/
