Question posted in 
I am a new web developer and have a portfolio site that is hosted at www.j-price.co.uk .
When hosting the site locally from VSCode it is responsive and works well but now that it’s hosted through githubpages and goDaddy it won’t respond in the same way. It adds a vertical scroll bar and the items that used to stack under each other no longer do so. When I resize the browser the live site is absolutely fine but in Chrome Dev tools actually testing it on my phone is where the problem is.
I have tried changing the <meta viewport width> to various other options that I’ve seen as solutions on SO as well as adding browser cross compatibility in case this was an issue. i.e
.flex{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
}
I’m not sure if there’s something else that I can add to my code or if it’s something to do with how I’ve hosted it?
Here is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO -->
<title></title>
<meta name="description"
content="James is a Web Developer using HTML, CSS, Javascript and React to create awesome websites and applications.">
<!-- Site crawling ahrefs -->
<meta name="ahrefs-site-verification" content="91f4ecd594f0f445f56806289d4bec924c392e3823c8ad9a17f0a1da8c611042">
<!-- Add google -->
<meta name="google-site-verification" content="fSGSYoFZP8L9qhXbVk2xPbPupNPvIFW3eCkUA5yvmYU" />
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Font Awesome icons -->
<script src="https://kit.fontawesome.com/9e214becb6.js" crossorigin="anonymous"></script>
<!-- My Style -->
<link rel="stylesheet" href="https://jamesmp88.github.io/portfolio/style.css">
<!-- Staatliches font -->
<link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">
<!-- Roboto Font -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<!-- Emblema One Font -->
<link href="https://fonts.googleapis.com/css2?family=Emblema+One&display=swap" rel="stylesheet">
</head>
<body id="body">
<div class=" d-none d-md-block side-fix btn">
</div>
<header id="header" class="header">
<nav class="navbar navbar-expand navbar-dark">
<div class="px-auto">
<a id="logo" class="navbar-brand" href="#">
</a>
</div>
<!-- full navbar -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto">
<li class="nav-item px-2">
<a class="nav-link" href="#projects">Projects</a>
</li>
<li class="nav-item px-2">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item px-2">
<a class="nav-link" href="#contact">Contact</a>
</li>
</li>
</ul>
</div>
</nav>
<!-- hero div -->
<div id="hero" class="col-6 m-auto text-center text-white focus-in-expand">
<h3 class="focus-in-expand">Hi, I'm James <br> I'm a Web Developer <br> <span id="typedSentence"></span>
</h3>
<div class="socials text-center">
<hr>
<a class="fab px-2 fa-2x fa-github" target="_blank" rel="noreferrer noopener" href="https://github.com/jamesmp88"></a>
<a class="fab px-2 fa-2x fa-twitter" target="_blank" rel="noreferrer noopener" href="https://www.twitter.com"></a>
<a class="fab px-2 fa-2x fa-linkedin" target="_blank" rel="noreferrer noopener" href="https://www.twitter.com"></a>
<button class=" mx-auto cv-btn">View CV</button>
<hr>
</div>
</div>
</header>
<section id="projects" class="text-center focus-in-expand">
<h1>Projects</h1>
<div class="card-group col-10 mx-auto">
<!-- Recipe -->
<div class="card d-flex m-sm-2" id="card">
<div class="card-image">
<img class="card-img-top" src="https://jamesmp88.github.io/portfolio/Media/recipe.png" alt="Recipe Finder App">
<div class="image-overlay m-auto">
<a href="https://jamesmp88.github.io/recipes" target="_blank" rel="noreferrer noopener">
<div class="d-flex-column justify-content-center h-100 my-auto">
<h3 class="mt-0 mt-md-2 mt-lg-5">Recipe Finder</h3>
<p class="m-0 m-sm-1 m-md-3 m-lg-4">Web App to find your perfect recipe. Built with React.js</p>
<div>
<a href="https://jamesmp88.github.io/recipes" target="_blank" class="btn live-site">Live Site</a>
<a href="https://github.com/jamesmp88/recipes" target="_blank" class="btn view-code">View Code</a>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="card d-flex m-sm-2" id="card">
<div class="card-image">
<img class="card-img-top" src="https://jamesmp88.github.io/portfolio/Media/gym.png" alt="Gym Landing Page">
<div class="image-overlay m-auto">
<a href="https://jamesmp88.github.io/gym" target="_blank" rel="noreferrer noopener">
<div class="d-flex-column justify-content-center my-auto">
<h3 class="mt-0 mt-md-2 mt-lg-5">Jim's Gym</h3>
<p class="m-0 m-sm-1 m-md-3 m-lg-4">Gym landing page built with HTML, CSS and Bootstrap</p>
<div>
<a href="https://jamesmp88.github.io/gym" target="_blank" class="btn live-site">Live Site</a>
<a href="https://github.com/jamesmp88/gym" target="_blank" class="btn view-code">View Code</a>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<div class="diag-container">
<div id="diagonal-2"></div>
</div>
<section id="about" class="text-center">
<h1 class="text-center focus-in-expand mb-0 pb-3">About</h1>
<div class="about-me mx-auto p-2 col-8 mb-5 backlight">
<p> Hi there, I'm James and I'm a Web Developer living in London, UK.
<br><br>
Although mainly working with Front-End technologies at the moment, my ultimate goal is to be a
well-rounded full-stack developer.
<br><br>
I have a real passion for building good-looking, excellently functioning websites and am more than
willing to try my hand at just about anything.
<br><br>
Although I have been an Actor for the last few years I have always had a passion for the tech industry
and a desire to understand how things worked 'under the hood'. I'm really excited that I'm getting the
opportunity to explore that now!
<br><br>
Below are the technologies that I've been using recently to build projects.
</p>
</div>
<div class="row about-container mx-auto">
<div class="tech col-10 col-md-6 mx-auto pb-4">
<h3 class="pb-2 pb-md-5">Technologies:</h3>
<img class="tech-img" src="https://jamesmp88.github.io/portfolio/Media/HTML5_Logo.svg" alt="">
<img class="tech-img" src="https://jamesmp88.github.io/portfolio/Media/css3.svg" alt="">
<img class="tech-img white-background" src="https://jamesmp88.github.io/portfolio/Media/sass-1.svg" alt="">
<img class="tech-img" src="https://jamesmp88.github.io/portfolio/Media/bootstrap-4.svg" alt="">
<img class="tech-img" src="https://jamesmp88.github.io/portfolio/Media/javascript.svg" alt="">
<img class="tech-img" src="https://jamesmp88.github.io/portfolio/Media/react.svg" alt="">
</div>
<div class="mx-auto h-50 col-12 col-md-3 text-center">
<h3 class="mb-5">Tools</h3>
<div class="tool p-0 m-3 mx-auto">
<p class="backlight w-100">Git + Github</p>
</div>
<div class="tool p-0 m-3 mx-auto">
<p class="backlight">WordPress</p>
</div>
<div class="tool p-0 m-3 mx-auto">
<p class="backlight">Chrome Dev Tools</p>
</div>
<div class="tool p-0 m-3 mx-auto">
<p class="backlight">Command Line/GitBash</p>
</div>
<div class="tool p-0 m-3 mx-auto">
<p class="backlight">NPM</p>
</div>
<div class="tool p-0 m-3 mx-auto">
<p class="backlight">VS Code</p>
</div>
</div>
</div>
</section>
<div class="diag-container">
<div id="diagonal-3"></div>
</div>
<section id="contact" class="text-center">
<h1 class="pt-0 focus-in-expand">Contact</h1>
<div class="mb-0 col-12 col-lg-9 mx-auto">
<a class="social-border mx-4" target="_blank" rel="noreferrer noopener" href="https://github.com/jamesmp88">
<i class="fab px-3 fa-3x fa-github"></i>
<p class="social-text">See my Code</p>
</a>
<a class="social-border mx-4" target="_blank" rel="noreferrer noopener" href="https://www.twitter.com/jamesP_Dev">
<i class="fab px-3 fa-3x fa-twitter"></i>
<p class="social-text">Follow me</p>
</a>
<a class="social-border mx-4" target="_blank" rel="noreferrer noopener" href="https://www.linkedin.com/in/james-price-99b0691ba/">
<i class="fab px-3 fa-3x fa-linkedin"></i>
<p class="social-text">Link ?</p>
</a>
<a class="social-border mx-4" target="_blank" rel="noreferrer noopener" href='mailto:[email protected]'>
<i class="far px-3 fa-3x fa-envelope"></i>
<p class="social-text">Email Me</p>
</a>
</div>
</section>
<script src="https://jamesmp88.github.io/portfolio/index.js"></script>
CSS:
* {
padding:0;
margin: 0;
box-sizing: border-box;
font-family: staatliches, monospace;
scroll-behavior: smooth;
max-width: 100%;
}
body {
background-color: #403146;
}
p {
margin: 0;
font-family: 'Roboto', sans-serif;
}
header {
height: 80vh;
background-image: url('./Media/background.jpg');
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
}
h1 {
padding: 2rem;
}
/* End of General */
/* Top HERO section */
#logo {
transition: .8s ease-in-out;
margin: 0;
}
/* logo above menu on mobile */
@media only screen and (max-width:425px) {
#logo {
display: block;
text-align: center;
}
.navbar {
display: block;
}
}
#logo:hover{
transform: rotate(360deg);
}
/* NAVBAR */
.navbar-collapse {
justify-content: flex-end;
}
.navbar-toggler-icon {
background-color: rgba(0, 0, 0, 0);
}
#nav-link {
color: white
}
/* End of NAVBAR */
#hero {
padding: 5%;
}
h3 {
font-size: 2rem;
}
.socials {
margin-top: 5vh;
}
.fa-2x:hover {
color: grey;
text-decoration: none;
transition: 0.3s;
}
.cv-btn {
color:#d4849d;
display: block;
font-size: 1.5rem;
transition-duration: 0.3s;
padding: 0.5rem;
border: none;
background-color: transparent;
border-radius: 10%;
margin-top: 0.5rem;
}
.cv-btn:hover {
background-color: rgb(128, 123, 123, 0.2);
color: white;
}
.flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
margin: auto;
padding: auto;
}
/* EMAIL AT SIDE */
.side-fix {
position: fixed;
display: block;
width: 10rem;
transform: rotate(90deg);
right: -5%;
top: 20%;
z-index: 10;
padding-top: 20px;
}
.side-fix a {
color: white;
font-size: 1rem;
white-space: nowrap;
letter-spacing: 0.2rem;
z-index: 10;
}
/* DIAGONALS */
.diag-container {
width: 100vw;
max-width: 100%;
overflow: hidden;
z-index: -10;
}
/* PROJECTS */
#projects {
color: white;
width: 100vw;
margin: 0;
background-color: #403146;
}
.card {
box-shadow: 1px -2px 15px rgba(141, 141, 141, 0.795);
min-width: 40%;
max-width: 90%;
margin: auto;
}
@media only screen and (min-width: 575px) {
.card {
max-width: 60%;
}
}
.live-site {
white-space: nowrap;
background-color: #00ad14;
color: white;
margin: 2px auto 2px;
max-width: 50%;
}
.view-code {
white-space: nowrap;
background-color:#e00000;
color: white;
max-width: 50%;
margin: 2px auto 2px;
}
.btn:hover {
color: white;
}
/* Hover effect on projects */
.card-image {
position: relative;
}
.image-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background: rgba(216, 216, 216, 0.904);
color: black;
}
.card:hover .image-overlay {
opacity: 1;
}
.image-overlay .flex {
bottom:0;
}
.image-overlay a {
text-decoration: none;
color: black;
}
/* end of hover effect */
#diagonal-2 {
position: relative;
width: 0;
height: 0;
border-style: solid;
border-width: 50px 100vw 50px 0;
border-color: #403146 #403146 #c68f88 #c68f88;
max-width: 100%;
z-index: -10;
}
/* ABOUT */
#about {
display: inline-block;
background-color: #c68f88;
color: black;
}
.about-me {
background-color: white;
border-radius: 5px;
padding: 5px 5px 0;
font-size: 2.5vw;
}
.white-background {
background-color: rgb(30, 19, 61);
padding: 5px;
border-radius: 5px;
}
.tech-img {
display: inline-block;
width: 40%;
margin: 2%;
}
@media only screen and (min-width: 576px) {
.tech-img {
width: 20%;
margin: 15px;
}
.about-me {
font-size: 3vh;
}
}
.tool {
width: 37vw;
font-size: 2vw;
display: block;
}
.tool p {
font-family: staatliches, monospace;
padding: 5px;
border-radius: 2px;
}
@media only screen and (max-width: 765px ){
.tool {
font-size: 5.5vw;
padding: 2vw;
}
}
.backlight{
background-color: rgba(255, 255, 240, 0.678);
border: 1px solid#403146;
box-shadow: -0.1vw 0.2vw 1vw #403146;
}
/* DIAGONAL3 */
#diagonal-3 {
max-width: 100%;
width: 0;
height: 0;
border-style: solid;
border-width: 170px 100vw 0;
border-color: #c68f88 #c68f88 #862f42 #862f42;
transform: scale(1.0001);
overflow: none;
z-index: -10;
}
/* CONTACT */
#contact {
color: white;
background-color: #862f42;
}
.social-border {
display: inline-block;
border: 3px solid white;
border-radius: 20%;
padding: 1%;
margin-bottom: 10%;
}
.social-text {
font-family: staatliches, monospace;
}
.social-text:hover {
text-decoration: none;
}
/* Font Awesome Icons */
.fab, .far, .social-text {
color: white;
}
.social-border:hover {
background-color: #834855;
transition-duration: 0.5s;
text-decoration: none;
}
/* Animations*/
/* FOCUS IN */
.focus-in-expand {
-webkit-animation: focus-in-expand 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: focus-in-expand 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes focus-in-expand {
0% {
letter-spacing: -0.5em;
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
@keyframes focus-in-expand {
0% {
letter-spacing: -0.5em;
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
and JS (just in case) :
// Set adjective
const adjective = document.getElementById('adjective');
const typedSentence = document.getElementById('typedSentence');
const adjectives = ['Rugby', 'Coffee', 'Theatre', 'Guitars', 'Travelling', 'Books', 'IPA', 'Biscuits'];
let currentIndex = 0;
const intervalLength = 3000;
let adj;
const changeSentence = () => {
typedSentence.innerHTML = '';
adj = adjectives[(currentIndex++)%adjectives.length];
let sentence = `I like ${adj}`;
typedSentence.innerText = sentence;
}
changeSentence();
setInterval(changeSentence, intervalLength);
// End of Set Adjective
3
Answers
I think I've found the main issue and it seems to be that GoDaddy mount my site in an iframe when forwarding with masking. If I don't use any masking but simply forward from my custom url to my github pages hosted site all the code seems intact and it works just as it should do. It's not the perfect solution as my custom url looks more professional but at least the site loads as it should.
I have run into alot of the problems that you’re dealing with. If you write your own CSS with out any helpers ie (Semantic, Materialize) you won’t run into these issues normally. It was more work… but in the end you have full control. The only thing I use is font awesome icons with a link. It might seem like a headache upfront but you’ll spend more time debugging than you will learning to write CSS. I have been building a library with all the elements I need. Navbar, Cards, sidebar, footer, etc. Once you make these elements bundled with CSS life will be easier. I would also suggest getting into ReactJS its fast and responsive plus the reuseable component system is the bee’s knees.
Use meta tag