React Not Letting me Scroll the webpage

[noble owl]

Hi, Can I check your project? Please send me DM

[sturdy topaz]

Please do not take the help to DM.
Help should remain either in the thread or in the chats for a variety of reasons.

1. Keeping the chat here means others can correct people who may be giving uninformed or inexperienced advice. There's oversight.
2. Others will see the discussions and find answers when searching chat.
3. Anyone can answer as they're available, instead of waiting for just that one person because no one else has the context.

The issue you're having has nothing to do with react. It's 100% an issue with your CSS.

What is the styling of the parent element that contains the text? The styling is the problem.

If you want an element to be scrollable when the content exceeds it's size, you should set
overflow: auto or overflow: scroll

[flint charm]

I have issue can anyone help me out
./node_modules/canvas/build/Release/canvas.node
Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

when i execute the line of code in next js application

[fluid nacelle]

I can tell that my text from InfoSection is there because when I highlight my text on the webpage with my cursor it is there, just not visiable.

I tried to expand my text also of the "Discover Most Suitable Properties" to 9xl just to see if it will let me scroll. The text gets big enough to go off the page but does not create a scroll onto the webpage enabling me to scroll down.

[sturdy topaz]

Using a lot of absolute values [] with tailwind is really bad practice.
It's only supposed to be something you do in very rare cases, not something you do all the time.
px values are really bad for responsiveness too.

[sturdy topaz]

The styles you're using here are really bad.

Your container has a height of 600px. and you haven't given it a scroll behaviour.
The text is overflowing and if you set overflow-hidden you'll see that the text probably gets cut off.

You've set a specific height on the container.

The page isn't scrolling because the containers height isn't creating anything that needs to scroll,

Likely the specific height you've given the container is less than the size of the text

The text isn't going to be what creates a scroll.
The container the text is in is what creates a scroll.
But the container is only 600px in height

You should learn the fundamentals of CSS and HTML before taking on tailwind, there's a lot of things you're doing here that aren't good.

[fluid nacelle]

I had it all styled in CSS but wanted to convert it to tailwind because I’ve heard it’s more modern. Would CSS work better with what I’m trying to do in here?

Also if I create a container for my InfoSection and style it with CSS will that enable it to see my text and also create a scroll on the page?

[proper swift]

Do you know about W3School?

[fluid nacelle]

Yes I use that. Just not for this project. I was using the tailwind website

[proper swift]

You need to know about meaning of the Css before Tailwindcss in my experiences.

[sturdy topaz]

There's nothing wrong with using tailwind.
The problem is, you're using it pretty badly and you don't understand the CSS behind it to be able to understand why the scroll isn't working the way you expect it to.

Based on the classes you're using, and the CSS those classes provide, it's behaving exactly as it should.

If you want it to scroll based on overflowing content, then you should remove the styles that prevent it from doing that.
Based on the classes you've provided, the container element is 600px, thus it fits on the screen and doesn't have any reason to be scrollable, and it won't expand beyond that 600px in order to make the parent scroll.

If you set the height of a div to be 600, even if the overflow is visible and outside of that height, the parent element of the div isn't going to scroll, because even though your content is outside of the 600px height, you've explicitly set it to be 600px

You need to understand how HTML and CSS work first.