'Material UI grid with links is not responsive
I am trying the different style techniques but all is vain. Can someone help me to make my header responsive having links design with grid >> grid-items>> Links.
here is the code
import React from 'react'
import './Header.css'
import { Link } from 'react-router-dom'
import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import { AppBar } from '@mui/material';
import SportsEsportsIcon from '@mui/icons-material/SportsEsports';
import StorefrontIcon from '@mui/icons-material/Storefront';
import GamepadIcon from '@mui/icons-material/Gamepad';
import ChildCareIcon from '@mui/icons-material/ChildCare';
import Box from '@mui/material/Box';
export const Header = () => {
return (
// <div className='header'>
<div>
{/* <div className='plomxName'>PlomX</div> */}
<Box sx={{ flexGrow: 1 }}>
<AppBar style={{ background: 'black', height: '112px' }}>
<Grid container justifyContent="center" spacing={2} >
<div className='plomxName'>PlomX</div>
<div className='linksPadding'></div>
<Grid item sx={{ marginTop:3}}><SportsEsportsIcon sx={{color: 'white'}}/><Button><Link to="games" className='linkGame'>Games</Link></Button></Grid>
<Grid item sx={{ marginTop:3}}><StorefrontIcon sx={{color: 'white'}}/><Button><Link to="nftmarketplace" className='nft'>NFT Marketplace</Link></Button></Grid>
<Grid item sx={{ marginTop:3}}><GamepadIcon sx={{color: 'white'}}/><Button><Link to="getyourgameonblockchain" className='blockchain'>Get your game on Blockchain </Link></Button></Grid>
<Grid item sx={{ marginTop:3}}><ChildCareIcon sx={{color: 'white'}}/><Button><Link to="careers" className='career'>Careers </Link></Button></Grid>
</Grid>
</AppBar>
</Box>
</div>
)
}
### It is not good at mobile view, please recommend some easy or problem solving changes. thanks ###
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
