On large screens i want all elements on 1 row, on smaller i want three rows. Basically i dont want see button only with H1 on same row. How can flexbox solve this issue? thank you :)
<div class="buttoncontainer">
<button class="change">Change background</button>
<h1 id="currentcolor">currentcolor</h1>
<button class="change">Change background</button>
</div>
And 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;
}
SO i dont want this :Bad one
But straight to thisGOod one
So the easiest way to solve this problem would be through Media Queries. Media queries make it so you can easily set a max or min width for things to happen a certain way.
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
From what I'm understanding, you can set it so whenever it's less than a certain resolution (in this case I set 900px), the flex-direction property should be set to 'column'.
@media (max-width: 900px) {
.buttoncontainer {
flex-direction: column;
}
}
This should solve your problem.