Consider two inline-block divs. Now, I want when the user decrease the browser size, that only one <div> will stay visible (and not one <div> to go to the next line...).
How can I implement that?
<style>
div {
display:inline-block;
}
</style>
<div id="first">this should dissapear on narrowing browser</div>
<div id="second">only this should be visible</div>
I use Polymer, so if there is some syntax sugar here would be nice :)
Try this! http://jsbin.com/bibuzu/1/edit
There's a breakpoint at 480px so any widths before then the first div is set to display none and the second div takes up the rest of the space.
@media screen and (max-width: 480px) {
div.first {
display: none;
}
div.second {
width: 100%;
}
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments