I'm trying to do an assignment, I couldn't solve it for 2 days.
flexbox, grid, bootstrap will not be used
in the first case,
Up to 992 pixels, 3 boxes will appear on the evenly spaced centered page.
in the second case,
In the tablet view (between 768px and 991px, inclusively), the first 2 sections should be in the first row and be of equal size. The 3rd section should be in the second row and take up the entire row by itself.
in the third case,
In the mobile view (equal to or less than 767px), each section should take up the entire row.
I couldn't get 3 boxes to appear centered on mobile.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Two Column Design</title>
<style>
* {
box-sizing: border-box;
}
#k1 {
background-color: blueviolet;
}
#k2 {
background-color: rgb(58, 245, 98);
}
#k3 {
background-color: rgb(179, 38, 38);
}
.column {
float: left;
width: 31%;
border: 2px solid black;
margin: 15px;
}
/* Clear floats after the columns */
.row {
clear: both;
}
.baslik1 {
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: bold;
background-color: palevioletred;
border: 1px solid black;
padding: 5px 20px 5px 20px;
display: inline;
float: right;
}
.baslik2 {
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: bold;
background-color: red;
border: 1px solid black;
padding: 5px 20px 5px 20px;
display: inline;
float: right;
}
.baslik3 {
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: bold;
background-color: rgb(217, 243, 166);
border: 1px solid black;
padding: 5px 20px 5px 20px;
display: inline;
float: right;
}
p {
clear: both;
padding: 10px;
}
#media only screen and (max-width: 992px) {
#k1 {
width: 29%;
}
#k2 {
width: 29%;
}
#k3 {
width: 29%;
}
}
#media (min-width: 768px) and (max-width: 991px) {
#k1 {
width: 46%;
}
#k2 {
width: 46%;
}
#k3 {
width: 95%;
}
}
</style>
</head>
<body>
<h1>Three Column Design</h1>
<div class="row">
<div id="k1" class="column">
<div class="baslik1">Chicken</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p></div>
<div id="k2" class="column">
<div class="baslik2">Beef</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p></div>
<div id="k3" class="column">
<div class="baslik3">Sushi</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p></div>
</div>
</body>
</html>
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Two Column Design</title>
<style>
* {
box-sizing: border-box;
}
#k1 {
background-color: blueviolet;
}
#k2 {
background-color: rgb(58, 245, 98);
}
#k3 {
background-color: rgb(179, 38, 38);
}
.column {
float: left;
width: 31%;
border: 2px solid black;
margin: 15px;
}
/* Clear floats after the columns */
.row {
clear: both;
}
.baslik1 {
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: bold;
background-color: palevioletred;
border: 1px solid black;
padding: 5px 20px 5px 20px;
display: inline;
float: right;
}
.baslik2 {
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: bold;
background-color: red;
border: 1px solid black;
padding: 5px 20px 5px 20px;
display: inline;
float: right;
}
.baslik3 {
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: bold;
background-color: rgb(217, 243, 166);
border: 1px solid black;
padding: 5px 20px 5px 20px;
display: inline;
float: right;
}
p {
clear: both;
padding: 10px;
}
#k1, #k2, #k3 {
width: 98%;
margin: 1%;
}
#media (min-width: 768px) and (max-width: 991px) {
#k1, #k2 {
width: 46%;
margin: 2%;
}
#k3 {
width: 96%;
margin: 2%;
}
}
#media only screen and (min-width: 991px) {
#k1, #k2, #k3 {
width: 29%;
margin: 2.16%;
}
}
</style>
</head>
<body>
<h1>Three Column Design</h1>
<div class="row">
<div id="k1" class="column">
<div class="baslik1">Chicken</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p></div>
<div id="k2" class="column">
<div class="baslik2">Beef</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p></div>
<div id="k3" class="column">
<div class="baslik3">Sushi</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p></div>
</div>
</body>
</html>
#media (max-width: 767px) {
#k1, #k2, #k3 {
width: 95%;
}
Here's another version with no need for floats or the .row div as we've used display: inline-block. It's also an example of how to use calc to set widths. I've also tidied your CSS up a bit.
Good luck with your assignment!
*,
*::before,
*::after {
box-sizing: border-box;
}
#k1 {
background-color: blueviolet;
}
#k2 {
background-color: rgb(58, 245, 98);
}
#k3 {
background-color: rgb(179, 38, 38);
}
.column {
display: inline-block;
width: calc(31% - 15px);
border: 2px solid black;
margin: 15px;
}
.baslik {
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: bold;
border: 1px solid black;
padding: 5px 20px 5px 20px;
display: inline;
float: right;
}
.baslik1 {
background-color: palevioletred;
}
.baslik2 {
background-color: red;
}
.baslik3 {
background-color: rgb(217, 243, 166);
}
p {
clear: both;
padding: 10px;
}
#media only screen and (min-width: 768px) and (max-width: 991px) {
#k1,
#k2 {
width: calc(50% - 33px);
}
#k3 {
width: auto;
}
}
#media only screen and (max-width: 767px) {
#k1,
#k2,
#k3 {
width: auto;
}
}
<h1>Three Column Design</h1>
<div id="k1" class="column">
<div class="baslik baslik1">Chicken</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing
elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p>
</div>
<div id="k2" class="column">
<div class="baslik baslik2">Beef</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing
elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p>
</div>
<div id="k3" class="column">
<div class="baslik baslik3">Sushi</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio aliquid cupiditate perferendis fuga, sit quasi alias vero sunt non, ratione earum dolores nihil! Consequuntur pariatur totam incidunt soluta expedita.r sit amet, consectetur adipisicing
elit. Eius nemo vitae, cupiditate odio magnam reprehenderit esse eum reiciendis repellendus incidunt sequi! Autem, laudantium, accusamus. Doloribus tempora alias minima</p>
</div>
Related
I am having some troubles in CSS. My .content-zona will not show up on the page, it has a lower selector than the nav (for some reason that i can't figure out) and the nav will just overwrite whatever the .content-zona has in CSS. Im very new to this, I hope my question wasn't very confusing. Thank you whoever tried to help a newbie!
html {
background-color: #b4cc79;
}
body {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 87%;
}
img {
max-width: 100%;
height: auto;
}
/* Banner Overlay */
.image-banner {
position: relative;
}
.image-banner img {
display: block;
}
.banner-description {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
background-color: rgba(0, 0, 0, .65);
padding: 15px 20px;
}
.container {
width: 940px;
background-color: #fff;
margin-right: auto;
margin-left: auto;
padding-left: 40px;
padding-right: 40px;
box-sizing: border-box;
}
header {
padding-top: 20px;
color: #000;
border-bottom: 3px solid #a2c14e;
}
header h1 {
margin: 0;
font-size: 165%;
font-weight: normal;
}
header p {
margin: 0;
}
/* Site Navigation */
.site-nav {
margin-top: 20px;
}
.site-nav ul {
margin: 0;
padding: 0;
}
.site-nav li {
list-style: none;
float: left;
margin-right: 5px;
}
.site-nav a {
color: black;
display: block;
text-decoration: none;
padding: 10px 20px;
border: 3px solid #a2c14e;
border-bottom: none;
}
.site-nav li:hover>a,
.site-nav a:hover {
background-color: #ecefbc;
}
/* Site Nav padajuci meni */
.site-nav li ul {
z-index: 9999;
position: absolute;
display: block;
background-color: #f9f1ce;
box-shadow: 7px 7px 7px -7px rgba(0, 0, 0, .6);
left: -9999px;
}
.site-nav li:hover ul {
left: auto;
}
.site-nav li li {
float: none;
margin-right: 0;
}
.site-nav li li a:hover
/* Kraj Padajuceg menija */
.content-zona {
border-top: 3px solid #a2c14e;
border-bottom: 3px solid #a2c14e;
}
.main-area {
width: 66%;
float: left;
padding-right: 40px;
box-sizing: border-box;
}
.side-area {
width: 34%;
float: left;
background-color: #f9f1ce;
padding: 20px 40px;
box-sizing: border-box;
font-size: 85%;
}
footer {
text-align: center;
font-size: 85%;
color: black;
padding-top: 20px;
padding-bottom: 20px;
}
.fix {
clear: both;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
<div class="container">
<header>
<h1>Website Simoneta</h1>
<p>Ovo je paragraf u header</p>
<nav class="site-nav">
<ul class="group">
<li>Pocetna stranica</li>
<li>Kontakt</li>
<li>O meni
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Kako do mene</li>
</ul>
</nav>
</header>
<div class="content-zona group">
<div class="main-area">
<h2>Ovo je prvi naslov</h2>
<p>Ovo je glavni sadrzaj tj main-area. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non inventore explicabo quis, quam quisquam laborum sint dicta id aliquid! Neque aperiam quidem aliquid modi quod, optio reprehenderit quisquam ut nisi.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non itaque at velit? Cupiditate saepe tempora architecto atque officia laudantium quisquam eos ducimus accusantium vero, earum impedit natus sit amet magni! Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Facere deserunt sed animi, repellat a pariatur quisquam! Mollitia soluta harum ipsa explicabo est voluptatem veritatis impedit, incidunt optio consequatur inventore eligendi. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Omnis praesentium dolorum alias, laboriosam eum nihil, eveniet eaque, corrupti harum tempora minima a similique fugiat unde deleniti velit sequi necessitatibus id?</p>
<div class="image-banner">
<img src="ptica.jpg">
<div class="banner-description">
<p>This is a bird.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores eligendi dicta tempore ab ullam? Quas nobis tempora placeat? Ex fugiat esse placeat fugit modi nostrum ut aliquam labore exercitationem maxime!</p>
</div>
</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perferendis maxime est numquam sit corrupti cupiditate cum ducimus qui, excepturi explicabo, aliquid reprehenderit necessitatibus, enim deleniti voluptas in mollitia totam fugit! Lorem ipsum
dolor sit amet consectetur adipisicing elit. Eius, debitis. Eius inventore sunt sapiente atque veniam ducimus eaque culpa alias porro optio nulla, provident laboriosam, iure commodi dolorum nobis tempora.</p>
</div>
<aside class="side-area">Ovo je sidebar. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum dolores unde, adipisci accusamus nostrum vitae quo labore numquam, quaerat blanditiis tempore sequi porro dolor. Facilis esse fugiat quia totam culpa. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Assumenda, aperiam impedit enim vel asperiores beatae fugiat amet. Fugiat, nulla. Eaque totam reiciendis blanditiis cum nisi hic nobis ex tenetur facere.</aside>
</div>
<footer>© Ovo je futer 2022.</footer>
</div>
Nothing is overwritten on your selector, you have a dangling selector before .content-zona and CSS can't recover himself after that error until it reaches a close curly bracket so all .content-zona styles are ruined
Remove these two lines from your CSS code or add curly brackets to end of that selector to fix it
Either Like This
.site-nav li li a:hover{}
Or
html {
background-color: #b4cc79;
}
body {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 87%;
}
img {
max-width: 100%;
height: auto;
}
/* Banner Overlay */
.image-banner {
position: relative;
}
.image-banner img {
display: block;
}
.banner-description {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
background-color: rgba(0, 0, 0, .65);
padding: 15px 20px;
}
.container {
width: 940px;
background-color: #fff;
margin-right: auto;
margin-left: auto;
padding-left: 40px;
padding-right: 40px;
box-sizing: border-box;
}
header {
padding-top: 20px;
color: #000;
border-bottom: 3px solid #a2c14e;
}
header h1 {
margin: 0;
font-size: 165%;
font-weight: normal;
}
header p {
margin: 0;
}
/* Site Navigation */
.site-nav {
margin-top: 20px;
}
.site-nav ul {
margin: 0;
padding: 0;
}
.site-nav li {
list-style: none;
float: left;
margin-right: 5px;
}
.site-nav a {
color: black;
display: block;
text-decoration: none;
padding: 10px 20px;
border: 3px solid #a2c14e;
border-bottom: none;
}
.site-nav li:hover>a,
.site-nav a:hover {
background-color: #ecefbc;
}
/* Site Nav padajuci meni */
.site-nav li ul {
z-index: 9999;
position: absolute;
display: block;
background-color: #f9f1ce;
box-shadow: 7px 7px 7px -7px rgba(0, 0, 0, .6);
left: -9999px;
}
.site-nav li:hover ul {
left: auto;
}
.site-nav li li {
float: none;
margin-right: 0;
}
.content-zona {
border-top: 3px solid #a2c14e;
border-bottom: 3px solid #a2c14e;
}
.main-area {
width: 66%;
float: left;
padding-right: 40px;
box-sizing: border-box;
}
.side-area {
width: 34%;
float: left;
background-color: #f9f1ce;
padding: 20px 40px;
box-sizing: border-box;
font-size: 85%;
}
footer {
text-align: center;
font-size: 85%;
color: black;
padding-top: 20px;
padding-bottom: 20px;
}
.fix {
clear: both;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
<div class="container">
<header>
<h1>Website Simoneta</h1>
<p>Ovo je paragraf u header</p>
<nav class="site-nav">
<ul class="group">
<li>Pocetna stranica</li>
<li>Kontakt</li>
<li>O meni
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Kako do mene</li>
</ul>
</nav>
</header>
<div class="content-zona group">
<div class="main-area">
<h2>Ovo je prvi naslov</h2>
<p>Ovo je glavni sadrzaj tj main-area. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non inventore explicabo quis, quam quisquam laborum sint dicta id aliquid! Neque aperiam quidem aliquid modi quod, optio reprehenderit quisquam ut nisi.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non itaque at velit? Cupiditate saepe tempora architecto atque officia laudantium quisquam eos ducimus accusantium vero, earum impedit natus sit amet magni! Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Facere deserunt sed animi, repellat a pariatur quisquam! Mollitia soluta harum ipsa explicabo est voluptatem veritatis impedit, incidunt optio consequatur inventore eligendi. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Omnis praesentium dolorum alias, laboriosam eum nihil, eveniet eaque, corrupti harum tempora minima a similique fugiat unde deleniti velit sequi necessitatibus id?</p>
<div class="image-banner">
<img src="ptica.jpg">
<div class="banner-description">
<p>This is a bird.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores eligendi dicta tempore ab ullam? Quas nobis tempora placeat? Ex fugiat esse placeat fugit modi nostrum ut aliquam labore exercitationem maxime!</p>
</div>
</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perferendis maxime est numquam sit corrupti cupiditate cum ducimus qui, excepturi explicabo, aliquid reprehenderit necessitatibus, enim deleniti voluptas in mollitia totam fugit! Lorem ipsum
dolor sit amet consectetur adipisicing elit. Eius, debitis. Eius inventore sunt sapiente atque veniam ducimus eaque culpa alias porro optio nulla, provident laboriosam, iure commodi dolorum nobis tempora.</p>
</div>
<aside class="side-area">Ovo je sidebar. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum dolores unde, adipisci accusamus nostrum vitae quo labore numquam, quaerat blanditiis tempore sequi porro dolor. Facilis esse fugiat quia totam culpa. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Assumenda, aperiam impedit enim vel asperiores beatae fugiat amet. Fugiat, nulla. Eaque totam reiciendis blanditiis cum nisi hic nobis ex tenetur facere.</aside>
</div>
<footer>© Ovo je futer 2022.</footer>
</div>
The empty space (you'll see when you put in the code) is where the cards should be stacked in a column like orientation like this
I am trying to fill that white space with the cards in that fashion but the sidebar keeps pushing it down and I've tried merging them and creating different divs to separate but no matter what it stays below and I do not know why.
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
min-height: 100vh;
}
.Cards {
display: flex;
flex-direction: row;
justify-content: space-between;
flex: 1 1 0;
}
.header {
display: flex;
justify-content: flex-start;
padding-inline-start: 10px;
font-size: 30px;
font-weight: 700;
align-items: center;
height: 72px;
background: darkmagenta;
color: white;
}
.footer {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
background: #eee;
color: darkmagenta;
}
.sidebar {
margin: 0;
display: flex;
flex-direction: column;
height: 700px;
width: 300px;
background: royalblue;
}
.sidebar a {
margin: 0;
}
.card {
border: 1px solid #eee;
box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
border-radius: 4px;
}
<div class="header">
MY AWESOME WEBSITE
</div>
<div class="contents">
<div class="sidebar">
⭐ - link one
🦸🏽♂️ - link two
🖌️ - link three
👌🏽 - link four
</div>
<div class="Cards">
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
<div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
</div>
</div>
<div class="footer">
The Odin Project ❤️
</div>
I would prefer if the solution was found ONLY using flexbox, no margin or anything.
Solution using the requested flex. You have to set flex on the main parent in this case .contents.
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
min-height: 100vh;
}
.contents {
display: flex;
}
.Cards {
display: flex;
flex-direction: row;
justify-content: space-between;
flex: 1 1 0;
}
.header {
display: flex;
justify-content: flex-start;
padding-inline-start: 10px;
font-size: 30px;
font-weight: 700;
align-items: center;
height: 72px;
background: darkmagenta;
color: white;
}
.footer {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
background: #eee;
color: darkmagenta;
}
.sidebar {
margin: 0;
display: flex;
flex-direction: column;
height: 700px;
width: 300px;
background: royalblue;
}
.sidebar a {
margin: 0;
}
.card {
border: 1px solid #eee;
box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
border-radius: 4px;
}
<div class="header">
MY AWESOME WEBSITE
</div>
<div class="contents">
<div class="sidebar">
⭐ - link one
🦸🏽♂️ - link two
🖌️ - link three
👌🏽 - link four
</div>
<div class="Cards">
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
<div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
</div>
</div>
<div class="footer">
The Odin Project ❤️
</div>
Use flex attribute Wrapping !!
flex-wrap: wrap;
By using this your white card automatically come down by take a line break.
This can be easily done using Grid Layout. Just changed the contents container to flex and used grid for Cards container.
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
min-height: 100vh;
}
.contents {
display: flex;
}
.Cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 10px;
padding: 12px;
box-sizing: border-box;
}
.header {
display: flex;
justify-content: flex-start;
padding-inline-start: 10px;
font-size: 30px;
font-weight: 700;
align-items: center;
height: 72px;
background: darkmagenta;
color: white;
}
.footer {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
background: #eee;
color: darkmagenta;
}
.sidebar {
margin: 0;
display: flex;
flex-direction: column;
height: 700px;
width: 300px;
background: royalblue;
}
.sidebar a {
margin: 0;
}
.card {
border: 1px solid #eee;
box-shadow: 2px 4px 16px rgba(0, 0, 0, .06);
border-radius: 4px;
padding: 12px;
box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Holy Grail</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
MY AWESOME WEBSITE
</div>
<div class="contents">
<div class="sidebar">
⭐ - link one
🦸🏽♂️ - link two
🖌️ - link three
👌🏽 - link four
</div>
<div class="Cards">
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
<div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
</div>
</div>
<div class="footer">
The Odin Project ❤️
</div>
</body>
</html>
Code:
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.header {
height: 72px;
background: darkmagenta;
color: white;
font-size: 32px;
font-weight: 900;
padding-left: 16px;
display: flex;
align-items: center;
}
.footer {
height: 72px;
background: #eee;
color: darkmagenta;
display: flex;
align-items: center;
justify-content: center;
}
.sidebar {
width: 300px;
background: royalblue;
flex-shrink: 0;
padding: 16px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
margin-bottom: 16px;
}
a {
text-decoration: none;
color: white;
font-size: 24px;
}
.card {
border: 1px solid #eee;
box-shadow: 2px 4px 16px rgba(0,0,0,.06);
border-radius: 4px;
margin: 16px;
padding: 16px;
}
.container {
padding: 32px;
display: flex;
flex-wrap: wrap;
}
.body {
display: flex;
flex: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Holy Grail</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
MY AWESOME WEBSITE
</div>
<div class="body">
<div class="sidebar">
<ul>
<li>⭐ - link one</li>
<li>🦸🏽♂️ - link two</li>
<li>🖌️ - link three</li>
<li>👌🏽 - link four</li>
</ul>
</div>
<div class="container">
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
<div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
</div>
</div>
<div class="footer">
The Odin Project ❤️
</div>
</body>
</html>
Here I added the display: flex; and flex-wrap: wrap; for the class container, with class card as flex items. However the cards are not wrapping. I checked the parent body and it has display: flex; set so I don't know where I went wrong.
This is the output I am getting
This is the desired outcome
You can apply a fixed-width to your cards. Without defining a width, flex-box is going to try to determine the width for them, based on the screen size. If you set a fixed-width the cards will keep that width upon resizing the browser, which then your flex-wrap: wrap; on your container will kick in and wrap them when there is not enough space. I added width: 350px; to your card See the changes below.
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.header {
height: 72px;
background: darkmagenta;
color: white;
font-size: 32px;
font-weight: 900;
padding-left: 16px;
display: flex;
align-items: center;
}
.footer {
height: 72px;
background: #eee;
color: darkmagenta;
display: flex;
align-items: center;
justify-content: center;
}
.sidebar {
width: 300px;
background: royalblue;
flex-shrink: 0;
padding: 16px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
margin-bottom: 16px;
}
a {
text-decoration: none;
color: white;
font-size: 24px;
}
.card {
border: 1px solid #eee;
box-shadow: 2px 4px 16px rgba(0,0,0,.06);
border-radius: 4px;
margin: 16px;
padding: 16px;
width: 350px;
min-width: 150px;
}
.container {
padding: 32px;
display: flex;
flex-wrap: wrap;
overflow-x: hidden;
}
.body {
display: flex;
flex: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Holy Grail</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
MY AWESOME WEBSITE
</div>
<div class="body">
<div class="sidebar">
<ul>
<li>⭐ - link one</li>
<li>🦸🏽♂️ - link two</li>
<li>🖌️ - link three</li>
<li>👌🏽 - link four</li>
</ul>
</div>
<div class="container">
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
<div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
</div>
</div>
<div class="footer">
The Odin Project ❤️
</div>
</body>
</html>
Be ensure your flex item have maximum width . than the main container will be wrapping.
.card {
max-width: 200px;
}
I have a problem with my footer. My footer is under the right section but I want that it will be under the main section on the full-width container.
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
background-color: #1F0057;
}
.container {
width: 1400px;
margin-left: 15%;
float: left;
}
nav ul li img {
width: 25px;
padding-left: 5%;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline;
}
nav ul li a {
vertical-align: middle;
padding-left: 5px;
color: #DAA520;
text-decoration: none;
text-transform: uppercase;
font-size: 1.2rem;
/* border: 1px solid yellow; */
}
nav {
background-color: #1F0057;
width: 100%;
height: 1em;
/* border: 1px solid yellow; */
}
.header {
font-size: 4rem;
color: white;
background-color: rgb(220, 189, 222);
width: 100%;
}
.title {
text-align: center;
color: #696969;
}
main article section {
float: left;
height: 60vh;
}
#first {
/* background-image: url(); */
background-image: url("gimp/cpu1.png");
/* usun "color" */
color: white;
width: 20%;
/* width: 300px; */
}
#second {
padding: 2%;
width: 60%;
height: auto;
background-color: #fff;
background-color: #4800CF;
/* width: 900px; */
}
#third {
width: 16%;
background-color: #5600F5;
height: auto;
/* width: 188px; */
}
main article section header {
font-size: 1.8em;
font-weight: bold;
padding: 2%;
}
main article section figure {
font-size: 1.2rem;
font-weight: bold;
margin-top: 3%;
box-shadow: 2px 2px 5px black;
}
main article section figcaption {
font-size: 1.1rem;
text-indent: 1.5em;
padding-top: 2.5%;
text-align: justify;
}
.secondmainmargin {
/* margin: 2%; */
}
.footer {
background-color: white;
font-family: 'Robocot';
font-size: 1.4rem;
text-align: center;
color: #fff;
float: right;
}
.link {
padding: 2%;
}
<div class="container">
<header class="header">
<div class="title">
Podstawowe podzespoły i parametry sprzętu komputerowego
</div>
<nav class="navbar">
<ul>
<li><img src="img/house.png" alt="domek"></li>
<li>Obudowa</li>
<!-- !!!!!przy "strony nie może być "/" czyli "/strony.obudowa.html"!!!!! -->
<li>Płyta główna</li>
<li>Procesor</li>
<li>Karty rozszerzeń</li>
<li>Pamięć Operacyjna</li>
<li>Pamięci masowe</li>
<li>Zasilacz</li>
<li>Inne</li>
</nav>
</header>
<main class="main">
<article>
<section id="first">
<img src="gimp/cpu1.png" alt="procesor" width="100%;">
</section>
<section id="second">
<header>
Nagłówek sekcji
</header>
<div class="secondmainmargin">
<figure>Podtytuł pierwszy</figure>
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut dolore laborum explicabo beatae dignissimos consectetur, asperiores quod, culpa velit expedita vitae, id hic voluptatem soluta eius alias. Animi sequi deserunt dolorem incidunt iure laudantium
laborum nemo quia ullam blanditiis, voluptatem ea a odit quae, repellendus dicta consequuntur provident ab exercitationem itaque molestias, dolor. Et, ipsa, iusto. Deserunt labore provident ad adipisci sed aliquid natus nihil.
</figcaption>
<figure>Podtytuł drugi</figure>
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos modi laborum repudiandae error temporibus ullam consectetur in molestiae exercitationem quos, expedita cum, odit voluptatum quod illo vitae. Dolorum aperiam unde ducimus maxime aut
iusto distinctio ipsum nisi eveniet illo atque tempore, eius error ex, cupiditate! Provident doloribus voluptatibus dignissimos, sed!
</figcaption>
<figure>Podtytuł trzeci</figure>
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea facilis ducimus beatae doloribus possimus fugiat iste aliquid, laudantium ab omnis veniam porro nemo explicabo. Inventore totam consequuntur expedita, distinctio exercitationem, eaque sint accusantium
libero voluptas sunt eligendi. Dolorum enim, consectetur perferendis veritatis impedit adipisci quo optio maiores odit accusantium tempora eaque blanditiis explicabo eligendi nam dolore placeat natus pariatur?dawdawdadawd Lorem ipsum dolor
sit amet, consectetur adipisicing elit. Amet, eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum ipsa pariatur a, sequi provident id dolor cupiditate dolorum consectetur, ea aliquid sint nesciunt nobis perspiciatis vitae
deserunt, molestiae odit fugit. Tempore quae natus enim reprehenderit aspernatur ratione illo neque assumenda, beatae nihil, ipsa incidunt minima, qui? Delectus animi velit quam distinctio est rem, itaque tempore placeat odio tenetur ipsam
iure consequuntur ex dolorum nulla sunt provident quibusdam harum fugiat et. Ex praesentium sunt, est qui distinctio. Laboriosam quo molestias neque numquam autem suscipit impedit, quaerat optio dolores veritatis sint sequi dolorem necessitatibus
molestiae, ex, incidunt modi porro eius natus perspiciatis!
</figcaption>
</div>
</section>
<section id="third">
<div class="link">
<header>Linki</div>
</header>
</section>
</article>
</main>
<footer class="footer">
Made by: Filip
</footer>
</div>
code with css: https://codepen.io/FilipoV/pen/jOyyNxR
add this to your .footer-class:
.footer{
display:block;
clear:both;
}
and remove
float:right;
In the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid View</title>
<style>
* {
box-sizing: border-box;
}
html {
font-size: 1vw;
}
body {
padding: 0 0;
margin: 0;
background-color: violet;
font-size: 1.1rem;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background-color: rgb(133, 76, 76);
border: .01rem solid rgb(133, 76, 76);
margin-bottom: 4%;
position: fixed;
top: 0;
left: 10%;
right: 10%;
padding: 0;
}
header h1 {
text-align: center;
}
.row {
background-color: blueviolet;
margin-bottom: 4%;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
background-color: whitesmoke;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
div#three div.col-3 {
width: 24%;
margin-right: 1.33%;
}
div#three div.col-3:last-of-type {
margin-right: 0;
}
#media only screen and (max-width: 780px) {
html {
font-size: 2.5vw;
}
body {
padding-top: 17%;
}
}
#media only screen and (max-width: 480px) {
html {
font-size: 3vw;
}
body {
padding-top: 17%;
}
}
</style>
</head>
<body>
<div class="container">
<div id="one" class="row">
<div class="col-12">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
</div>
</div>
<div id="three" class="row">
<div class="col-3">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
</div>
<div class="col-3">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
</div>
<div class="col-3">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
</div>
<div class="col-3">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
</div>
</div>
</div>
</body>
</html>
The web page breaks at around 470px (checked through device toolbar using chrome inspect). This happens as the text inside the 4 floated divs in the second row is not responsive and gets out of the div at 470px. This is only happening when the text is inside a floated element, when I make the divs block element again, the text becomes responsive.
Can someone tell me why this happens ?
Hope this help you. Added below mentioned CSS
div#three div.col-3{
width: 49%;
margin: 0 0.5%;
margin-bottom: 5px;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid View</title>
<style>
* {
box-sizing: border-box;
}
html {
font-size: 1vw;
}
body {
padding: 0 0;
margin: 0;
background-color: violet;
font-size: 1.1rem;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background-color: rgb(133, 76, 76);
border: .01rem solid rgb(133, 76, 76);
margin-bottom: 4%;
position: fixed;
top: 0;
left: 10%;
right: 10%;
padding: 0;
}
header h1 {
text-align: center;
}
.row {
background-color: blueviolet;
margin-bottom: 4%;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
background-color: whitesmoke;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
div#three div.col-3 {
width: 24%;
margin-right: 1.33%;
}
div#three div.col-3:last-of-type {
margin-right: 0;
}
#media only screen and (max-width: 780px) {
html {
font-size: 2.5vw;
}
body {
padding-top: 17%;
}
div#three div.col-3 {
width: 49%;
margin: 0 0.5%;
margin-bottom: 5px;
}
}
#media only screen and (max-width: 480px) {
html {
font-size: 3vw;
}
body {
padding-top: 17%;
}
}
#media only screen and (max-width: 380px) {
div#three div.col-3 {
width: 99%;
margin: 0 0.5%;
margin-bottom: 5px;
}
}
</style>
</head>
<body>
<div class="container">
<div id="one" class="row">
<div class="col-12">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
</div>
</div>
<div id="three" class="row">
<div class="col-3">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
</div>
<div class="col-3">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
</div>
<div class="col-3">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
</div>
<div class="col-3">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt cupiditate, ullam, illum magnam quidem ipsam laudantium dicta autem fugit cumque laboriosam et neque consequuntur beatae? Molestiae sed id ipsam distinctio molestias asperiores,
labore officia! Maxime dolor illo, beatae cumque rerum sint corrupti possimus sed labore.</p>
</div>
</div>
</div>
</body>
</html>
A single CSS rule can fix this issue without altering breakpoints or existing source code -
div#three div.col-3{
overflow-wrap: break-word;
}
This does not take best practices in terms of readability for the end user into consideration but does fix the bug you're experiencing. Further tweaking with padding on .col-3 divs for mobile devices should help.
Changing the font-size to a 'vw' value of text inside floating elements resolves the issue. But i still can't figure out why.