Nextjs does not display elements

user_17408627 0
Viewed 33

I own a website and when i want to make a contact section for it. I am using the following code

      <section className={styles.contact}>
        <p>Test</p>
      </section>

I which I have made a import statement to import a style sheet like so import styles from '../styles/Home.module.css' In my style sheet, i used the following code for the contact property

.contact {
  height: 300%;
  width: 300%;
  margin: 0;
  padding-top: 2rem;
}

with my container having the size of 300vh

.container {
  height: 250vh;
  overflow: hidden;
  overflow-x: hidden;
}

But when i check it, I do not see the <p>test</p> What happens

Any idea why and how I can fix it?

Google and stack overflow don't seem to have any information on this

Regards

next.js css html
1 Answers

What I have seen is that as you are giving fix height to .container your contact section overflowing and thus not showing. remove fix height: 300vh from .container and you will see Test. Then style on different way. Or you can also remove overflow: hidden so that overflowing element become visible on scroll.

user_40865250
Related