I've been having a problem with my reactive website; specifically it will not show the "about-me" and "popular posts" on the top left (next to the main content) when the screen is large. I would like to fix it, if possible. Right now, it shows right next to the footer, which is not what I want.
Here is the HTML and CSS I am working with:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style-main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Electrolize&display=swap" rel="stylesheet">
</head>
<body>
<!-- Begin Header -->
<header role="banner">
<h1>Incredible Indie Games</h1>
<p>Reviews and Reccomendations for the Moderate Indie Gamer</p>
<!-- Begin Navigation -->
<nav role="navigation">
<a href="#">Home</a>
<a href="index-copy.html">About</a>
<a href="#">Reviews</a>
<a href="#">Contact</a>
</nav>
<!-- End Navigation -->
</header>
<!-- End Header -->
<!-- Begin Main Content -->
<main>
<div class="row">
<div class="leftcolumn">
<article class="post">
<h2> Ori and The Blind Forest: A Soulful and Stunning Action-Platformer </h2>
<h5>Dec 7, 2017</h5>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</article>
<article class="post">
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</article>
</div>
</div>
</main>
<aside>
<div class="rightcolumn">
<section class="post">
<h2>About Me</h2>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
</section>
<section class="post">
<h3>Upcoming Posts</h3>
</section>
</div>
</aside>
<footer class="footer">
<h2>Footer</h2>
</footer>
</body>
</html>and here is the CSS
* {
box-sizing: border-box;
}
/* Add a background color with some padding */
body {
font-family: Arial;
padding: 12px;
background: black;
}
/* Header*/
/*Blog Title */
header {
padding: 10px;
background: #91c7b1;
font-size: 15px;
text-align: center;
font-family: "Electrolize", sans-serif;
}
/*navbar/*
/* top navigation bar style */
nav {
background-color: #000;
overflow: hidden;
}
/* navigation bar links */
nav a {
color: White;
float: left;
font-family: "Electrolize", sans-serif;
padding: 15px;
text-align: center;
text-decoration: underline;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* Right column */
.rightcolumn {
float: right;
width: 20%;
}
/* images work in progress at the moment */
/* Add a post layout for articles */
.post {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Footer */
footer {
text-align: center;
color: white;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn,
.rightcolumn {
width: 100%;
padding: 0;
}
}CodePudding user response：
The easiest way is to use the grid system from Bootstarp: https://getbootstrap.com/docs/4.0/layout/grid/
CodePudding user response：
The best option you have is to use flex for the container. Using float in modern website design is very uncommon, and float comes with a lot of drawbacks. I've modified your CSS and HTML to reflect a flex way of doing things.
You will need to clean it up yourself (padding, flex ratios etc). See below for the changes made to get it working as you need.
See this for more info on flex: https://developer.mozilla.org/en-US/docs/Web/CSS/flex
.rightcolumn {
flex: 5;
}
.leftcolumn {
flex: 1;
}
main > .row {
display: flex;
}
@media screen and (max-width: 800px) {
main > .row {
flex-direction: column;
}
}
<main>
<div class="row">
<div class="leftcolumn">
<section class="post">
<h2>About Me</h2>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
</section>
<section class="post">
<h3>Upcoming Posts</h3>
</section>
</div>
<div class="rightcolumn">
<article class="post">
<h2> Ori and The Blind Forest: A Soulful and Stunning Action-Platformer </h2>
<h5>Dec 7, 2017</h5>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</article>
<article class="post">
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</article>
</div>
</div>
</main>
As for a side note, if you're doing this for an assignment, I would recommend cleaning up your HTML. The class names don't really reflect their purpose, and the row element seems redundant. But all up, looks good.
CodePudding user response：
Check below code. I used Bootstrap grid system. you can use https://getbootstrap.com/docs/4.0/layout/grid/ to get more information
* {
box-sizing: border-box;
}
/* Add a background color with some padding */
body {
font-family: Arial;
padding: 12px;
background: black !important;
}
/* Header*/
/*Blog Title */
header {
padding: 10px;
background: #91c7b1;
font-size: 15px;
text-align: center;
font-family: "Electrolize", sans-serif;
}
/*navbar/*
/* top navigation bar style */
nav {
background-color: #000;
overflow: hidden;
}
/* navigation bar links */
nav a {
color: White;
float: left;
font-family: "Electrolize", sans-serif;
padding: 15px;
text-align: center;
text-decoration: underline;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* Right column */
.rightcolumn {
float: right;
width: 20%;
}
/* images work in progress at the moment */
/* Add a post layout for articles */
.post {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Footer */
footer {
text-align: center;
color: white;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn,
.rightcolumn {
width: 100%;
padding: 0;
}
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style-main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Electrolize&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<!-- Begin Header -->
<header role="banner">
<h1>Incredible Indie Games</h1>
<p>Reviews and Reccomendations for the Moderate Indie Gamer</p>
<!-- Begin Navigation -->
<nav role="navigation">
<a href="#">Home</a>
<a href="index-copy.html">About</a>
<a href="#">Reviews</a>
<a href="#">Contact</a>
</nav>
<!-- End Navigation -->
</header>
<!-- End Header -->
<!-- Begin Main Content -->
<main>
<div class="row">
<div class="col-8">
<article class="post">
<h2> Ori and The Blind Forest: A Soulful and Stunning Action-Platformer </h2>
<h5>Dec 7, 2017</h5>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</article>
<article class="post">
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</article>
</div>
<div class="col-4">
<section class="post">
<h2>About Me</h2>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
</section>
<section class="post">
<h3>Upcoming Posts</h3>
</section>
</div>
</div>
</main>
<footer class="footer">
<h2>Footer</h2>
</footer>
</div>
</body>
</html>CodePudding user response：
I thing Bootstrap would be better solution for anykind of design for you. The following code may become yous solution.
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style-main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Electrolize&display=swap" rel="stylesheet">
<style type="text/css">
* {
box-sizing: border-box;
}
/* Add a background color with some padding */
body {
font-family: Arial;
padding: 12px;
background: black;
}
/* Header*/
/*Blog Title */
header {
padding: 10px;
background: #91c7b1;
font-size: 15px;
text-align: center;
font-family: "Electrolize", sans-serif;
}
/*navbar/*
/* top navigation bar style */
nav {
background-color: #000;
overflow: hidden;
}
/* navigation bar links */
nav a {
color: White;
float: left;
font-family: "Electrolize", sans-serif;
padding: 15px;
text-align: center;
text-decoration: underline;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* Right column */
.rightcolumn {
float: right;
width: 20%;
}
/* images work in progress at the moment */
/* Add a post layout for articles */
.post {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Footer */
footer {
text-align: center;
color: white;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn,
.rightcolumn {
width: 100%;
padding: 0;
}
}
</style>
</head>
<body>
<!-- Begin Header -->
<header role="banner">
<h1>Incredible Indie Games</h1>
<p>Reviews and Reccomendations for the Moderate Indie Gamer</p>
<!-- Begin Navigation -->
<nav role="navigation">
<a href="#">Home</a>
<a href="index-copy.html">About</a>
<a href="#">Reviews</a>
<a href="#">Contact</a>
</nav>
<!-- End Navigation -->
</header>
<!-- End Header -->
<!-- Begin Main Content -->
<main>
<div class="row">
<div class="leftcolumn">
<article class="post">
<h2> Ori and The Blind Forest: A Soulful and Stunning Action-Platformer </h2>
<h5>Dec 7, 2017</h5>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</article>
<article class="post">
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</article>
</div>
<div class="rightcolumn">
<aside>
<section class="post">
<h2>About Me</h2>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
</section>
<section class="post">
<h3>Upcoming Posts</h3>
</section>
</aside>
</div>
</div>
</main>
<footer class="footer">
<h2>Footer</h2>
</footer>
</body></html>