Skip to content

Commit a48b2da

Browse files
Merge pull request #52 from WebDevSimplified/fix-mobile-styles
Fix Mobile Styles On Specificity Page
2 parents b382340 + 761d306 commit a48b2da

File tree

1 file changed

+9
-2
lines changed

1 file changed

+9
-2
lines changed

src/blogComponents/cssSpecificityDisplay/CssSpecificityDisplay.jsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,27 +9,34 @@ const WRAPPER_STYLES = {
99

1010
const CONTAINER_STYLES = {
1111
display: "flex",
12+
margin: "auto 0",
13+
width: "100%",
14+
justifyContent: "center",
1215
}
1316

1417
const NUMBER_WRAPPER_STYLES = {
1518
margin: ".6rem",
1619
textAlign: "center",
20+
flexGrow: "1",
21+
flexBasis: "2.5em",
22+
maxWidth: "2.5em",
23+
fontSize: "2.5rem",
1724
}
1825

1926
const NUMBER_STYLES = {
2027
display: "flex",
2128
justifyContent: "center",
2229
alignItems: "center",
2330
borderRadius: ".3em",
24-
fontSize: "2.5rem",
25-
width: "2.5em",
31+
width: "100%",
2632
height: "2.5em",
2733
color: "var(--theme-text)",
2834
fontVariantNumeric: "tabular-nums lining-nums",
2935
}
3036

3137
const NUMBER_DESCRIPTOR_STYLES = {
3238
color: "var(--theme-text-lighter)",
39+
fontSize: ".75rem",
3340
}
3441

3542
const INPUT_STYLES = {

0 commit comments

Comments
 (0)