I have searched the internet for quite a few hours now and cannot figure out why my site is responsive on the desktop but not on mobile (at least on my iphone X). On mobile, all of my elements except the gif at the top of the page are over to the left and half hidden outside the browser window (with no horizontal scroll bar btw). I have the viewport meta tag in there, which is the only solution I could find, but it did not do anything to my site's mobile view when I checked after adding it in. What else could the problem be? I am very much a beginner, so I am hoping this is just a dumb little mistake. Someone please help. I'm about to tear my hair out here!
You can visit the site here and resize to see how it should be, this is how it looks on mobile currently (not a full view btw, just a shot of the bottom sections of my site as you can see the problem most clearly from there): Mobile Screenshot
here is my code:
<!doctype html>
<!-- This comment line needed for bootstrap to work on mobile devices -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Jasmine Thorson</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<ul id="menu">
<li><a href="#work" class="nav">WORK</a></li>
<li><a href="#about" class="nav">ABOUT</a></li>
<li><a href="#skills" class="nav">SKILLS</a></li>
<li><a href="#contact" class="nav">CONTACT</a></li>
</ul>
<a href="#top" id="logo"></a>
<div id="top"></div>
<div id="box0">
<img src="headergif_vert.gif" alt="myhero" class="hero">
</div>
<div id="work">
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
<div id="box4">
</div>
<div id="box5">
</div>
<div id="box6">
</div>
<div id="box7">
</div>
<div id="box8">
</div>
<div id="box9">
</div>
<div id="box10">
</div>
</div>
<div id="about"></div>
<img src="ABOUTGIF.gif" class="aboutgif" alt="aboutgif">
<div id="aboutme">
<h1 class="abouthead">I'm a young creative fresh out of college with lots of <mark class="pink">charisma.</mark></h1>
<p class="para">I believe that good design can help people laugh, cry, stay informed, & understand each other better. Design, simply, is visual communication.</p>
<p class="para">As a designer + photographer, it's my goal to capture the essence of my subject & express that essence in the most clear, consistent, & appropriate manner.</p>
</div>
<div id="skills"></div>
<div class="w3-container">
<table class="table1">
<tr>
<td><img src="ICONS_BRANDING.png" alt="branding" class="icon1"></td>
<td><img src="ICONS_INFOGRAPHICS.png" alt="info" class="icon1"></td>
</tr>
<tr>
<td><img src="ICONS_DIGITAL.png" alt="digital" class="icon1"></td>
<td><img src="ICONS_SOCIAL.png" alt="social" class="icon1"></td>
</tr>
</table>
<table class="table2">
<tr>
<td><img src="ICONS_BRANDING.png" alt="branding" class="icon2"></td>
<td><img src="ICONS_INFOGRAPHICS.png" alt="info" class="icon2"></td>
<td><img src="ICONS_DIGITAL.png" alt="digital" class="icon2"></td>
<td><img src="ICONS_SOCIAL.png" alt="social" class="icon2"></td>
</tr>
</table>
</div>
<div id="contact"></div>
<div id="contactbox">
<div class="col1"><h2>JASMINE THORSON</h2></div>
<div class="col5"><h2>INFO</h2></div>
<div class="col1">Graphic Designer + Photographer</div>
<div class="col2">Brooklyn, NY</div>
<div class="col3">605 + 268 + 3245</div>
<div class="col4">jnthorson@gmail.com</div>
<div class="col5">Resume</div>
</div>
<footer>
<a href="https://www.instagram.com/jasmine.thorson/"><img src="insta.png" id="insta" alt="gram" class="social"></a>
<a href="https://www.behance.net/jnthorson"><img src="behance.png" id="behance" alt="be" class="social"></a>
</footer>
</body>
</html>
And here is my CSS:
@charset "UTF-8";
body {
background-color: #DBD9D6;
margin: 0;
padding: 0;
font-family: "Arial Rounded MT Bold";
color: #978B87;
}
p {
font-family: Geneva;
font-size: .75em;
line-height: 1.5em;
}
h1{
line-height: 1.25em;
}
h4{
color: #D41773;
column-span: all;
}
h5{
color: #D41773;
font-size: .65em;
}
#menu {
list-style-type: none;
margin: 20px;
padding: 0px;
width: 80px;
position: fixed;
font-family: "Arial Rounded MT Bold";
font-size: 9px;
line-height: 10px;
right: 0;
text-align: right;
z-index: 4;
}
#menu li, #menu a {
display: block;
color: black;
opacity: .35;
padding: 2px;
text-decoration: none;
}
#menu li, #menu a:hover {
background-color: transparent;
color: #D41773;
opacity: 1;
transition: color 0.3s linear;
}
#menu li, #menu a:active {
background-color: transparent;
color: #D41773;
}
#logo {
position: fixed;
display: inline-block;
margin: 20px;
width: 207px;
height: 53px;
background-image: url("logoheader.png");
z-index: 4;
}
#logo:hover {
background-image: url(logoheader.png);
background-position: 0 -54.5px;
}
img.hero {
display: block;
height: 100vh;
padding: 0px;
margin-left: auto;
margin-right: auto;
}
#box0{
height: 100vh;
width: 100%;
background-color: #DBD9D6;
background-size: cover;
display: table;
background-attachment: fixed;
margin-left: auto;
margin-right: auto;
}
#box1{
height: 60vh;
width: 100%;
background-image: url(box1.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box2{
height: 60vh;
width: 100%;
background-image: url(box2.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box3{
height: 60vh;
width: 100%;
background-image: url(box3.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box4{
height: 60vh;
width: 100%;
background-image: url(box4.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box5{
height: 60vh;
width: 100%;
background-image: url(box5.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box6{
height: 60vh;
width: 100%;
background-image: url(box6.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box7{
height: 60vh;
width: 100%;
background-image: url(box7.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box8{
height: 60vh;
width: 100%;
background-image: url(box8.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box9{
height: 60vh;
width: 100%;
background-image: url(box9.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#box10{
height: 60vh;
width: 100%;
background-image: url(box10.jpg);
background-size: cover;
display: table;
background-attachment: fixed;
}
#aboutme {
margin-top: 150px;
margin-bottom: 200px;
margin-left: 25%;
margin-right: 75%;
width: 300px;
}
.abouthead{
font-size: 1.5em;
}
.para{
font-size: .55em;
}
mark.pink{
color: #D41773;
background: none;
}
.aboutgif{
float: right;
width: 200px;
margin-bottom: 50px;
margin-top: 20px;
}
@media screen and (max-width: 480px) {
.aboutgif{
display: none;
}
}
@media screen and (max-width: 768px) {
#aboutme{
width: 200px;
}
}
@media screen and (max-width: 480px) {
#aboutme{
width: 250px;
}
}
@media screen and (min-width: 768px) {
#aboutme{
width: 370px;
}
}
@media screen and (max-width: 768px) {
.abouthead{
font-size: 1.5em;
}
}
@media screen and (min-width: 768px) {
.abouthead{
font-size: 2em;
}
}
@media screen and (max-width: 480px) {
.abouthead{
font-size: 1.5em;
}
}
@media screen and (max-width: 480px) {
.para{
width: 200px;
}
}
@media screen and (max-width: 768px) {
.para{
font-size: .25em;
}
}
.w3-container{
background-color: #C5BBB6;
margin-top: 100px;
padding: 10px;
}
.table1{
width: 350px;
table-layout: fixed;
border-spacing: 0px;
margin: 0 auto;
margin-top: 100px;
margin-bottom: 100px;
text-align: center;
}
@media screen and (min-width: 768px) {
.table1{
display: none;
}
}
.table2{
width: 650px;
table-layout: fixed;
border-spacing: 0px;
margin: 0 auto;
margin-top: 100px;
margin-bottom: 100px;
text-align: center;
}
@media screen and (max-width: 768px) {
.table2{
display: none;
}
}
td{
padding-top: 20px;
vertical-align: top;
border-spacing: 0px;
}
.icon1{
width: 85px;
padding: 5px;
}
.icon2{
width: 110px;
padding: 5px;
}
#contactbox{
float: left;
width: 85%;
margin-left: 10%;
margin-top: 40px;
margin-bottom: 40px;
column-count: 5;
column-rule-width: 0px;
font-size: .5em;
}
#contactheaders{
column-span: all;
display: inline;
}
.col1{
float: left;
width: 100%;
}
.col2{
float: left;
width: 100%;
}
.col3{
float: left;
width: 100%;
}
.col4{
float: left;
width: 100%;
}
.col5{
float: left;
width: 100%;
}
footer{
position: fixed;
display: inline;
padding: 40px;
left: 0;
bottom: 0;
margin-bottom: 0px;
width: 100%;
height: 10px;
background: none;
color: black;
z-index: 5;
}
.photo{
float: left;
margin-right: 10%;
font-size: .6em;
opacity: .25;
color: black;
}
#insta{
width: 25px;
float: right;
margin-right: 65px;
padding-left: 5px;
}
#behance{
width: 25px;
float: right;
margin-left: 10%;
}
#behance.social, #insta.social {
opacity: 0.25;
filter: alpha(opacity=50);
transition: 0.3s linear;
}
#behance.social:hover, #insta.social:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
As I said before, I am a BEGINNER. Literally a beginner. We did not really learn this stuff in school, we were allowed to use Muse instead and I was afraid of how confusing coding looked so I am learning right now and I'm sorry if my code is just disgustingly awful, but I could really use some help! I ran both codes through validators and came out with minimal errors (which I fixed).
I think one possible solution would be to center your entire page. Keep your HTML as it is, and add this CSS:
html,
body {
width: 100%;
margin: 0 auto;
}
This will tell your html and body to be centered. I hope this helps.