home page responsive for phone and tab

output/theme/css/home-styles.css

@@ -69,15 +69,26 @@
     background-color: #3E3F45;
     color: #ffffff;
 }
-/*.words-col-wrapper a{*/
-/*    text-decoration: none;*/
-/*    color: black;*/
-/*    border-color: black;*/
-/*    border-width: 2px;*/
-/*    padding: 20px 10px;*/
-/*    border-radius: 2px;*/
+.home-last-row{
+    border-top: 1px solid gray;
+    border-bottom: 1px solid gray;
+}
+.inline-block{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    padding-bottom: 20px;
+    gap: 5px;
+}
+.a-feat{
+    padding-top: 20px;
+}
+.a-feat a{
+    color: black;
+    font-size: 20px;
+}
 
-/*}*/
 @media only screen and (max-width: 480px){
     .img-style{
         padding-left: 20px;
@@ -108,4 +119,19 @@
     .style-img{
         padding-top: 20px;
     }
+}
+@media (min-width: 768px) and (max-width: 1024px){
+
+    .row-2-words{
+        padding-top: 10px;
+        padding-bottom: 20px;
+    }
+    .h2-title{
+        padding-top: 10px;
+    }
+    .words-col-wrapper{
+        /*adding spacing between the cols that are rows*/
+        padding-bottom: 30px;
+    }
+
 }

output/theme/css/home-styles.css~

@@ -1,10 +1,11 @@
 .row-one-words{
     text-align: center;
     font-size: 40px;
+    padding-top: 50px;
 }
-.row-one-img{
-    padding: 20px;
-}
+/*.row-one-img{*/
+/*    padding: 20px;*/
+/*}*/
 .height-row{
     height: 80%;
 }
@@ -16,8 +17,9 @@
 
 }
 .wrapper-col{
-    margin-top: 100px;
-    margin-left: 150px;
+    /*margin-top: 100px;*/
+    /*margin-left: 150px;*/
+    margin: auto;
     border-style: solid;
     border-color: #ffffff;
     box-sizing: border-box;
@@ -66,6 +68,24 @@
 .butt-style:hover{
     background-color: #3E3F45;
     color: #ffffff;
+}
+.home-last-row{
+    border-top: 1px solid gray;
+    border-bottom: 1px solid gray;
+    /*display: flex;*/
+    /*justify-content: center;*/
+    /*align-items: center;*/
+}
+.inline-block{
+    /*display: inline-block;*/
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /*padding-left: 20px;*/
+    /*padding-right: 20px;*/
+}
+.a-center{
+    
 }
 /*.words-col-wrapper a{*/
 /*    text-decoration: none;*/
@@ -94,11 +114,12 @@
         /*border-color: #ff4c85;*/
     }
     .row-2-words{
+        padding-top: 20px;
         padding-bottom: 10px;
     }
-    /*.row-margin{*/
-    /*    margin-bottom: 1px;*/
-    /*}*/
+    .row-margin{
+        margin-bottom: 10px;
+    }
     .h2-title{
         padding-top: 20px;
     }

output/theme/css/style.css

@@ -1,8 +1,4 @@
 
-#blue{
-    color: #0040D0;
-}
-
 .base-home{
     font-family: 'Nanum Gothic', sans-serif;
 }
@@ -14,3 +10,22 @@
 .navbar-light .navbar-nav .nav-link{
     color: black;
 }
+.base-footer{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 40px;
+    padding-bottom: 40px;
+    flex-wrap: wrap;
+    gap: 5px;
+}
+#terms-conditions{
+    color: #3E3F45;
+    padding-left: 40px;
+    text-decoration: none;
+    font-weight: bold;
+    font-size: 15px;
+}
+#terms-conditions:hover{
+    text-decoration: underline;
+}

output/theme/css/style.css~

@@ -1,20 +1,29 @@
 
-#blue{
-    color: #0040D0;
-}
-
-.navbar a {
-    color: black;
-}
-.navbar-light .navbar-toggler-icon{
-    color: black;
+.base-home{
+    font-family: 'Nanum Gothic', sans-serif;
 }
 .navbar {
     background-color: rgba(255, 255, 255, 0.6);
-    /*opacity: 0.6;*/
     box-shadow: 2px 2px 2px #A1A1A1;
+    padding: 20px;
 }
-/*}*/
-/*.try {*/
-/*    color: blue;*/
-/*}*/
+.navbar-light .navbar-nav .nav-link{
+    color: black;
+}
+.base-footer{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 40px;
+    padding-bottom: 40px;
+    flex-wrap: wrap;
+    gap: 5px;
+}
+#terms-conditions{
+    color: #3E3F45;
+    padding-left: 20px;
+    text-decoration: none;
+    font-weight: bold;
+    font-size: 10px;
+
+}