When viewing on large screens, I want all elements to be on one row. On smaller screens, I want them to be on three rows. Specifically, I don't want to see the button next to the H1 element on the same row. How can flexbox help solve this problem? Thank you :)
<div class="buttoncontainer">
<button class="change">Change background</button>
<h1 id="currentcolor">currentcolor</h1>
<button class="change">Change background</button>
</div>
And here is the CSS:
'''
.buttoncontainer {
display: flex;
flex-wrap: wrap;
height: 90vh;
justify-content: flex-start;
}
button {
border: 10px solid black;
font-size: xx-large;
text-shadow: #222;
box-shadow: 10vh;
margin: auto;
text-align: center;
line-height: 4.5;
height: 25%;
flex-wrap: wrap;
border-radius: 20px;
}
h1 {
border: 10px solid black;
margin: auto;
}
I don't want it to look like this:Incorrect layout example
Instead, I want it to look like thisCorrect layout example