Help needed with bootstrap/css positioning via @media

Hi!

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:

https://codepen.io/Folrunge/full/dzrOgq/

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: //www.smashingmagazine.com/2007/05/css-float-theory-things-you-should-know/

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

#buttons{
  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.

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