breakpoint update

index.html

@@ -15,52 +15,89 @@
     <!-- <link rel="stylesheet" href="style.css"> -->
     <title>Sahaja Yoga Sangham</title>
     <style>
-         /* Medium devices (tablets, 768px and up) */
- @media (min-width: 768px) {
-     img {
-         height: 40%;
-         width: 100%;
-     }
-
-     /* currently does not seem to work */
-     /* .gradient-bg {
-        background: rgb(250,157,111);
-        background: linear-gradient(0deg, rgba(250,157,111,1) 35%, rgba(253,207,184,1) 79%); 
-     } */
- }
- 
- body{
-     background-color: #ffe4e1;
- }
- /* need to find a link color solution */
-a{
-    color: blue;
-}
-.hLink{
-    color: black;
-}
-
-.hLink:hover{
-    color: black;
-    /* text-decoration: none; */
-}
- img {
-     width: 90%;
- }
-
- .card {
-     border: none;
-     border-radius: 0%;
- }
-
- .gradient-bg {
-    background: rgb(253,207,184);
-    background: linear-gradient(90deg, rgba(253,207,184,1) 31%, rgba(250,157,111,1) 95%); 
- }
-
- .default-bg{
-     background-color:  #ffe4e1;
- }
+        /* X-Small devices (portrait phones, less than 576px)
+No media query for `xs` since this is the default in Bootstrap */
+
+        /* Small devices (landscape phones, 576px and up) */
+        @media (min-width: 576px) {
+            p {
+                font-size: x-large;
+            }
+
+        }
+
+        /* Medium devices (tablets, 768px and up) */
+        @media (min-width: 768px) {
+            img {
+                height: 60%;
+                width: 100%;
+            }
+
+            p {
+                font-size: x-large;
+            }
+        }
+
+        /* Large devices (desktops, 992px and up) */
+        @media (min-width: 992px) {
+            p {
+                font-size: large;
+            }
+
+            img {
+                width: 90%;
+            }
+        }
+
+        /* X-Large devices (large desktops, 1200px and up) */
+        @media (min-width: 1200px) {
+            img {
+                /* max-height: 50%; */
+                max-width: 70%;
+            }
+        }
+
+        /* //XX-Large devices (larger desktops, 1400px and up) */
+        @media (min-width: 1400px) { 
+            img{
+                max-width: 50px;
+            }
+            }
+
+
+        body {
+            background-color: #ffe4e1;
+        }
+
+        /* need to find a link color solution */
+        a {
+            color: blue;
+        }
+
+        .hLink {
+            color: black;
+        }
+
+        .hLink:hover {
+            color: black;
+            /* text-decoration: none; */
+        }
+
+
+
+        .card {
+            border: none;
+            border-radius: 0%;
+        }
+
+        .gradient-bg {
+            background: rgb(253, 207, 184);
+            background: linear-gradient(90deg, rgba(253, 207, 184, 1) 31%, rgba(250, 157, 111, 1) 95%);
+        }
+
+        .default-bg {
+            background-color: #ffe4e1;
+        }
     </style>
 </head>