Skip to content

Commit 282d85a

Browse files
hmthanhhmthanh
committed
update repsonsive
1 parent ee0765d commit 282d85a

5 files changed

Lines changed: 90 additions & 11 deletions

File tree

‎app/globals.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,10 +120,28 @@
120120
margin-left: calc(-50vw + 50%);
121121
}
122122

123+
/* Prevent horizontal overflow */
124+
body {
125+
overflow-x: hidden;
126+
}
127+
128+
/* Ensure all containers respect viewport width */
129+
* {
130+
max-width: 100%;
131+
box-sizing: border-box;
132+
}
133+
123134
@media (max-width: 768px) {
124135
.md-hide {
125136
display: none !important;
126137
}
138+
139+
/* Ensure mobile content fits */
140+
.mobile-container {
141+
padding: 0.5rem;
142+
margin: 0;
143+
width: 100%;
144+
}
127145
}
128146
}
129147

‎app/layout.jsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -80,13 +80,15 @@ export default async function RootLayout({ children }) {
8080
<link rel="preload" href="/serif/SurveyWithCode-Regular.woff2" as="font" type="font/woff2"></link>
8181
<link rel="preload" href="/serif/SurveyWithCode-Italic.woff2" as="font" type="font/woff2"></link> */}
8282
</head>
83-
<body className="nextra-banner-hidden">
83+
<body className="nextra-banner-hidden overflow-x-hidden">
8484
<ErrorBoundary>
8585
<ThemeProvider attribute="class" defaultTheme="light" enableSystem>
8686
<AuthProvider>
87-
<div dir="ltr">
87+
<div dir="ltr" className="min-h-screen w-full">
8888
<Header />
89-
{children}
89+
<div className="w-full">
90+
{children}
91+
</div>
9092
<Footer />
9193
</div>
9294
</AuthProvider>

‎app/test-responsive/page.jsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { Inter } from 'next/font/google'
2+
3+
const inter = Inter({ subsets: ['latin'] })
4+
5+
export default function ResponsiveTest() {
6+
return (
7+
<div className={`${inter.className} min-h-screen bg-gray-50 p-4`}>
8+
<div className="max-w-7xl mx-auto">
9+
<h1 className="text-3xl font-bold mb-8 text-center">Responsive Design Test</h1>
10+
11+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
12+
<div className="bg-white p-6 rounded-lg shadow-md">
13+
<h2 className="text-xl font-semibold mb-4">Mobile First</h2>
14+
<p className="text-gray-600">This layout starts with mobile design and scales up for larger screens.</p>
15+
</div>
16+
17+
<div className="bg-white p-6 rounded-lg shadow-md">
18+
<h2 className="text-xl font-semibold mb-4">Tablet View</h2>
19+
<p className="text-gray-600">On medium screens, content appears in 2 columns.</p>
20+
</div>
21+
22+
<div className="bg-white p-6 rounded-lg shadow-md">
23+
<h2 className="text-xl font-semibold mb-4">Desktop View</h2>
24+
<p className="text-gray-600">On large screens, content appears in 3 columns.</p>
25+
</div>
26+
</div>
27+
28+
<div className="bg-white p-6 rounded-lg shadow-md mb-8">
29+
<h2 className="text-2xl font-semibold mb-4">Width Test</h2>
30+
<div className="w-full bg-blue-100 p-4 rounded mb-4">
31+
<span className="text-sm text-blue-800">This should span 100% width on all devices</span>
32+
</div>
33+
34+
<div className="overflow-x-auto">
35+
<div className="min-w-96 bg-red-100 p-4 rounded">
36+
<span className="text-sm text-red-800">This has a minimum width and should scroll horizontally if needed</span>
37+
</div>
38+
</div>
39+
</div>
40+
41+
<div className="text-center text-sm text-gray-500">
42+
<p>Screen size: <span id="screen-size" className="font-mono"></span></p>
43+
<p>Viewport: <span id="viewport" className="font-mono"></span></p>
44+
</div>
45+
</div>
46+
47+
<script dangerouslySetInnerHTML={{
48+
__html: `
49+
function updateSizes() {
50+
document.getElementById('screen-size').textContent = screen.width + ' x ' + screen.height;
51+
document.getElementById('viewport').textContent = window.innerWidth + ' x ' + window.innerHeight;
52+
}
53+
updateSizes();
54+
window.addEventListener('resize', updateSizes);
55+
`
56+
}} />
57+
</div>
58+
)
59+
}

