Welcome Guest ( Log In | Register )

Outline · [ Standard ] · Linear+

 React & CSS Expert pls help

views
     
TSjackoats P
post Feb 24 2021, 11:03 AM, updated 4y ago

New Member
*
Probation
8 posts

Joined: Dec 2020
I am learning React now. I tried using media queries to hide 'RightMenu' component when the screen size goes below 768px. It does not work, as evident in this screen shot here:

user posted image

Please let me know where have I done wrong in this exercise. Thanks.

Here are the codes for your info:

App.tsx
===
CODE

import React from "react";
import "./App.css";
function App() {
 return(
   <div className="App">
   <nav className="navigation">Nav</nav>
   <div className="sidebar">Sidebar</div>
   <div className="leftmenu">Left Menu</div>
   <main className="content">Main</main>
   <div className="rightmenu">Right Menu</div>
   </div>
 );
}
export default App;




App.css
===
CODE

:root {
 --min-screen-height: 1000px;
}

.App {
 margin: 0 auto;
 max-width: 1200px;
 display: grid;
 grid-template-columns: 0.7fr 0.9fr 1.5fr 0.9fr;
 grid-template-rows: 2.75rem 3fr;
 grid-template-areas: "nav nav nav nav" "sidebar leftmenu content rightmenu";
 gap: 0.75rem 0.4rem;
}

.navigation {
 grid-area: nav;
}

.sidebar {
 min-height: var(--min-screen-height);
 grid-area: sidebar;
 background-color: aliceblue;
}

.leftmenu {
 grid-area: leftmenu;
 background-color: skyblue;
}

.content {
 min-height: var(--min-screen-height);
 grid-area: content;
 background-color: blanchedalmond;
}

.rightmenu {
 grid-area: rightmenu;
 background-color: coral;
}

@media screen and (orientation: portrait) and (max-width: 768px) {
 .App {
   grid-template-columns: 1fr;
   grid-template-areas: "nav" "content";
 }
}



src/components/RightMenu.tsx
===
CODE

import React from "react";
import { useWindowDimensions } from "../hooks/useWindowDimensions";

const RightMenu = () => {
 const { width } = useWindowDimensions();
 if (width <= 768) {
   return null;
 }
 return <div className="rightmenu">RightMenu</div>;
};

export default RightMenu;



src/hooks/useWindowsDimensions.ts
===
CODE

import { useState, useEffect } from "react";

export interface WindowDimension {
 height: number;
 width: number;
}

export const useWindowDimensions = (): WindowDimension => {
 const [dimension, setDimension] = useState<WindowDimension>({
   height: 0,
   width: 0,
 });

 const handleResize = () => {
   setDimension({
     height: window.innerHeight,
     width: window.innerWidth,
   });
 };

 useEffect(() => {
   window.addEventListener("resize", handleResize);
   handleResize();

   return () => {
     window.removeEventListener("resize", handleResize);
   };
 }, []);

 return dimension;
};

azlinrahim
post Feb 24 2021, 12:23 PM

New Member
*
Newbie
1 posts

Joined: Apr 2012


Your media query is correct as far as I can tell. But you can't really use grid-template-areas to hide elements. It's not meant for that. See here https://stackoverflow.com/questions/4866036...-template-areas

The simplest approach imo in your case would be to just hide the unwanted elements individually.

CODE

@media screen and (orientation: portrait) and (max-width: 768px) {
.App {
  grid-template-columns: 1fr;
  grid-template-areas: "nav" "content";
}
.leftmenu { display: none }
.rightmenu { display: none }
.sidebar { display: none }
}

TSjackoats P
post Feb 25 2021, 12:10 AM

New Member
*
Probation
8 posts

Joined: Dec 2020
Wow, brilliant! Thanks,

I will check out on the grid-template-areas too.


QUOTE(azlinrahim @ Feb 24 2021, 12:23 PM)
Your media query is correct as far as I can tell. But you can't really use grid-template-areas to hide elements. It's not meant for that. See here https://stackoverflow.com/questions/4866036...-template-areas

The simplest approach imo in your case would be to just hide the unwanted elements individually.

CODE

@media screen and (orientation: portrait) and (max-width: 768px) {
.App {
  grid-template-columns: 1fr;
  grid-template-areas: "nav" "content";
}
.leftmenu { display: none }
.rightmenu { display: none }
.sidebar { display: none }
}

*

 

Change to:
| Lo-Fi Version
0.0117sec    0.41    5 queries    GZIP Disabled
Time is now: 29th March 2024 - 01:41 PM