diff --git a/sites/svelte.dev/src/routes/_components/Try.svelte b/sites/svelte.dev/src/routes/_components/Try.svelte
index 65ddf2aecc..d75ec4c905 100644
--- a/sites/svelte.dev/src/routes/_components/Try.svelte
+++ b/sites/svelte.dev/src/routes/_components/Try.svelte
@@ -6,16 +6,19 @@
@@ -41,7 +44,7 @@
.grid {
display: grid;
- gap: 1em;
+ gap: 2em;
margin: 0 0 4rem 0;
}
@@ -49,13 +52,6 @@
margin-bottom: 0;
}
- @media (min-width: 900px) {
- .grid {
- grid-template-columns: repeat(var(--columns), 1fr);
- gap: 7rem;
- }
- }
-
.try {
width: 100%;
margin: 0 auto;
@@ -64,20 +60,38 @@
}
.copy {
- text-align: center;
- margin: 0 0 8rem;
+ text-align: left;
}
h2 {
display: inline-block;
width: 25rem;
- margin: 4rem 0 1rem;
+ margin: 0 0 1rem;
font-size: var(--sk-text-xl);
- text-align: justify;
}
a {
color: inherit;
text-decoration: underline;
}
+
+ @media (min-width: 900px) {
+ .grid {
+ grid-template-columns: repeat(var(--columns), 1fr);
+ gap: 7rem;
+ }
+
+ .copy {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ order: 2;
+ }
+
+ .copy div {
+ max-width: 15em;
+ text-align: center;
+ }
+ }
diff --git a/sites/svelte.dev/svelte.config.js b/sites/svelte.dev/svelte.config.js
index d05335d4e9..fd067f826e 100644
--- a/sites/svelte.dev/svelte.config.js
+++ b/sites/svelte.dev/svelte.config.js
@@ -5,5 +5,9 @@ import adapter from '@sveltejs/adapter-vercel';
export default {
kit: {
adapter: adapter()
+ },
+
+ vitePlugin: {
+ inspector: true
}
};