‎components/footer.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import LogoIcon from "@/icons/logo"
77
export default function Footer() {
88
return (
99
<footer className="bg-gray-100 pb-[env(safe-area-inset-bottom)] dark:bg-neutral-900 print:bg-transparent">
10-
<div className="mx-auto flex max-w-[90rem] gap-2 py-2 px-4 ">
10+
<div className="mx-auto flex max-w-[90rem] gap-2 py-2 px-2 sm:px-4">
1111
{/* <button
1212
title="Change language"
1313
className="h-7 rounded-md px-2 text-left text-xs font-medium text-gray-600 transition-colors dark:text-gray-400 hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-primary-100/5 dark:hover:text-gray-50"
@@ -31,15 +31,15 @@ export default function Footer() {
3131
<ThemeSwitch />
3232
</div>
3333
<hr className="dark:border-neutral-800" />
34-
<div className="mx-auto flex max-w-[90rem] justify-center py-4 text-gray-600 dark:text-gray-400 md:justify-end pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)]">
35-
<a className="focus-visible:nextra-focus flex flex-col items-start gap-2" target="_blank" rel="noreferrer" title="surveywithcode.com" href="https://surveywithcode.com">
34+
<div className="mx-auto flex max-w-[90rem] justify-center py-4 text-gray-600 dark:text-gray-400 md:justify-end pl-2 pr-2 sm:pl-[max(env(safe-area-inset-left),1.5rem)] sm:pr-[max(env(safe-area-inset-right),1.5rem)]">
35+
<a className="focus-visible:nextra-focus flex flex-col items-center md:items-start gap-2" target="_blank" rel="noreferrer" title="surveywithcode.com" href="https://surveywithcode.com">
3636
{/* <div className="flex w-full justify-between font-light gap-2">
3737
<span className="font-semibold">Powered by</span>
3838
<span>© 2025</span>
3939
</div> */}
40-
<div className="flex gap-2">
41-
<LogoIcon className="w-20" />
42-
<span className="font-bold w-14 leading-5">Survey With Code</span>
40+
<div className="flex gap-2 items-center">
41+
<LogoIcon className="w-16 sm:w-20" />
42+
<span className="font-bold text-sm sm:text-base w-12 sm:w-14 leading-4 sm:leading-5">Survey With Code</span>
4343
</div>
4444
</a>
4545
</div>

‎components/searchbar.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import Link from "next/link"
44

55
export default function SearchBar() {
66
return (
7-
<div className="max-md:hidden px-16">
7+
<div className="max-md:hidden px-2 sm:px-4 lg:px-16">
88
<div className="nextra-search relative flex items-center text-gray-900 dark:text-gray-300 contrast-more:text-gray-800 contrast-more:dark:text-gray-300">
99
<input
1010
spellCheck="false"
1111
autoComplete="off"
12-
className="rounded-lg px-3 py-2 transition-all w-full md:w-96 text-base leading-tight md:text-sm bg-black/[.05] dark:bg-gray-50/10 placeholder:text-gray-600 dark:placeholder:text-gray-400 contrast-more:border contrast-more:border-current [&amp;::-webkit-search-cancel-button]:appearance-none"
12+
className="rounded-lg px-3 py-2 transition-all w-full md:w-64 lg:w-96 text-base leading-tight md:text-sm bg-black/[.05] dark:bg-gray-50/10 placeholder:text-gray-600 dark:placeholder:text-gray-400 contrast-more:border contrast-more:border-current [&amp;::-webkit-search-cancel-button]:appearance-none"
1313
placeholder="Search"
1414
role="combobox"
1515
type="search"

0 commit comments

Comments
 (0)