Ansul
Ansul

Reputation: 420

Till which device width size should I make web pages responsive?

I made my webpages responsive but a horizontal bar appears when width is less than 350px, I found out that the navbar is crossing the boundary. Should I fix this? If yes how?

Upvotes: 3

Views: 3399

Answers (3)

Sypder
Sypder

Reputation: 330

Try removing the scroll bar, but if the responsiveness is good upto 320px then your good.

Upvotes: 1

Alex Kuzmin
Alex Kuzmin

Reputation: 44

Nowadays normally the minimal responsive width is used to be 320px (i.e. width of the first iPhone SE).

You can use Chrome Developer Tools in mobile simulation mode, there are the predefined widths and accordingly the popular devices having this width.

Upvotes: 1

Angelosp
Angelosp

Reputation: 181

The smallest width you should make responsive code is 320px.

When you get horizontal scroll that means that you have either:

  • Content which does not wrap
  • Have elements with a min-width or an element with min-width bigger than the viewport
  • Large margins/paddings squeezing your content
  • Though the body has the width of the viewport something within has a bigger width than the viewport
  • An absolute positioned element or an element positioned outside of the viewport.

Some people usually use body { overflow-x: hidden; } to mitigate or prevent any horizontal scrolling. But I would advise against it as I prefer dealing with css/html problems rather hiding them.

Upvotes: 5

Related Questions