Small screen compatibility issue (site not responsive?)

Hello, I’m having some struggle trying to make the website fit for every screen
when the screen is very tight it shows something like this


Is there anyway I can avoid this ?

My recommendation, narrow your browser window as far as it will go and style your page to look nice in that narrow window. This will be your base CSS. Then slowly widen your browser window until you feel you have enough horizontal space to rearrange the elements on your page for a wider view port. Add a break point at that point and then style the break point for the wider screen. This is often referred to as a “mobile first” approach.

One more suggestion, do not use view port units (e.g. ‘vw’ or ‘vh’) for font sizes. Use ‘em’ or ‘rem’ instead. This is an accessibility issue. The user should be able to control the size of the text while viewing your page. Using view port units prevents them from doing that.

1 Like