😡 React Destroys Your CSS Layout | Full Screen React Components

😡 React Destroys Your CSS Layout | Full Screen React Components

React's nested divs can destroy your otherwise excellent full page app layout.

👇 Follow Me On Social Media:

[saaika]

Note: You should check if everyting looks allright on mobile as vh/dvh/lvh/svh usually dont work good with mobile. + never use it for typography as it will block zooming in/out.

[LopissoErgando-ookd]

Tnx. I was literally struggling with this problem in the morning

[orenfarhi]

The root can be changed to any other element. Also, you can use css's "display: contents" on the root or any other element to eliminate it's effect on the DOM display layout.

[mbbcriss]

I had a project for uni and i kept running into this every time thank for the tip

[frontend]

This helped me alot, I was wondering about this issue since it was working without react

[ruantristancarlinsky]

My favorite web dev teacher🙏. When is your Next.js series dropping Mr Gray?

[kirksurber]

Well, this just saved me a lot of future headaches wondering why they aren't working.

[Flipping_myFinds]

Thank you so much!!! This helps me tons 😁

[lilyydotdev]

I find that using 100vh creates an annoying effect on mobile where the URL bar is counted as part of the viewport leading to you being able to scroll down slightly. You can get around this by just applying a height of 100% to html, body, #root. Though you need to be careful with other container elements that might also wrap your content.

[richardthompson]

I am new to learning all of this so excuse my lack of understanding. As I learned html, we progressed away from in-line styling and traded that for the organization of having the CSS file to keep everything together. Now we are learning bootstrap, seeing this makes me feel like these new libraries are moving some style back to the html file, more like in-line again. Wouldn’t it be more organized if these libraries worked with the CSS file?

[NiceChange]

Great tip ..this one can become very frustrating..thanks for sharing

[Jay-kxjf]

Can also apply "display: contents" on root and app

[joopie]

How does your page not have a scrollbar? Usually the body has a padding/margin by default and doing a height of 100 will cause a scrollbar to appear since the browser does not take into account the size of the padding

[dailynews]

You can do it with one div tag. Not two div . I think

[mahmoudzakria]

Honestly, I don't consider that as a big issue since it's customizable, but I share the same empathy in general that yeah react ruined at least for me my DX as a developer for a long time 😂

[عبداللهابورابح-يق]

Thank you please uploaded all explain with translation like this

[batmanfromnorth]

Shouldn't you apply height of 100% to all parent elements of App class?

[sirdragoon]

Hi dave, can you please make a tutorial on how react supports server side rendering

[aweklin]

Thanks for this video, I am dying to see the full css used here because I need a layout that always sticks the footer where it belongs without using the position: absolute/fixed and bottom: 0.
Please help me with this flex layout thing.

[advanceringnewholder]

that's why it's better to use class or per component css