@mbalali63
Posted
Hi Rupesh Your work is great. Unfortunately your code is not accessible. But the considering the design comparison above, reveals that the font sizes shall be decreased. if the main container (the white box) height be set to 100%, with extra padding, then the overflow of text below the box will be removed. Good luck
@roopxx
Posted
Thanks @mbalali63 for the feedback! Yes, you are right the font is overflowing outside the main container but I don't know why it is happening in the preview tool above whereas when loading the site the design looks good to me on browser.
Can you once check the deployed link here ?
@mbalali63
Posted
Hi @roopxx In your style.css file, and in the definition of class qr_component, just comment or remove the line that is specifying height: 477px; it will be resolved.
.qr_component {
display: flex;
flex-direction: column;
align-items: center;
background-color: hsl(0, 0%, 100%);
/* height: 477px;*/
width: 320px;
border-radius: 30px;
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}
@roopxx
Posted
Thanks @mbalali63 , your suggestion fixed it.