diff --git a/src/components/PackTile.js b/src/components/PackTile.js
index 4a88c8913..dcd30d7ec 100644
--- a/src/components/PackTile.js
+++ b/src/components/PackTile.js
@@ -78,6 +78,10 @@ const PackTile = ({
margin-bottom: 1em;
flex-direction: row;
`}
+
+ @media screen and (max-width: 760px) {
+ flex-direction: row;
+ }
`}
onClick={() => handlePackClick(id)}
>
@@ -104,6 +108,10 @@ const PackTile = ({
display: none;
}
`}
+
+ @media screen and (max-width: 760px) {
+ display: none;
+ }
`}
/>
{featured && (
diff --git a/src/components/SegmentedControl.js b/src/components/SegmentedControl.js
index d8980f6b0..4d8af268d 100644
--- a/src/components/SegmentedControl.js
+++ b/src/components/SegmentedControl.js
@@ -50,6 +50,7 @@ const SegmentedControl = ({ items, onChange, className }) => {
`}
>
{
.dark-mode & {
background-color: var(--tertiary-background-color);
input {
- background: var(--color-dark-500);
+ background: var(--color-dark-400);
&::placeholder {
color: var(primary-text-color);
@@ -470,6 +470,8 @@ const QuickstartsPage = ({ data, location }) => {
{
justify-content: space-between;
align-text: center;
+ span {
+ color: var(--text-color);
+ }
+
strong {
- color: var(--color-neutrals-700);
+ color: var(--text-color);
}
`}
>
-
+
Showing {filteredQuickstarts.length} results for:{' '}
{search || getDisplayName()}
@@ -526,19 +528,6 @@ const QuickstartsPage = ({ data, location }) => {
/>
{filteredQuickstarts.map((pack) => (
(
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.5rem;
-
- .light-mode & {
- color: var(--color-neutrals-800);
- }
+ color: var(--color-neutrals-800);
`}
>
{children}