I am facing an issue with my YouTube-style header in CSS. When I resize my website, the width of the header expands and my icons go beyond the boundaries of the site. However, when I try the same thing on , its width does not increase no matter how small you make it. Any suggestions on why this is happening? I want to avoid using overflow:hidden; as it cuts out my icons when the website size is reduced, but I still want the icons to be visible like in the YouTube mobile version.
Here's a link to test it out: https://codesandbox.io/s/material-ui-icon-avatar-example-forked-exzhzj?file=/src/app.css&resolutionWidth=153&resolutionHeight=671
Code:
import React from "react";
import ReactDOM from "react-dom";
import { makeStyles } from "@material-ui/core/styles";
import Avatar from "@material-ui/core/Avatar";
import NotificationsIcon from "@material-ui/icons/Notifications";
import MenuIcon from "@material-ui/icons/Menu";
import SearchIcon from "@material-ui/icons/Search";
import VideoCallIcon from "@material-ui/icons/VideoCall";
import AppsIcon from "@material-ui/icons/Apps";
import "./app.css";
export default function EmailAvatar() {
return (
<div className="box-container">
<div className="header">
<div className="header__left">
<MenuIcon />
{/* <img
className="header__logo"
src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg"
alt=""
/> */}
</div>
<div className="header__input">
<input placeholder="Search" type="text" />
</div>
<div className="header__icons">
<span title="Create">
<VideoCallIcon className="header__icon" />
</span>
<span>
<AppsIcon className="header__icon" />
</span>
<span title="Notifications">
{" "}
<NotificationsIcon className="header__icon" />
</span>
<Avatar
alt="Remy Sharp"
src="https://www.shutterstock.com/image-photo/skeptic-surprised-cat-thinking-dont-260nw-1905929728.jpg"
/>
</div>
</div>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<EmailAvatar />, rootElement);Image of the problem:
https://i.sstatic.net/GcJuo.png
YouTube mobile view for reference: