When Zooming In Html Element Get Misplaced

Tried the whole day of yesterday to make my page responsive when Zooming In but can't achieve it. Even added height and weight but still mixing up elements when zooming in the page

Solution 1:

For responsive design you should limit the use of px, left, top CSS properties, and be very cautious with position: absolute. And completely abandon this use of translate that you have.

It is better to use relative units (like % or vh, vw, ...), which are responsive.

And it becomes easier when you use flexbox CSS.

Here is one set of CSS you could use. You can alter the values to better match your wishes (those that have vh unit), or you can switch from vh to vmin units. It all depends on what you expect:

html, body, header {
  height: 100%;
  margin: 0;
}

.container-header-image {
  box-sizing: border-box;
  min-height: 100%;
  color: white;
  background: url(https://placeimg.com/80/80/any);
  background-size: cover;  
  display: flex;
  flex-flow: column;
  justify-content: space-around;
}

.top-menu {
  display: flex;
  flex-basis: 100%;
  flex-flow: row nowrap;
  justify-content: space-around;
  padding-bottom: 25vh;
}

.logo-name-wording {
  font-family: Montserrat;
  font-weight: bold;
  font-size: 4vh;
  text-align: center;
}

.link-top-menu {
  font-family: MontserratExtraLight;
  font-size: 3vh;
  font-weight: bold;
  text-align: center;
}

.link-top-menu * {
  margin-left: 3vh;
  white-space: nowrap;
  display: inline-block;
}

.signup-frame-btn {
  border: 2px solid;
  padding: 0.7vh3vh0.7vh3vh;
  border-radius: 3vh;
}

.share-your-dream-top, .share-your-dream-bottom {
  font-family: MontserratExtraBold;
  font-size: 8vh;
  text-align: center;
}

.find-perfect-friend {
  font-family: RobotoLight;
  font-size: 6vh;
  text-align: center;
}

.find-holiday {
  text-align: center;
}

.find-holiday * {
  font-family: MontserratSemiBold;
  font-size: 5vh;
  border: 0.5vh solid none;
  padding: 1vh4vh1vh4vh;
  border-radius: 4vh;
  background-color: #FF4E50;
  white-space: nowrap;
}

<header><divclass="container-header-image"><divclass="top-menu"><spanclass="logo-name-wording">TRAVELLING</span><spanclass="link-top-menu"><spanclass="activities-frame-btn">Menu 1</span><spanclass="partners-frame-btn">Menu 2</span><spanclass="blog-frame-btn">Menu 3</span><spanclass="contact-frame-btn">Menu 4</span><spanclass="login-frame-btn">Menu 5</span><spanclass="signup-frame-btn">Menu 6</span></span></div><divclass="share-your-dream-top"><span>TELL YOUR</span></div><divclass="share-your-dream-bottom"><span>TRAVEL EXPERIENCE</span></div><divclass="find-perfect-friend"><span>And find the perfect friend to tell</span></div><divclass="find-holiday"><span>Find your friend</span></div></div></header>

With this approach, zooming has hardly any effect. The responsiveness kicks in when you resize the container.

NB: I don't think "Tell your experience" is good English. Consider "Share your experience", or "Tell about your experience". Similarly, "find a friend to tell" should be "find a friend to share it with".

Solution 2:

I would recommend, that instead of using 'position', 'relative' and hard coding exact values, that you use FlexBox or the bootstrap grid system (which is based on flexbox) This will ensure that your website scales down perfectly and elements can adapt to the screen size.

Here are a couple of links:

https://getbootstrap.com
https://youtu.be/K74l26pE4YA
https://youtu.be/-Wlt8NRtOpo
https://youtu.be/qmPmwdshCMw
https://css-tricks.com/snippets/css/a-guide-to-flexbox```

Solution 3:

Responsive means your web page is in the best position, and it shouldn't need zooming!

People think responsive means that elements need to change to different sizes. Of course that's true, but we also make a page responsive by changing elements so that the user wouldn't need to zoom any more. They can zoom in not-responsive web sites already!

If you wouldn't let the user zoom on your page, would that solve your problem? If so, add this meta element to your head section:

<metaname="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Developers usually don't care about zooming bugs in responsive pages. Why would you need zooming any way when a page has a good lay out?

Do users need zooming on your page?