I created a reactive website with columns, but for some reason the columns are reaching too far on mobile screens, going too far to the left beyond where the header and footer end. I did I media query to make the two columns of the site reactive (stack on one another) and am not sure why they are stretching out like this when the screen is smaller. Can anyone fix my code so that the containers do not overflow? Thank you so much!
/* Add a background color with some padding to the body */
body {
background: #383f51;
font-family: Geneva, sans-serif;
}
/* Header and Blog Title */
header {
background: #91c7b1;
margin-top: 15px;
padding: 5px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
text-align: center;
}
header h1 {
font-size: 42px;
font-family: "Electrolize", sans-serif;
}
header p {
font-style: italic;
font-size: 24px;
}
/* navbar/*
/* top navigation bar style */
nav {
background-color: #000;
overflow: hidden;
display: block;
height: auto;
width: auto;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
/* navigation bar links */
nav a {
float: left;
color: white;
text-align: center;
font-size: 20px;
padding: 10px;
margin-left: 5px;
text-decoration: underline;
font-family: "Electrolize", sans-serif;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.rightcolumn {
flex: 1;
}
.leftcolumn {
flex: 5;
}
/* 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 */
.row {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
main > .row {
display: flex;
}
@media screen and (max-width: 800px) {
main > .row {
flex-direction: column;
}
}
/* images (work in progress at the moment) */
/* images and videos (work in progress at the moment) */
.iframe-container {
position: relative;
width: 100%;
padding-bottom: 60.25%;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 20px;
}
/* Post layout for articles and additional areas */
.post {
display: block;
background-color: white;
padding: 20px;
margin-top: 10px;
border-style: solid;
border-color: #91c7b1;
border-radius: 25px;
}
article h2,
article h2 a,
.post h2 {
font-size: 24px;
text-decoration: none;
color: #533a71;
}
article h4 {
padding-top: 15px;
}
article h5 {
font-size: 16px;
}
.post p {
line-height: 1.5em;
font-size: 16px;
}
/* Footer */
.footer {
color: black;
margin-top: 10px;
left: 0;
bottom: 0;
width: 100%;
background-color: #91c7b1;
text-align: center;
font-size: 18px;
border-radius: 25px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Project Incredible Indie Games</title>
<link rel="stylesheet" href="style.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>
<!-- End Header -->
<!-- Begin Navigation -->
</header>
<nav role="navigation">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Reviews</a>
<a href="#">Contact</a>
</nav>
<!-- End Navigation -->
<!-- End Header -->
<!-- Begin Main Content -->
<main role="main">
<div class="row">
<!-- Begin Blog Posts -->
<section class="leftcolumn">
<article class="post" role="article">
<h2> <a href="Ori-and-The-Blind-Forest.html">Ori and The Blind Forest: A Soulful and Stunning Action-Platformer</a></h2>
<h5><time datetime="2021-09-22">Sep, 22 2021</time></h5>
<div class="iframe-container">
<iframe src="https://www.youtube.com/embed/cklw-Yu3moE" title="Ori and the Blind Forest" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<h4> Summary </h4>
<p> Ori and The Blind Forest begins with Ori, a small tree spirit that is blown away from its home in The Spirit Tree and into the care of its adoptive mother Naru. However, as dark forces gather the Spirit Tree is broken in Ori's absence. With The Spirit Tree dead, the land of Nibel that it guarded begins to wither and decay. As the last of the tree spirits, Ori is forced to travel around Nibel and restore The Spirit Tree in order to save Nibel from the talons of despair.</p>
<p> Ori's story of courage, love, and sacrifice is beautifully displayed in a fluid and engaging Metroidvania style, in which platforming and scrolling play a major part in gameplay. The hand-painted artwork and fully orchestrated soundtrack bring the game to life, offering an emotional and moving experience to the player. </p>
<h4> How does It Rate? </h4>
<p> Controls: Ori's controls were extremely fluid, with little to no lag and multiple ways to get around. The running, jumping, and dashing flowed like water, while the combat mechanic was simple enough to not worry about complex buttons. Overall, I would rate the controls at a 5/5.</p>
<h4> General Difficulty:</h4>
<p> Like many games, Ori is able to be played on multiple difficulties. The easy setting, which is meant for players who focus on the story primarily, weakens all enemies and reduces the amount of damage taken from both environmental traps and attacks. The normal difficulty of the game is well balanced, with more effort required during battles and traversing the world; but not that much to take away from the experience. The hard difficultly is good for experienced gamers, as it offers more of a challenge in terms of keeping Ori alive by increasing the normal damage taken and shortening Ori's life. I will note that there are no achievements associated with the higher levels of difficulty, all achievements and content are available in each setting. Because of this well-managed system of difficulty and the fact that the full experience is available to players of all levels, I rate this game's difficulty at 5/5 </p>
<h4> Time Spent Playing:</h4>
<p> This game averages around 8.5-12 hours for total playtime including the story-based cutscenes. The total playtime of an individual depends on whether or not they desire a full completion of all collectibles, and how they are choosing to play the game: causally in their free time or one sitting speedrunning. While 12 hours may not seem like much, the gameplay is likely to be split amongst many different days due to the ease to interact with the nature of safe files. Files are located very frequently, so this is a great game to pick up and drop as desired. I will admit that the game could have been longer, but not that the existing content is above standard. Because of this, I will rate it 4/5. </p>
<h4> Visuals and Audio: </h4>
<p> As noted earlier, the visuals and audio elements of this game are beautifully crafted to complement its rich and emotional story. The hand-painted backdrops and layered one on top of the other to give depth and life to the world of Nibel, while the more solid foreground graphics are crisp and easy to see. Meanwhile, the soundtrack reflects the mood of each area and re-uses the main theme as elements to significant points in the story to tie everything together. As the music and visuals are the most noted features of this game, they will receive a score of 5/5. </p>
<h3> <em>Overall Score (19/20) Certified Incredible</em> </h3>
<br>
<footer class="references">
<h4> References </h4>
<p> Entertainment Software Rating Board (ESRB). (2021). Ori and the blind forest. ESRB Ratings. <a href="https://www.esrb.org/ratings/10013405/Ori and the Blind Forest/">https://www.esrb.org/ratings/10013405/Ori and the Blind Forest/</a></p>
<p>Moon Studios. (2017, May 30). Blind forest. Ori. <a href="https://www.orithegame.com/blind-forest/">https://www.orithegame.com/blind-forest/</a></p>
<p>Ori and the blind forest prices. (2021). PriceCharting. <a href="https://www.pricecharting.com/search-products?type=prices&q=Ori and the Blind Forest&go=Go">https://www.pricecharting.com/search-products?type=prices&q=Ori and the Blind Forest&go=Go</a></p>
<p>Ori and the blind forest. (2021). Steam. <a href="https://www.orithegame.com/blind-forest/">https://www.orithegame.com/blind-forest/</a></p>
</footer>
</article>
</section>
<!-- End Blog Posts -->
<!-- Begin Sidebar -->
<aside class="rightcolumn" role="complementary">
<section class="post">
<h2>About Me</h2>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
</section>
<section class="post">
<h2>Upcoming Posts</h2>
</section>
</aside>
<!--End Sidebar -->
</main>
<!--End Main -->
<!--Begin Footer-->
<footer class="footer" role="contentinfo">
<p>Blog Created by: Abby Lake</p>
</footer>
<!--End Footer-->
</div>
</body>
</html>CodePudding user response：
You p tag has long a href, You have to break work here. It will break all long non-spaced string
p{
word-break: break-all;
}
Where ever the word overflows of its container you can break the word using above CSS property.