The problem is that my divs are shown correctly as long as my browser is in full screen, but when I scale down the resolution the divs overlap, how do I get a relative positioning to each other
#curve_temp {
position: absolute;
top: 300px;
left: 30px;
margin-right: 100px;
}
#curve_vibr {
position: absolute;
top: 300px;
right: 220px;
}
#curve_laut {
position: absolute;
top: 600px;
left: 30px;
padding-right: 100px;
}
#curve_rpm {
position: absolute;
top: 600px;
right: 220px;
}
#curve_quali {
position: absolute;
top: 900px;
left: 30px;
padding-right: 100px;
}
<div class="user-dashboard">
<h1>Hallo, User!</h1>
<div id="logo_eg">
<center><img src="logo.png" alt="engineguru_logo" class="our_logo" width="476" height="191"></center></div>
<div id="curve_quali" style="width: 535px; height: 268px; vertical-align: right" ></div>
<div id="curve_rpm" style="width: 535px; height: 268px; vertical-align: right" ></div>
<div id="curve_laut" style="width: 535px; height: 268px; vertical-align: right" ></div>
<div id="curve_temp" style="width: 535px; height: 268px; vertical-align: right" ></div>
<div id="curve_vibr" style="width: 535px; height: 268px; vertical-align: right" ></div>
<div id="flaticon"><a href="https://www.flaticon.com/free-icons/home" title="home icons">Home icons created by Freepik - Flaticon</a></div>
</div>
This might do the trick. I would use media queries to set the desired screen size breakpoints. Additionally, it may help to use rem or em instead of px as those help with responsive design in screen size scaling.
You could set the css styles to be between two widths, for example with a tablet:
@media (min-width: 475px) and (max-width: 768px)
{
/* Insert screen size styles for these breakpoints here. */
}
Or use settings that specify styles upto a specific screen size dimension:
@media only screen and (max-width: 320px)
/* For mobile phones: */
{
/* Insert screen size styles for these breakpoints here. */
}
With your code shared above, it could look something like this:
@media only screen and (max-width: 320px){
/* For mobile phones: */
/* Adjust values to the appropriate px dimension. */
#curve_temp {
position: absolute;
top: 300px;
left: 30px;
margin-right: 100px;
}
}
@media only screen and (max-width: 768px){
/* For tablet screens: */
/* Adjust values to the appropriate px dimension. */
#curve_temp {
position: absolute;
top: 300px;
left: 30px;
margin-right: 100px;
}
}
@media only screen and (max-width: 1920px){
/* For desktop screen: */
/* Adjust values to the appropriate px dimension. */
#curve_temp {
position: absolute;
top: 300px;
left: 30px;
margin-right: 100px;
}
}
Firstly, using absolute positioning is far more rigid and makes it difficult to write layouts that respond well to changing content. more infos here
You can use flexbox, put the divs you want to respond correctly in a flex-container as follows.
html:
<div class="flex-container">
/*put your divs here*/
</div>
css:
.flex-container {
display: flex;
flex-wrap: wrap;
}
You can get the design you want with these flexbox properties in addition to spacing manipulation.
A better way to give multiple divs the same style is giving them the same class and styling it with css.
Your old code:
<div id="curve_quali" style="width: 535px; height: 268px; vertical-align: right" ></div>
<div id="curve_rpm" style="width: 535px; height: 268px; vertical-align: right" ></div>
<div id="curve_laut" style="width: 535px; height: 268px; vertical-align: right" ></div>
<div id="curve_temp" style="width: 535px; height: 268px; vertical-align: right" ></div>
<div id="curve_vibr" style="width: 535px; height: 268px; vertical-align: right" ></div>
better way to code:
<div id="curve_quali" class="class_name" ></div>
<div id="curve_rpm" class="class_name"</div>
<div id="curve_laut" class="class_name"</div>
<div id="curve_temp" class="class_name"</div>
<div id="curve_vibr" class="class_name"</div>
you rewrite the same style you gave in your style attribute as follows:
.class_name {
/* your styling over here */
}