Something strange is unfolding, and I find myself confused about the overall situation. Let me try to explain it the best I can.
On my landing page, there are three different components:
const Home = () => {
return (
<>
<Head>
<title>Costurería Gloria</title>
</Head>
{/* Presentation */}
<Presentation />
{/* Description */}
<Description />
{/* Types of works */}
<DifferentWorks />
</>
);
};
export default Home;
Below are the styles for the first two components (the third one is not relevant!)
(You may not need to go through all the styles, but they are there just in case!)
Presentation:
(styles for Presentation component)Description:
(styles for Description component)As I attempted to make the components responsive, the presentation component appeared fine, while the description component had some issues.
This is how the presentation appears:
https://i.sstatic.net/dbGyz.png
And this is how the description looks:
https://i.sstatic.net/fPmML.png
However, the description component looks skewed when I tried to make the screen smaller:
https://i.sstatic.net/AAGye.png
Upon inspecting the classes of each component in Chrome DevTools, I noticed some anomalies. The presentation component has the correct class name 'presentation,' but the description component also carries the class 'Presentation,' even though it should have its own distinct class. Furthermore, the third component, Description, has the class 'Description' but lacks any associated items. This issue has occurred before. I am puzzled by this behavior. Can someone shed light on why this is happening?
Thank you for your attention!