Update docs/source/css.rst

docs/source/css.rst

@@ -1,19 +1,47 @@
-.leaflet-popup-content > table img {
+CSS
-    width: 300px;
+=======
-   }
- .leaflet-popup-content > img { /*for other leaflet maps you can add rule as well*/
-    width: 300px;
-   }
 
 
-   .modal-content {
+Quartz provides CSS overrides at map level.
-    position: relative;
+
-    display: flex;
+To override the default CSS, enter your CSS into the Map CSS box on the map edit page.
-    flex-direction: column;
+
-    width: fit-content;
+
-    pointer-events: auto;
+Example: Image Sizing
-    background-clip: padding-box;
+--------------------------------
-    border-radius: 20px;
+
-    outline: 0;
+To change pop-up image sizing, you can use something like below.
-    color: black;
+
-}
+.. code-block:: css
+
+  .leaflet-popup-content > table img {width: 300px;}
+  .leaflet-popup-content > img { width: 300px;}
+
+
+Example: Modal Info Box
+------------------------------------------
+
+To change Modal Info Box, you can use something like below.
+
+.. code-block:: css
+
+  .modal-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+  pointer-events: auto;
+  background-clip: padding-box;
+  border-radius: 20px;
+  outline: 0;
+  background-color: cadetblue;
+  color: #fff;
+  }
+
+
+
+There is no need to add "!important" to CSS elements as map.css is loaded last and has precendence.
+
+
+
+