Merge pull request #52 from WebDevSimplified/fix-mobile-styles

Fix Mobile Styles On Specificity Page

Author: WebDevSimplified

src/blogComponents/cssSpecificityDisplay/CssSpecificityDisplay.jsx

@@ -9,27 +9,34 @@ const WRAPPER_STYLES = {
 
 const CONTAINER_STYLES = {
   display: "flex",
+  margin: "auto 0",
+  width: "100%",
+  justifyContent: "center",
 }
 
 const NUMBER_WRAPPER_STYLES = {
   margin: ".6rem",
   textAlign: "center",
+  flexGrow: "1",
+  flexBasis: "2.5em",
+  maxWidth: "2.5em",
+  fontSize: "2.5rem",
 }
 
 const NUMBER_STYLES = {
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
   borderRadius: ".3em",
-  fontSize: "2.5rem",
-  width: "2.5em",
+  width: "100%",
   height: "2.5em",
   color: "var(--theme-text)",
   fontVariantNumeric: "tabular-nums lining-nums",
 }
 
 const NUMBER_DESCRIPTOR_STYLES = {
   color: "var(--theme-text-lighter)",
+  fontSize: ".75rem",
 }
 
 const INPUT_STYLES = {