I've been struggling with this issue for over 48 hours now. I've attempted to troubleshoot by commenting out everything except the affected components and even swapping entire components around, but the problem persists. Oddly enough, rearranging their positions resolves the overlapping problem temporarily, but as soon as I revert back to the original layout, the elements overlap again. Any assistance would be greatly appreciated!
This code is from the pages/post/[slug].js page
import Head from "next/head";
import { useState } from "react";
import styles from "@/styles/product.module.scss";
import db from "@/utils/db";
import Header from "@/components/header";
import News from "@/models/News";
import MiniNews from "@/components/home/mini";
import Category from "@/models/Category";
import MainPost from "@/components/productPage/mainPost";
import ForCategories from "../../components/breakingNews/ForCategories";
import ForCreators from "@/components/breakingNews/ForCreators";
export default function product({ post, related, news, categories }) {
const [activeImg, setActiveImg] = useState("");
console.log(post);
const country = {
name: "Nigeria",
flag: "https://cdn.ipregistry.co/flags/emojitwo/ng.svg",
};
return (
<>
<Header country={country} />
<div className={styles.product}>
<div className={styles.product__container}>
<div className={styles.path}>
Home / {post.category.name} / {post.name}
</div>
<MiniNews news={news} />
<div className={styles.product__main}>
<div className={styles.product__main_one}>
<MainPost post={post} />
</div>
<div className={styles.product__main_two}>
<ForCategories
categories={categories}
header="All Categories"
bg="#379237"
/>
<ForCreators news={news} header="All Categories" bg="#379237" />
</div>
</div>
</div>
</div>
</>
);
}
export async function getServerSideProps(context) {
try {
const { params } = context;
const slug = params.slug;
await db.connectDb();
// fetching post data based on slug
let post = await News.findOne({ slug })
.populate({ path: "category", model: Category })
.lean();
if (!post) {
return {
notFound: true, // Return 404 page if post is not found
};
}
// fetching all post data
let news = await News.find()
.populate({ path: "category", model: Category })
.sort({ createdAt: -1 })
.lean();
// fetching all category data
let categories = await Category.find().sort({ createdAt: -1 }).lean();
return {
props: {
post: JSON.parse(JSON.stringify(post)),
news: JSON.parse(JSON.stringify(news)),
categories: JSON.parse(JSON.stringify(categories)),
},
};
} catch (error) {
console.error("Error fetching post:", error);
return {
props: {
post: null,
news: null,
categories: null,
},
};
}
}
Here is the styling for the slug page:
.product {
height: 100%;
background: #eeeeee;
&__container {
padding-top: 1rem;
}
.path {
max-width: 95%;
margin: 0 auto;
font-size: 10px;
color: #1e1e1e;
}
&__main {
padding: 20px 15px;
max-width: 95%;
margin: 0 auto;
position: relative;
margin-top: 1rem;
gap: 1rem;
background: #fff;
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 2rem;
&_one {
grid-column: span 9;
height: 100%;
}
&_two {
grid-column: span 3;
}
}
@media (max-width: 900px) {
&__main {
grid-template-columns: repeat(1, 1fr);
padding: 0 5px;
gap: 0;
}
}
}
The div elements with the style.product__main class behave correctly on larger screens. However, when the screen size is reduced below 900px, instead of displaying as a neat column, the element with the style.product__main_two class appears above the style.product__main_one element in an odd manner. I have exhausted all my ideas for fixing this and even changed the content of div two to just a paragraph, but the issue remains. There are no absolute positioning properties at play here aside from the relative positioning indicated in the main styling, which also does not solve the problem when removed. Your help would be greatly appreciated.