If you're facing an issue, consider utilizing flexbox with a dynamic layout change when the screen size reaches a specific threshold. Here's how you can achieve that:
.bar-element {
display: flex;
flex-direction: row;
}
@media (max-width:700px){
.bar-element {
display: flex;
flex-direction: column;
}
}
This will adjust the layout when the screen size crosses a certain limit.
Check out this demonstration:
.flex {
display: flex;
flex-direction: row;
}
p {
margin: 5px;
}
@media (max-width:700px){
.flex {
display: flex;
flex-direction: column;
}
}
<div class="flex">
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
</div>
For more information on adjusting properties based on different screen sizes, visit this link.
Here is the modified version of your code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* .flex_container {
display: flex;
flex-wrap: wrap;
min-width: 550px;
flex-direction: column;
position: relative;
} */
.bar {
position: relative;
background-color: rgb(41, 80, 143);
border: 5px solid rgb(46, 84, 149);
height: 30px;
width: auto;
margin: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.tekst {
color: white;
text-transform: uppercase;
text-align: center;
margin: 0;
vertical-align: middle;
line-height: 30px;
font-family: Arial, Helvetica, sans-serif;
}
.ccontroller {
display: flex;
flex-direction: row;
width: fit-content;
flex-wrap: wrap;
justify-content: flex-end;
justify-self: flex-end;
}
.creator1 {
display: block;
font-size: 25px;
color: white;
text-align: left;
margin: 0;
line-height: auto;
font-family: Arial, Helvetica, sans-serif;
margin-right: 10px;
}
.creator2 {
display: block;
color: white;
font-size: 25px;
text-align: left;
margin: 0;
line-height: auto;
font-family: Arial, Helvetica, sans-serif;
}
.aboutus {
display: block;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: white;
background-color: #123456;
height: fit-content;
width: auto;
margin-top: 16px;
margin-left: 50px;
text-align: center;
}
body {
background-color: #123456;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: 100% 100%;
min-width: 550px;
position: relative;
margin: 0;
padding: 0;
}
html,
body {
position: relative;
margin: 0;
padding: 0;
}
@media (max-width:700px) {
.bar {
display: flex;
flex-direction: column;
}
.ccontroller {
display: flex;
flex-direction: column;
}
}
</style>
<body>
<div class="flex_container">
<div class="bar">
<h1 class="tekst" title="Coffeesnakes">Coffeesnakes</h1>
<button class="aboutus" onclick="func()">About us!</button>
<div class="ccontroller">
<p class="creator1" title="Can code: Java, c#, html, js, python, arduino">Christian2B</p>
<p class="creator2" title="Can code: html, python, js ">Timgb11</p>
</div>
</div>
</div>
</body>
</html>