I've been working tirelessly for the past 2 days to resolve an issue with my next.js project. This is my first time using this technology and I feel like I might be overlooking something crucial.
The problem revolves around three layers (as seen in the 3D View image below) that refuse to shrink below a certain width of 1040px. While the content within these layers resizes properly, there is a significant overflow resulting in a horizontal scroll bar. View screenshot illustrating the issue
I attempted to use @media rules on these layers but they seem ineffective. When I tried making these divs/layers display as {flex}, it caused major glitches across the rest of the website.
I will provide the code for index.js; the header and content are not problematic.
index.js
const Home = () => {
return (
<>
<main className={containerStyles.container}>
<Head>
<title>Title</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<div className={containerStyles.column}>
<div className={styles.main}>
<ul>
<div className={styles.wrapListItem}><Link href="../buy"><li className={styles.listItem}> <p>Buy </p> </li></Link></div>
<div className={styles.wrapListItem}><Link href="../doc"><li className={styles.listItem}> <p>Documentation</p> </li></Link></div>
<div className={styles.wrapListItem}><Link href="../tos"><li className={styles.listItem}> <p>TOS</p> </li></Link></div>
<div className={styles.wrapListItem}><Link href="../cart"><li className={styles.listItem}> <p>Cart</p> </li></Link></div>
</ul>
</div>
</div>
</main>
</>
)
}
export default Home;
global.css
@import 'Fontfaces.css';
html,
body {
cursor: url("../public/2x/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="680b1d1a1b071a28d4faf6e8fcfbfab5eef3efbcfbeefe79fafaf7ff16eceae2">[email protected]</a>"), auto;
background-color: black;
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
min-width: 1040px;
z-index: 0;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
:root{
--brand-yellow: rgb(255, 217, 0);
}
a:active{
color: var(--brand-yellow);
}
.glowing{
color: #ffef2a;
font-size: 20px;
-webkit-animation: glow 3s ease-in-out infinite alternate;
-moz-animation: glow 3s ease-in-out infinite alternate;
animation: glow 3s ease-in-out infinite alternate;
}
@media(max-width:1040px){
body{
max-width: @media(max-width:1040px){
body{
max-width: 100vw;
}
};
}
}
ContainerStyles.module.css
.container{
min-height: 80vh;
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: black;
}
.column{
width: 50%;
display: flex;
flex-direction: column;
}
@media(max-width:1040px){
.container{
transition: 1s;
flex-direction: column;
max-width: 100vw;
margin-right: 0px;
}
.column{
transition: 1s;
background-color: red;
width: auto;
max-width: 100vw;
margin-right: 0px;
}
}
Apologies for the messy formatting, it's my first time posting on StackOverflow.
Here is another screenshot showing the layout in a browser.Screenshot
Thank you in advance for any assistance! PS: The exaggerated transitions and colors are solely for debugging purposes, please don't judge xoxo