Hey there! I am currently using a flexible div to house the h1 and arrow image (you can see it https://i.sstatic.net/OgVBp.png). I was wondering if there is a way to utilize a material UI component to give this "black box" a new look?
Here is the jsx code snippet for the "black box":
<div className={homeStyles.flex}>
<span>
<h1 className={homeStyles.landingText}>LISTEN TO ORCAS LIVE!</h1>{' '}
</span>
<span className={homeStyles.landingArrow}>
<Image src={arrow} width="30px" height="30px" />
</span>
</div>
CSS:
.flex {
z-index: 2;
display: flex;
flex-direction: row;
background-color: #000000;
position: relative;
border-radius: 20px;
max-width: 600px;
margin:0px auto 0 auto;
transform: translateY(-500%);
align-items: center;
justify-items: center;
width: 40vw;
height:5rem
}
.landingText {
font-family: 'Mukta', sans-serif;
font-style: normal;
font-size: 44px;
line-height: 100%;
color: white;
padding: 27px 10px 29px 33px;
position: relative;
}
.landingArrow {
position: relative;
top: 35%;
right: 2px;
width: 30px;
flex-shrink: 0;
padding-right: 4px;
}
I'm looking to revamp it because the current design isn't responsive across different screen sizes. For instance, the text and arrow image are not aligned in the center or end of the box on smaller screens: https://i.sstatic.net/q3U1c.png