My first post here on Stack Overflow.
I'm trying to build a blog for myself, and I'm trying my best to make it responsive for most devices. But iPhone 4s are giving me a headache.
For my blog articles, what I envision is that the first thing the user sees is a div that has a height of 100vh and width of 100vw, containing an image and the title of a blog article, like this:
I close that div, called "Headline", and open a new one called "Content" where I want the actual blog text to be.
I've tested my site on laptop, iPad, iPhone 6, 5, and 4. The latter is giving me a headache. As soon as as I add any formatting to the "Content" div, the previous div, "Headline", gets stretched way past 100vh so you have to scroll very far down before the text begins. What's even more confusing is that the error seems inconsistent. Reloading the page gives me different results, and sometimes, if I refresh it often enough, it occasionally appears as intended. Here's an example of what it sometimes looks like:
I've looked everywhere for a solution, but I just don't know what I'm doing wrong. Here is the HTML and CSS that I think is relevant, please let me know if you need more information:
* {
margin: 0;
padding: 0;
border: 0;
text-decoration: none;
vertical-align: baseline;
border: none;
font-weight: normal;
}
html, html a {
font-size: 10px;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
html {
}
body {
}
a {color: inherit;}
a:visited {text-decoration: none; color: inherit;}
#namelogo p {
padding-left: 1rem;
padding-top: 1rem;
font-size: 3rem;
color: white;
text-align: left;
}
#namelogo a {
font-size: 3rem;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
}
#namelogo a:hover {
text-shadow: 1px 1px 20px #fff;
}
#headline {
position:relative;
min-height: 100vh;
max-width: 100vw;
background-color: black;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#layer {
min-height: inherit;
width: inherit;
}
#vertical-align {
position: absolute;
top: 52%;
-moz-transform: translateY(-52%);
-ms-transform: translateY(-52%);
-webkit-transform: translateY(-52%);
transform: translateY(-52%);
width: 100%;
}
.posttitle {
padding-left: 1.5rem;
padding-right: 1.5rem;
text-align: center;
color: white;
font-size: 4rem;
line-height: 90%;
font-family: "Crimson Text", "Georgia", serif;
}
.postinfo {
padding-top: 1.3rem;
padding-left: 2rem;
padding-right: 2rem;
text-align: center;
font-family: "Crimson Text", "Georgia", serif;
color: white;
font-size: 1.3rem;
}
#content {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
#content h1 {
font-family: "Crimson Text", "Georgia", serif;
color: #353535;
font-size: 2.8rem;
line-height: 3.4rem;
padding-top: 8rem;
padding-bottom: 4.5rem;
padding-left: 2rem;
padding-right: 2rem;
}
#content h2 {
font-family: "Crimson Text", "Georgia", serif;
color: #333333;
font-size: 2.5rem;
padding-top: 2rem;
padding-bottom: 2rem;
padding-left: 2rem;
padding-right: 2rem;
}
#content p {
font-family: "Crimson Text", "Georgia", serif;
color: #353535;
padding-left: 2rem;
padding-right: 2rem;
font-size: 2.3rem;
word-wrap: break-word;
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href='https://fonts.googleapis.com/css? family=Crimson+Text:400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="headline" style="background-image: url(https://images.unsplash.com/photo-1449710146567-1e282fa41f2f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=c1bffcef22907f217af2fdbc3e430855);">
<div id="layer" style="background-color: rgba(0,0,0,0.4)">
<div id="namelogo">
<p><a href="../index.html">Peter Dam</a></p>
</div>
<div id="vertical-align">
<h1 class="posttitle">Why the Unfamiliar is Frightening and Why You Should Face It Anyway</h1>
<p class="postinfo">January 4, 2016 • 13 minute read • by Peter Dam</p>
</div>
</div>
</div>
<div id="content">
<h1>I have never done this before. My decision to pursue a future as a writer came as a surprise to myself. When I tell people about it—especially that it will revolve around a blog—I typically receive a sympathetic, concerned smile. A smile that tells me they think it's an appealing ambition, but also naïve.</h1>
<p>
I often find myself procrastinating and postponing the act of sitting down to write. My mind is mostly on how much better the other writers are, and I feel hesitant to begin. Instead, I convince myself that it's more logical to finish designing my website first, or to read an article about how to write well.
<br><br>
This isn’t because I have nothing to say or because other people doubt me, but because I doubt myself. I’m still insecure in my abilities. I have to create my own plan, and I’m scared that I won’t be able to execute it.
<br><br>
I keep hoping that I’ll find some sort of guarantee that it’s all going to work out. Sure, I welcome good surprises and the occasional adventure, but for the most part, knowing what to expect lets me plan ahead and gives me some peace of mind.
<br><br>
As I’m contemplating my situation and my future, fear creeps in and tells me to reconsider. Maybe I should simply drop the idea. Maybe I should listen and choose the safer path. I’m tempted.
<br><br>
But before we decide to give in to peer pressure or to our insecure selves, it is helpful to see our feelings for what they are. When we are in doubt, understanding where our emotions and inclinations come from can enable us to make better, informed decisions.
<br><br>
As it turns out, our tendency to avoid the new and unfamiliar partly comes from our ancestors.
<br><br> </p>
</div>
<div id="footer">
<p> © 2016 Peter Dam. All rights reserved.</p>
</div>
</body>
</html>Thanks in advance for your help!
