+ 1
How to prevent your page content to move when you resize your screen???
help
10 Answers
+ 4
Don't use percents. Percents are a relative size and change depending upon what 100% actually is in real measurements.
+ 2
Can you show us your code?
+ 2
As Оля said, post your code for us and we'll show you how to do it. More than likely, the content is inside of a container that's based upon a percent, even though the child content is set to px.
+ 1
the linkbar and header content moves
html code
<!doctype html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel = "icon" href = "pics/icon.png" >
<link rel = "stylesheet" href = "css/Tech.css">
<title> Xclusive </title>
</head>
<body>
<div id="logo">
<img src = "pics/iconx.png"/>
<h1>Xclusive Tech</h1>
</div>
<div id ="links" align = "center">
<a href="Home.html" style="text-decoration:none">Home</a>
<a href="Products.html" style="text-decoration:none">Products</a>
<a href="Services.html" style="text-decoration:none">Services</a>
<a href="About.html" style="text-decoration:none">About Us</a>
<a href="Contacts.html" style="text-decoration:none">Contact Us</a>
</div>
</body>
</html>
css code
h1{ color:green;
float:right;
margin-right:980px;
margin-top:50px;
}
#logo{
float:left;
margin-top:20px;
}
#links{
display : inline-block;
font-size : 30px;
margin-left:450px;
background-color:rgb(135, 211, 124);
text-decoration: none;
font-weight: bold;
margin: 0;
padding: 0;
width: 100%;
}
+ 1
try playing with the css position property. maybe try absolute?
0
i've used pixels (px) but still the content moves
0
ive used css to customize the content should i send the css or html
0
it didnt work even if i used absolute!!
0
Try having a look on w3c, MDN, csstricks or any other big sites. I'll look for some links.
0
i got it.....i used width of 100%