Facing Issue on Layout on Extra Small Screen
I am trying to make Landing page of an organization(basically copying its design). Link to codepen is this: https://codepen.io/anurag1989/pen/jOdayJR
The issue I am facing is when the screen size is getting less than 270px, the <body> (and hence its children <head> and <main>) element is shrinking more than the screen size (when using in responsive mode). This is leading to a blank space between the Screen and <body>. I have tried different ways like using display: grid for <main> but in that case, the .container is flowing out of <main> at size less than 290px.
What is causing this issue as I am not able to figure it out. Please also comment on code quality and any tip to iprove it.
3 Replies
the input elements have a min-width, and together with the inline padding,there is not enough space. So look at removing/adjusting that
Thank you Mark for you help. I was stuck on this problem for past 1 day. But can you tell me where the min-width is set? Because I can not see it in .input or input. Thanks Again!!
It is a default on input text