As a novice web developer, I've created a portfolio site hosted at www.j-price.co.uk. However, I've encountered a responsiveness issue after hosting it on GitHub Pages and GoDaddy. The site displays differently compared to when it's hosted locally through VSCode. The items don't stack as expected and a vertical scroll bar appears. While Chrome Dev Tools show no issues, testing the site on my phone reveals the problem.
I've experimented with changing the <meta viewport width> as suggested on Stack Overflow and added cross-browser compatibility. Despite these efforts, the issue persists. I'm uncertain if there's something missing in my code or if it's related to the hosting setup.
Below is a snippet of my HTML:
<!DOCTYPE html>
<html lang="en">
<!-- Head section with meta-tags, title, SEO attributes, Bootstrap and Font Awesome links -->
<head>
...
</head>
<!-- Body section with header, projects, about me, and contact sections -->
<body id="body">
...
</body>
</html>
And here's a CSS snippet for styling the site:
/* CSS styles for general layout, navbar, hero section, projects, about section, and contact section */
...
Lastly, here's a snippet of JavaScript code used for dynamic content:
// JavaScript function to display rotating adjectives
...