0

Every time i zoom in and out, in my browser, my content moves out of position. How do i keep my content in place when zooming in and out in the browser. I've been searching this topic but i can not find a solution to this problem.

#top-container{
                    width: 100%;
                    height: 105px;
                    margin: 0 auto;
                    
                    
                }
                body{
                    padding: 0;
                    margin: 0;
                }
                #luxlogo{
                    width: 300px;
                    height: 105px;
                    margin-left: 700px;
                }
 <div id="top-container">
                <img id="luxlogo" src="luxpics/luxlogo.png">
             </div>

8
  • Its a pretty broad description, can you show code or elaborate more clearly? What type of zoom, browser zoom or elementZoom... Are you referring to objectfit like shown here on a codepen demo > codepen.io/norcaljohnny/pen/oYvdpG Commented Nov 3, 2016 at 2:13
  • Sorry i added it. No when you physically press "CTRL + plus or minus" it makes your screen small. Look at the code i sent. When the picture is centered, when you zoom in and out it moves left and right.
    – Jon2713
    Commented Nov 3, 2016 at 2:18
  • 1
    For that you can use position: absolute and give it a top and left position or use background-position: cover or contain. Commented Nov 3, 2016 at 2:20
  • I may be understanding you wrong.. are you wanting for it to stay right? The reason being, it is doing what you are asking with the margin-left, so on zoom in or out it will move with the margin based on 700px Commented Nov 3, 2016 at 2:24
  • It didn't work. But when i insert the picture inside a div and fit it so it fits the div, it doesnt move :D it stays one place and just get smaller and bigger.
    – Jon2713
    Commented Nov 3, 2016 at 2:24

2 Answers 2

4

Poster said this worked for the comment section so I am adding as an answer.

For that you can use position: absolute and give it a top and left position or use background-position: cover or contain.

2

Add this to the id #luxlogo

 #luxlogo{
width: 300px;
height: 105px;
position: absolute;
right:20px;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.