Nextjs fails to render components

I have my own website and I'm trying to create a contact section for it. Here is the code snippet I am using:

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

Additionally, I've imported a style sheet with an import statement like this: 

import styles from '../styles/Home.module.css'
. In the style sheet, I defined the following styling for the contact property:

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

The container has a size of 300vh as per the following CSS:

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

However, when I check the website, I don't see the <p>test</p> element displayed. https://i.sstatic.net/YR6Xu.png

Does anyone know why this might be happening and how I can fix it? I couldn't find any relevant information on Google or stack overflow.

Thank you in advance

htmlcssnext.js

Answer №1

In my observation, the issue arises when a fixed height is applied to the .container class causing the contact section to overflow and not display properly. By removing the fixed height: 300vh from .container, you will be able to see the content correctly. Alternatively, try styling it in a different way. Another solution could be to remove overflow: hidden so that the overflowing element becomes visible upon scrolling.

Answer №2

To adjust the height of your .container, simply update it to height:100vh. The measurement "vh" corresponds to viewport height, with 300vh equating to 300% of the current viewport height. For example, if your current viewport height is 800 pixels, then 300vh would be 2400 pixels. It's important to note that using overflow:hidden ensures that any content outside of the viewport remains hidden. By setting the height to height:100vh, you can effectively address this issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Optimizing loading times for mobile banners through media queries

I currently have a standard size banner that loads when my page is accessed on a computer. However, I would like to optimize the loading speed by having a smaller version specifically for mobile devices using a media query. My main question is how does t ...

cssmobilemedia-queriesloadingbanner

CSS/React JS: I wish for the input fields to maintain focus even after entering values

I'm working with a confirmation code that is made up of 6 digits. I've noticed that when I click on an input field, it becomes focused and underlined in blue. However, as soon as I start typing in the next input field, the blue underline disappe ...

cssreactjs

"Crafting dynamic buttons with ASP.NET and CSS that adapt to various

Looking for advice on making a popup responsive. Currently experiencing an issue where the buttons go off-screen when adjusting window size, even after using percentages in CSS instead of pixels. Any suggestions? CSS: .modal { display: none; posi ...

c#cssasp.netpopupresponsive

Optimizing CSS table styles for larger cell width

In my CSS file, I have defined the following style: .ES{ max-width:20px; word-wrap:break-word; } However, when I apply this to my table... <table border="1" cellpadding="2" class="ES" > <tr> <td><input name="rbeso" type="radio" ...

htmlcsshtml-table

Unable to modify the background image in CSS when hovering over

I am struggling with changing the background image of the included div when hovering over the col-lg-3 div. I have 6 col-lg-3 in my container, each containing another div with background images and various CSS properties. Despite trying to change the backg ...

htmlcssbackgroundhover

The alignment of flexNav.js submenus is not consistent

I'm looking to implement the Flex Navigation plugin for a responsive menu. Although the plugin functions properly, I'm encountering an issue with the alignment of submenus under their respective parent items. You can view the problematic behavi ...

jqueryhtmlcss

Stop the bubbling effect of :hover

How can the hover effect be prevented for the parent element when hovering over its children? Please take a look at the following code snippet: const parent = document.getElementById('parent') parent.onmouseover = function testAlert(e) { /* ...

javascripthtmlcsssass

Troubleshooting compatibility issues between jQuery scrollLeft and Angular

As I attempt to programmatically scroll a horizontally overflowing div, I am confident that my final code should resemble the following: var $element = $('#widgetRow');//or maybe $('#widgetRow').parent(); //With 1 or more parent()& ...

javascriptjquerycssangularjsscroll

Delete the tag that comes before

Is there a specific tag like: <p id="name" onclick="javascript:var ele=context(this);">sumtext here</p><br> <p id="name" onclick="javascript:var ele=context(this);">newtext here</p><br> <script ...

javascripthtmldom-events

Stopping the spread of popup alerts: A comprehensive guide

I'm having trouble explaining this in English;-) Whenever I select an option, an alert pops up for each choice and I don't know how to stop it. Step 1: Choose the "aaaa" option, for example 1111 alert ... Step 2: Choose the "bbbb" option, for ...

javascriptjqueryhtml

"Struggling with setting the default checked state for single and multiple checkboxes? The ng-init method with checkboxModel.value=true seems to be ineffective – any suggestions

<input type="checkbox" ng-model="isChecked.value" ng-true-value="'yes'" ng-false-value="'no'" ng-click='handleCheckboxChange(isChecked.value, idx);' ng-init="isChecked.value=true" /> ...

javascripthtmljqueryangularjsangular

The 'for' attribute within HTML form labels

Is it crucial that my forms are created through a CMS? Without using jQuery, I can't determine the ID of the element to input here. Are these attributes really necessary? ...

htmlformsfor-loop

What is the best way to show a message within a specific HTML division with JavaScript?

Here's my attempt at solving the issue: <head> <script> function validateForm() { var username = document.forms["login"]["uname"].value; var password = document.forms["login"]["pwd"].value; if (username == "" || p ...

javascripthtml

Rows Within Rows That Outsize Their Parent

I am having trouble with the Bootstrap 4 grid layout while working on Vertical forms. My goal is to place a col-lg-9(child) inside a col-lg-6(parent). For instance: <div class="form"> <div class="row"> <div class="col-lg-6"> ...

htmlbootstrap-4

The Next.js API route successfully completed its operation without any response being sent

I recently completed a project using React/Next.js. Below are the file directories for the project: https://i.sstatic.net/pTwlk.png Currently, I am working on enabling the user to access /api/grademate/pay and display the success page upon completion. R ...

reactjsroutesnext.js

Update input box value using Javascript

Here is the code for a <script> tag on a webpage that includes an input box within the body of an HTML document- <script type="text/javascript" language="JavaScript"> window.onload = function addSearchText() { document.getElementB ...

javascripthtmlajax

Update Tagged Page with axios Integration in NextJs 13

In the latest version of NextJS 13, we have the option to revalidate tagged pages by using the fetch function. However, what if I want to use axios instead of fetch? Is there a way to set tags with axios? At the moment, the code for setting tags using fet ...

javascriptreactjsnext.jsnext.js13

The link tag cannot be used inside a division element

I am facing an issue with a button that has three different states represented by images. While the button looks great and functions well, it fails to perform its primary function - linking to another document. Upon clicking the button, no action is initi ...

javascripthtmlcss

Using Javascript's Speech Recognition to activate a button

I am new to using JavaScript Speech Recognition and decided to work with the Annyang library. My goal is to automatically trigger the "show date" button when the user says 'hello', without actually clicking the button. However, I've been fac ...

javascripthtmlonclickspeech-recognitionannyang

Navigating and Organizing in Ionic Service Factory

Apologies for the beginner question. I am looking to incorporate filtering and sorting by name on my webpage. However, I have encountered two issues after attempting to implement this functionality using a factory in services.js: When typing a search ter ...

javascripthtmlangularjsionic-framework