Skip to content

Commit e34b794

Browse files
authored
fix: mobile responsive layout on DB page (#506)
refactor: update layout and responsiveness of DBVersionIndex component Modified the DBVersionIndex component to enhance layout responsiveness by adjusting max-width properties and grid structure for better display on various screen sizes.
1 parent d356419 commit e34b794

File tree

1 file changed

+2
-2
lines changed

1 file changed

+2
-2
lines changed

src/routes/_libraries/db.$version.index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ function DBVersionIndex() {
5656
<h3 className="text-3xl text-center mx-auto leading-tight font-extrabold tracking-tight sm:text-4xl lg:leading-none mt-2">
5757
Blazing fast apps 🔥
5858
</h3>
59-
<p className="mt-6 text-xl w-3xl mx-auto leading-7 opacity-75 max-w-[500px] lg:max-w-[800px]">
59+
<p className="mt-6 text-xl mx-auto leading-7 opacity-75 max-w-[90vw] sm:max-w-[500px] lg:max-w-[800px]">
6060
Built on a{' '}
6161
<a
6262
href="https://github.com/electric-sql/d2ts"
@@ -70,7 +70,7 @@ function DBVersionIndex() {
7070
apps.
7171
</p>
7272
</div>
73-
<div className="grid grid-flow-row grid-cols-2 gap-x-10 lg:gap-x-12 gap-y-4 mx-auto max-w-[500px] lg:max-w-[650px]">
73+
<div className="grid grid-flow-row grid-cols-1 sm:grid-cols-2 gap-x-4 sm:gap-x-10 lg:gap-x-12 gap-y-4 mx-auto max-w-[90vw] sm:max-w-[500px] lg:max-w-[650px]">
7474
<div>
7575
<h4 className="text-xl my-2">🔥 Blazing fast query engine</h4>
7676
<p>For sub-millisecond live queries.</p>

0 commit comments

Comments
 (0)