I am facing an issue with responsiveness in my div container. Inside the square-shaped frame, I have a h2 tag that does not adjust properly when viewed on different devices such as mobile and browsers. Despite setting up media queries to make it responsive, the h2 tag remains outside the frame when shrunk. How can I ensure that the h2 tag stays inside the frame and adjusts its size accordingly?
home.js:
function Home() {
return (
<div className="home-page">
<div className="home-header">
<div className='home-first>
<h2>BAROO</h2>
</div>
</div>
</div>
)
}
export default Home
Home.css:
.home-page {
display: flex;
flex-direction: column;
flex: 0.65;
max-width: 100%;
width: 100%;
background-color: #00ACFE;
}
.home-header {
flex-direction: column;
display: flex;
border-radius: 20px;
background-color: rgb(200, 244, 244);
max-width: 90%;
margin-left: 65px;
margin-top: 0px;
height: 700px;
width: 100%;
}
h2 {
font-size: 100px;
transform: translate(-50%, -50%);
margin-left: 700px;
margin-top: 200px;
}
@media screen and (max-width: 800px) {
.home-header {
max-width: 90%;
margin-left: auto;
margin-right: auto;
}
.home-first >h2{
font-size: 100px;
width: 100%;
}
}