Karmalegend Karmalegend - 2 months ago 13
CSS Question

Adapt to screen res

So for some reason my webpage displays just fine on my main screen but it screws up on my second monitor. Main screen res: 1440x900, second screen res: 1280x800

EDIT: also how do i make it so the sidescroll dissapears.

EDIT: FIXED SIDESCROLL

Screenshots:

main screen:

main screen

secondary screen:

secondary screen



html{

}
body {width:90%;margin:auto;min-width:600px;max-width:2000px}


#left, #right, #middle {
position: fixed;
width: 50%;
height: 100%;
top: 0
margin-left:auto;
margin-right:auto;
}

#middle {
background-color: red;
right: 500px;
left: 400px;
width: 45%;
margin-left: auto;
margin-right: auto;
}
#left {
background-color: black;
right: 880px;
margin-left:auto;
margin-right:auto;
width: 80%;

}
#right {
background-color: black;
left: 880px;
margin-left:auto;
margin-right:auto;
width: 80%;

}
#container {
background: #fff;
width: 80%;
margin: 0 auto;
position: relative
margin-left:auto;
margin-right:auto;
width: 80%;
}

body {
font-family: "Comic Sans MS";


}

h4{
font-size: 20pt;
}
em{
font-weight: bold;
color:darkslategrey;
}

em1{
font-weight: bold;
color:darkslategrey;
}

#mijngegevens {

top: 50px;
left: 420px;
width: 700px;
height: 400px;
position: absolute;
margin-left:auto;
margin-right:auto;
width:80%;


}

#joeyvideo {
top: 350px;
left: 420px;
height: auto;
position: absolute;

border-style: double;
border-width: thick;
border-color: black;
margin-left:auto;
margin-right:auto;

}

#gmaps {
top: 700px;
left: 420px;
position: absolute;
margin-left:auto;
margin-right:auto;
width: 80%;


}

<!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Joey Salads</title>
</head>

<body>
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
<div id="container"></div>
<div id="mijngegevens">
<h4>The best prankster on, youtube!</h4>
<p><a href="https://www.youtube.com/user/JoeySalads"><b><u><i>Subscribe</i></u></b></a></p>
<p><em>Name:</em>Sick prankster Afghanistan</p>
<p><em1>Adress:</em1><a href="https://www.google.nl/maps/place/Peachy+In+The+Secret+Hideout/@1.3041018,103.8581836,17z/data=!4m12!1m6!3m5!1s0x31da19b6c17eb7d1:0x2d021381dbf79a7b!2sPeachy+In+The+Secret+Hideout!8m2!3d1.3040964!4d103.8603723!3m4!1s0x31da19b6c17eb7d1:0x2d021381dbf79a7b!8m2!3d1.3040964!4d103.8603723?hl=nl" </a> Secret hideout</p>

</div>


<div id="gmaps">
<iframe width="420" height="350" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyC8YwGwvlNWXGcf92JTE6ymhCMNHp5n4MI &q=Secret+Hide+Out+ng+Mga+Gadon,Angeles II, Valenzuela, National Capital Region, Philippines" allowfullscreen></iframe>
</div>



<div id="joeyvideo"><iframe width="420" height="315" src="https://www.youtube.com/embed/CHt7EBCgJnI" frameborder="0" allowfullscreen></iframe></div>

</body>





</body1>



</html>





edit: Picture 2

Answer

Your issues is that you are telling it how many pixels to go over to the right for your middle section. The way you are coding it will never appear correct unless everyone that uses your website is using the same screen resolution as your main monitor.

What you should do instead is use relative positioning, flexbox, or probably easiest and most browser friendly is to use a framework like bootstrap that helps you to lay things out the way you want.

also - removing horizontal scroll is as easy as saying overflow-x: hidden as a css property on the body or something else that is causing your side scroll