I am in the process of creating a unique sticky note website where I want to arrange the notes in a grid format. As the window size decreases, the notes should automatically reorganize to fit the width and allow for vertical scrolling. My goal is to achieve this using only CSS
Currently, I have set the notes to float left, which serves most of my requirements, but there seems to be an issue with the top row being offset. I aim to have the notes arranged neatly in rows and columns. I also experimented with display: inline-block, however, it caused some disorganization among the notes.
Some secondary queries include:
- Why isn't Comic Sans font taking effect?
- How can I eliminate the extra white space along the right side?
/*
* This stylesheet contains all the necessary styles for index.html.
*/
html,
body {
margin: 0;
padding: 0;
}
/*** HEADER Element Styling ***/
header {
background-color: #FFFF01;
font-family: "comic sans ms", cursive, sans-serif;
width: 100%;
}
header h1 {
position: relative;
top: 15px;
left: 15px;
margin: 0;
}
header li {
display: inline-block;
}
header a {
color: #000;
text-decoration: none;
}
/*** NAV Element Styling ***/
nav {
background-color: #333;
height: 25px;
padding: 0;
}
nav a {
text-decoration: none;
color: #FFFFFF;
}
.navbar-item {
padding: 5px;
float: left;
}
.navbar-right {
float: right;
}
/*** TODO Class Styling ***/
.todo {
background-color: #FFFF63;
float: left;
width: 300px;
height: 300px;
margin: 20px;
}
.todo h2 {
text-align: center;
font-size: 36px;
}
.todo-body {
font-size: 24px;
text-align: left;
margin: 15px;
}
.todo-body li {
list-style-type: circle;
}
.todo a {
color: #010100;
}
/*** DISSMISS-BUTTON Class Styling ***/
.dismiss-button {
cursor: pointer;
position: relative;
float: right;
top: 5px;
right: 5px;
font-size: 24px;
visibility: hidden;
}
.todo:hover .dismiss-button {
visibility: visible;
position: relative;
align-self: auto;
}
/*** ADD-NOTE CLASS Styling ***/
.add-note-button-container {
border-radius: 50%;
width: 65px;
height: 65px;
background-color: #FE0000;
position: fixed;
bottom: 40px;
right: 40px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}
.add-note-button-container:hover {
box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.7);
}
/*** BUTTON Element Styling ***/
button {
cursor: pointer;
font-size: 50px;
border: none;
color: white;
display: inline-block;
background-color: transparent;
position: relative;
top: 7px;
left: 12px;
}
/*** FOOTER Element Styling ***/
footer {
position: fixed;
height: 25px;
width: 100%;
bottom: 0;
right: 0;
padding: 0;
margin: 0;
background-color: #313131;
}
.copyright {
float: right;
color: white;
padding: 5px;
margin: 0;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CustomNote</title>
<!-- Use the Font Awesome library for custom icons -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" media="screen">
<link rel="stylesheet" href="style.css" media="screen">
</head>
<body>
<header>
<h1><a href="/"><i class="fa fa-sticky-note-o"></i> CustomNote</a></h1>
<nav>
<ul class="navbar-list">
<li class="navbar-item"><a href="/">Home</a>
</li>
<li class="navbar-item"><a href="/about">About</a>
</li>
<li class="navbar-item navbar-right"><a href="#">Log out</a>
</li>
</ul>
</nav>
</header>
<main>
<section class="todo">
<div class="dismiss-button">×</div>
<h2>buy groceries</h2>
<div class="todo-body">
<ul class="todo-list">
<li>milk</li>
<li>tea</li>
<li>flour</li>
<li>bananas</li>
</ul>
</div>
</section>
<section class="todo">
<div class="dismiss-button">×</div>
<h2>grab a beer with Chris</h2>
<div class="todo-body">
<p class="indent-wrapped"><span class="where">where:</span> Squirrels</p>
<p class="indent-wrapped"><span class="when">when:</span> Thursday 9/29, 4:00</p>
</div>
</section>
<section class="todo">
<div class="dismiss-button">×</div>
<h2>take out the trash</h2>
<div class="todo-body">
<p class="indent-wrapped"><span class="when">when:</span> Monday Night</p>
</div>
</section>
<section class="todo">
<div class="dismiss-button">×</div>
<h2>call the bank re: loan</h2>
<div class="todo-body">
<p class="indent-wrapped"><span class="who">who:</span> Betty</p>
<p>541-757-1111</p>
</div>
</section>
<section class="todo">
<div class="dismiss-button">×</div>
<h2>paint the bedroom</h2>
<div class="todo-body">
<p>probably need 2 gallons (polar-bear-in-a-blizzard white)</p>
</div>
</section>
<div class="add-note-button-container">
<button id="add-note-button">+</button>
</div>
</main>
<footer>
<div class="copyright">
Copyright © 2021
</div>
</footer>
</body>
</html>