Help needed with bootstrap/css positioning via @media


So in spare time I was building “Wikipedia viewer” and everything is neat on desktop resolution but it hits the fan when I scale down my browser’s resolution to 350px. Input area refuses to scale up to 100% and buttons bump at each other and onto <li> content (also inline is broken and they seem to go into block). Here is my pen:

Note: It is in wip state so there is much styling to be done :wink:

:slight_smile: I hope I am understanding your problem, correctly.

For your buttons: The float property will cause your elements to flow around each other, https: //

I refactored your css to use flex, which unfortunately isn’t supported in all browsers :frowning: http ://
Flex is a great way to position elements inside a container.

  margin-left: 0.3%;
  margin-right: 0.3%;
  margin-top: 3%;
  display: flex;
  flex-direction: row;
  justify-content: space-between

For your input:, it is at a 40% width and that will become smaller than the buttons which do not resize based on a percentage value. For this I provided to the input a px value for min-width to stop it from shrinking further.

  min-width: 250px;
  width: 40%;
  margin-left: auto;
  margin-right: auto;
  height: auto;
1 Like