Worked on the responsiveness on the phone and small laptops

index.html

@@ -51,10 +51,14 @@ <h2 class="todaysDate"></h2>
 				<h1>Saint of the Day</h1>
 				<span><img src="https://img.shields.io/badge/Notion-000000.svg?style=for-the-badge&amp;logo=Notion&amp;logoColor=white" alt="notion logo" title="Notion" /> widget</span>
 			</div>
+			<hr class="hrLine">
 			<div class="flower_container">
 				<p>Add floral corners?</p>
 				<div>
-					<input type="radio" name="flowerOptions" value="true" checked /><label for="flowerOption">Yes</label> <input type="radio" name="flowerOptions" value="false" /><label for="flowerOption">No</label>
+					<input type="radio" name="flowerOptions" value="true" checked id="flowerOptionTrue" />
+					<label for="flowerOptionTrue" >Yes</label>
+
+					<input type="radio" name="flowerOptions" value="false" id="flowerOptionFalse" /><label for="flowerOptionFalse">No</label>
 				</div>
 			</div>
 			<div class="input_wrapper">
@@ -63,6 +67,8 @@ <h1>Saint of the Day</h1>
 					<button type="button" id="widgetPagePreviewBtn" style="cursor: pointer">Page Preview</button>
 				</div>
 			</div>
+			<hr class="hrLine">
+
 			<footer>
 				<p>₊ ⊹ Made with ♡ by <a href="https://xiacodes.carrd.co/" target="_blank" rel="noopener noreferrer">XiaCodes</a>  ⊹ ₊</p>
 			</footer>

sass/main.scss

@@ -15,13 +15,16 @@ body {
 		padding: 20px 10px;
 		box-shadow: 0 2px 3px 0px rgba(94, 68, 68, 0.224);
 
-
+		.hrLine {
+			border: none;
+			border-top: 2px dotted black;
+			width : 40%;
+			margin: 10px 0
+		}
 
 		.title_container {
 			@include flex(column);
 			gap: 5px;
-			margin-bottom: 10px;
-
 
 			h1 {
 				font-family: "Bacasime Antique", serif;
@@ -40,14 +43,17 @@ body {
 			}
 		}
 
-		.flower_container{
+		.flower_container {
 			@include flex(acen);
 			gap: 10px;
 
 			div {
 				@include flex(acen);
-			gap: 5px;
+				gap: 5px;
 
+				input[type="radio"] {
+					accent-color: #cc6368;
+				}
 			}
 		}
 
@@ -68,36 +74,35 @@ body {
 
 				&:hover,
 				&:focus,
-				&:active	 {
+				&:active {
 					background-color: #fdf0ff;
 				}
 				border-radius: 10px;
 				-webkit-border-radius: 10px;
 				-moz-border-radius: 10px;
 				-ms-border-radius: 10px;
 				-o-border-radius: 10px;
-}
+			}
 		}
 
 		footer {
 			a {
 				text-decoration: underline wavy #d89195;
 				color: #cc6368;
 				font-weight: bold;
-			
+
 				&:hover {
-					color: #c89d9f;
+					color: #d67fa3;
 				}
 			}
 		}
 
-
 		border-radius: 10px;
 		-webkit-border-radius: 10px;
 		-moz-border-radius: 10px;
 		-ms-border-radius: 10px;
 		-o-border-radius: 10px;
-}
+	}
 
 	.card_wrapper {
 		// background-color: #f0dfd7;
@@ -155,7 +160,6 @@ body {
 			border: 1px solid black;
 
 			.header {
-				// background-color: rgb(162, 112, 104);
 				width: 100%;
 				border-top-right-radius: 10px;
 				border-top-left-radius: 10px;
@@ -234,7 +238,7 @@ body {
 							background-color: #ffffff;
 							cursor: url(https://cur.cursors-4u.net/symbols/sym-1/sym48.cur), auto !important;
 							box-shadow: 0 2px 3px 0px rgba(94, 68, 68, 0.465);
-	
+
 							&:hover {
 								background-color: #f0d7d8b9;
 							}
@@ -251,8 +255,6 @@ body {
 						}
 					}
 
-
-
 					border-radius: 10%;
 					-webkit-border-radius: 10%;
 					-moz-border-radius: 10%;
@@ -296,3 +298,39 @@ body {
 		}
 	}
 }
+
+/* Phones */
+@media screen and (max-width: 500px) {
+	body {
+		margin: 60px 0;
+
+		.options_container {
+			width: 80%;
+		}
+	}
+}
+
+/* Large Screens - Laptop & Computer */
+@media screen and (min-width: 1201px) and (max-width: 1600px) {
+	body {
+		background-color: blueviolet;
+
+		.card_wrapper {
+			margin-top: 10px;
+			transform: scale(0.8);
+			-webkit-transform: scale(0.8);
+			-moz-transform: scale(0.8);
+			-ms-transform: scale(0.8);
+			-o-transform: scale(0.8);
+		}
+
+		.options_container {
+			margin-top: -50px;
+			transform: scale(0.8);
+			-webkit-transform: scale(0.8);
+			-moz-transform: scale(0.8);
+			-ms-transform: scale(0.8);
+			-o-transform: scale(0.8);
+		}
+	}
+}

src/main.css

@@ -31,13 +31,18 @@ body .options_container {
   -ms-border-radius: 10px;
   -o-border-radius: 10px;
 }
+body .options_container .hrLine {
+  border: none;
+  border-top: 2px dotted black;
+  width: 40%;
+  margin: 10px 0;
+}
 body .options_container .title_container {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   gap: 5px;
-  margin-bottom: 10px;
 }
 body .options_container .title_container h1 {
   font-family: "Bacasime Antique", serif;
@@ -64,6 +69,9 @@ body .options_container .flower_container div {
   align-items: center;
   gap: 5px;
 }
+body .options_container .flower_container div input[type=radio] {
+  accent-color: #cc6368;
+}
 body .options_container .input_wrapper {
   display: flex;
   justify-content: center;
@@ -96,7 +104,7 @@ body .options_container footer a {
   font-weight: bold;
 }
 body .options_container footer a:hover {
-  color: #c89d9f;
+  color: #d67fa3;
 }
 body .card_wrapper {
   background-color: #f0d7d8;
@@ -276,4 +284,36 @@ body .card_wrapper .wrapper .footer {
 }
 body .card_wrapper .wrapper .footer h2 {
   font-family: "Bacasime Antique", serif;
+}
+
+/* Phones */
+@media screen and (max-width: 500px) {
+  body {
+    margin: 60px 0;
+  }
+  body .options_container {
+    width: 80%;
+  }
+}
+/* Large Screens - Laptop & Computer */
+@media screen and (min-width: 1201px) and (max-width: 1600px) {
+  body {
+    background-color: blueviolet;
+  }
+  body .card_wrapper {
+    margin-top: 10px;
+    transform: scale(0.8);
+    -webkit-transform: scale(0.8);
+    -moz-transform: scale(0.8);
+    -ms-transform: scale(0.8);
+    -o-transform: scale(0.8);
+  }
+  body .options_container {
+    margin-top: -50px;
+    transform: scale(0.8);
+    -webkit-transform: scale(0.8);
+    -moz-transform: scale(0.8);
+    -ms-transform: scale(0.8);
+    -o-transform: scale(0.8);
+  }
 }/*# sourceMappingURL=main.css.map */