This is my template for blog posts. When the window you are viewing the post in is maximized, the spacing between nav and post-title is far too much. I want to reduce the space and keep it consistent.
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Cambria', serif;
line-height: 1.6;
background-color: transparent;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container {
width: 80%;
margin: auto;
text-align: center;
}
nav {
background-color: transparent;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav a {
color: #555;
margin: 0 15px;
text-decoration: none;
font-size: 18px;
}
nav a:hover {
color: #555;
text-decoration: underline;
}
.post-title {
font-size: 32px;
padding: 5px 10px;
margin: 2px 0;
}
.post-date {
font-size: 18px;
color: #888;
margin-bottom: 40px;
}
.post-content {
text-align: left;
}
.post-content h2 {
margin-top: 40px;
font-size: 24px;
color: #444;
}
.post-content p {
margin-bottom: 20px;
}
footer {
color: #555;
text-align: center;
padding: 10px 20px;
background-color: transparent;
}<div class="wrapper">
<nav>
<a href="button1.html">Button 1</a>
<a href="button2.html">Button 2</a>
<a href="button3.html">Button 3</a>
</nav>
<div class="content">
<div class="container">
<div class="post-title">Title</div>
<div class="post-date">Date</div>
<div class="post-content">
<p><em>Subheader</em></p>
<h2>Subheading 1</h2>
<p>Content</p>
<h2>Subheading 2</h2>
<p>Content</p>
<h2>Conclusion</h2>
<p>Content</p>
</div>
</div>I have tried reducing padding-top and removing justify-content, but it seems like the title just will not change much at all when the window is maximized. It stays the same.
1
I commented out the styles that cause this problem.
-
Remove
justify-content: centerfrom.content. Since.contenttakes over the entire available height, assigning this will makes its child.containercentered vertically, which causes the margin being too large on full page. -
Remove
margin: autofrom.container. This also causes itself been centered both vertically and horizontally. Since you already havealign-items: centeron its parent, using margin to center it horizontally is redundant. Also, you don’t want to center it vertically, so removing this rule fixes this problem.
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Cambria', serif;
line-height: 1.6;
background-color: transparent;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1;
display: flex;
flex-direction: column;
/* justify-content: center; */
align-items: center;
}
.container {
width: 80%;
/* margin: auto; */
text-align: center;
}
nav {
background-color: transparent;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav a {
color: #555;
margin: 0 15px;
text-decoration: none;
font-size: 18px;
}
nav a:hover {
color: #555;
text-decoration: underline;
}
.post-title {
font-size: 32px;
padding: 5px 10px;
margin: 2px 0;
}
.post-date {
font-size: 18px;
color: #888;
margin-bottom: 40px;
}
.post-content {
text-align: left;
}
.post-content h2 {
margin-top: 40px;
font-size: 24px;
color: #444;
}
.post-content p {
margin-bottom: 20px;
}
footer {
color: #555;
text-align: center;
padding: 10px 20px;
background-color: transparent;
}<div class="wrapper">
<nav>
<a href="button1.html">Button 1</a>
<a href="button2.html">Button 2</a>
<a href="button3.html">Button 3</a>
</nav>
<div class="content">
<div class="container">
<div class="post-title">Title</div>
<div class="post-date">Date</div>
<div class="post-content">
<p><em>Subheader</em></p>
<h2>Subheading 1</h2>
<p>Content</p>
<h2>Subheading 2</h2>
<p>Content</p>
<h2>Conclusion</h2>
<p>Content</p>
</div>
</div>