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
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 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