add media queries for small devices (576px)

2 files changed, 47 insertions, 4 deletions

diff --git a/assets/css/media-queries.css b/assets/css/media-queries.css
new file mode 100644
index 0000000..4420677
--- /dev/null
+++ b/assets/css/media-queries.css
@@ -0,0 +1,41 @@
+/*
+*** Breackpoints ***
+*
+* Small devices:        576px;
+* Medium devices:       768px;
+* Large devices:        992px;
+* Extra large devices:  1200px;
+*
+*/
+
+@media only screen and (min-width: 576px) {
+    /* SECTIONS */
+    .section {
+        padding: 0 5%;
+    }
+
+    /* CONTENT */
+    .single__content {
+        padding: 1.45rem 5%;
+    }
+
+    /* CONTACT */
+    .contact__form__field > input {
+        max-width: 25rem;
+    }
+
+    /* FOOTER */
+    .contact-info__info {
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+
+    .footer__agreement {
+        padding: 1.45rem 5%;
+    }
+
+    /* PAGINATION */
+    .pagination {
+        padding: 0 15%;
+    }
+}
diff --git a/assets/css/style.css b/assets/css/style.css
index 1719fa9..63acc0c 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -112,6 +112,10 @@
     width: 100%;
 }
 
+.contact__form__field > input {
+    width: 85%;
+}
+
 /* FOOTER */
 .footer {
     background-color: var(--accent);
@@ -136,10 +140,8 @@
 }
 
 .contact-info__info {
-    display: grid;
-    grid-auto-rows: auto;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
+    display: flex;
+    flex-direction: column;
     justify-content: center;
 }