Issue
I have an image on my web page. The image is in its own div, and I have it in position:relative to move it to where I want on the page (roughly top right corner). My issue is, when I zoom out of my page, the image no longer appears in the right, it ends up appearing more to the left/top centre of my page (as you may expect). I have a paragraph of my page expand when zooming out, but it is in its own div and below the image, just thought I'd mention that although it may be irrelevant. I want the image to stay in its place when zooming out, so it constantly budges up to the right to stay in position. Example with Google:
Sign in box in right at 100% zoom: https://snag.gy/9oMGVr.jpg
Sign in box still in right corner when zoomed out: https://snag.gy/FXArO4.jpg
Would like to do the same thing with my image, float:right6 seemed to not work. Many thanks in advance.
Solution
Important think is:
position: fixed;
right:0;
top:0;
Always place in top_right corner
And apply with <meta name="viewport" content="width=device-width, initial-scale=1.0"> in your html its will show the responsive design
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<style>
.top_right{
position: fixed;
width:70px;
height:30px;
margin:10px 5px auto;
background-color:blue;color:white;
right:0;
top:0;
box-sizing:border-box;
border:none;
}
</style>
</head>
<body>
<button class="top_right">
SignIn
</button>
</body>
</html>Answered By - prasanth
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.