When you zoom in, the HTML elements tend to shift out of place

Spent the entire day yesterday attempting to make my page responsive while Zooming In, but I just can't seem to get it right. Even after adding height and weight, elements still get mixed up when zooming in on the page.

I've scoured countless web pages and tried every solution out there, but nothing seems to work.

Feeling lost and unsure of what to do next.

.container-header-image {
  width: 100%;
  height: auto;
}

.top-menu {
  width: 100%;
  height: auto;
}

.logo-name-wording {
  width: 100px;
  height: auto;
  position: absolute;
  font-family: Montserrat;
  font-weight: bold;
  font-size: 20px;
  top: 43px;
  left: 230px;
}

.link-top-menu {
  width: 100%;
  height: auto;
  font-family: MontserratExtraLight;
  font-size: 14px;
  font-weight: bold;
}

.container-header-image {
  width: 100%;
  height: auto;
  position: relative;
  color: white;
}

.signup-frame-btn {
  width: auto;
  height: auto;
  position: absolute;
  top: 38px;
  right: 270px;
  border: 2px solid;
  padding: 5px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 100px;
}

.login-frame-btn {
  width: auto;
  height: auto;
  position: absolute;
  top: 45px;
  right: 390px;
}

.contact-frame-btn {
  width: auto;
  height: auto;
  position: absolute;
  top: 45px;
  right: 460px;
}

.blog-frame-btn {
  width: auto;
  height: auto;
  position: absolute;
  top: 45px;
  right: 550px;
}

.partners-frame-btn {
  width: auto;
  height: auto;
  position: absolute;
  top: 45px;
  right: 620px;
}

.activities-frame-btn {
  width: auto;
  height: auto;
  position: absolute;
  top: 45px;
  right: 720px;
}

.share-your-dream-top {
  width: auto;
  height: auto;
  position: absolute;
  top: 37%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-family: MontserratExtraBold;
  font-size: 50px;
}

.share-your-dream-bottom {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-family: MontserratExtraBold;
  font-size: 50px;
}

.find-perfect-friend {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-family: RobotoLight;
  font-size: 22px;
}

.find-holiday {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-family: MontserratSemiBold;
  font-size: 14px;
  border: 1px solid none;
  padding: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 25px;
  padding-right: 25px;
  border-radius: 100px;
  background-color: #FF4E50;
}

.meet-partner {
  margin-top: 58px;
  color: #444444;
  font-family: MontserratSemiBold;
  font-size: 22px;
  text-align: center;
}
<header>
  <div class="container-header-image">
    <img src="https://placeimg.com/80/80/any" alt="header-picture" style="width:100%;" class="image-background" />
    <div class="top-menu">
      <span class="logo-name-wording">TRAVELLING</span>
      <span class="link-top-menu">
                            <span class="activities-frame-btn">Menu 1</span>
      <span class="partners-frame-btn">Menu 2</span>
      <span class="blog-frame-btn">Menu 3</span>
      <span class="contact-frame-btn">Menu 4</span>
      <span class="login-frame-btn">Menu 5</span>
      <span class="signup-frame-btn">Menu 6</span>
      </span>
    </div>
    <div class="share-your-dream-top">
      <span>TELL YOUR</span>
    </div>
    <div class="share-your-dream-bottom">
      <span>TRAVEL EXPERIENCE</span>
    </div>
    <div class="find-perfect-friend">
      <span>And find the perfect friend to tell</span>
    </div>
    <div class="find-holiday">
      <span>Find your friend</span>
    </div>
  </div>
</header>

On JSFiddle, the layout doesn't display properly at 100% zoom; you need to zoom out to 50% or less to view the entire page. However, in a regular browser, it's showing correctly at 100% zoom.

View the demo on jsFiddle

javascripthtmlcss

Answer №1

When creating a responsive design, it's important to avoid using px, left, and top CSS properties excessively, and to approach position: absolute with caution. It's recommended to steer clear of using translate as well.

Instead, opt for relative units like %, vh, or vw which adapt better to different screen sizes.

Utilizing flexbox CSS can also simplify the process.

Here is an example CSS code that you can customize to suit your needs:

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;
}

/* Additional CSS styles... */


<header>
  <div class="container-header-image">
    <div class="top-menu">
      <span class="logo-name-wording">TRAVELLING</span>
      <span class="link-top-menu"><span class="activities-frame-btn">Menu 1</span>
        <span class="partners-frame-btn">Menu 2</span>
        <span class="blog-frame-btn">Menu 3</span>
        <span class="contact-frame-btn">Menu 4</span>
        <span class="login-frame-btn">Menu 5</span>
        <span class="signup-frame-btn">Menu 6</span></span>
    </div>
    
    <!-- More HTML elements here... -->
    
  </div>
</header>}

By following this method, the impact of zooming on your design is minimized, and responsiveness comes into play when resizing the container.

Note: Consider revising phrases like "Tell your experience" to "Share your experience" for better English language use.

Answer №2

My suggestion would be to steer clear of using 'position', 'relative' along with hard coding specific values in your code. Instead, I recommend leveraging the power of FlexBox or the bootstrap grid system (which is built on flexbox). By doing so, you can ensure that your website will scale down flawlessly and its elements will seamlessly adjust to different screen sizes.

Here are some helpful resources:

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

Answer №3

Being responsive means ensuring that your web page is perfectly situated and doesn't require any zooming!

While some people may think responsiveness only refers to elements adjusting to different sizes, it's also about making sure users don't have to constantly zoom in or out. After all, why should they need to zoom on a non-responsive website when they shouldn't have to on a responsive one?

If preventing users from zooming would solve your issue, consider adding the following meta element to your head section:

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

Many developers often overlook zooming bugs in responsive pages. But if your page has a strong layout, why should users need to zoom anyway?

Ask yourself: do users truly need to zoom in on your page?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Getting the Mongoose Model using Express parameters is a simple process

Is it possible to dynamically fetch a mongoose model based on the req.params.model? Check out this example of a Schema const mongoose = require("mongoose"); const Schema = mongoose.Schema; const SmartSchema = new Schema({ SmartPriority: { type: Stri ...

javascriptnode.jsmongodbexpressmongoose

Using jQuery to change the `class` of the parent `div` based on the length of a `p`

I am attempting to adjust the height of a parent div based on the length of text in its child p.descr. This is achieved by adding a specific class that corresponds to different height values in CSS. Below is the jQuery code snippet: $(document).ready(fu ...

jqueryhtmlcss

Expanding the Number of Arguments Sent to a Callback Function

I have a scenario where I am using a method that sends a POST request and then triggers a specific callback function to manage the response: myService.verify(id, verificationCallback); function verificationCallback(err, response) { ... } My query is two ...

javascriptexpress

Aligning images and input fields vertically with relative measurements

I'm looking for a way to vertically position two images, one on the left and one on the right, so that they are centered between labels and input fields within a containing div. Is it achievable using only relative lengths? Check out this jsfiddle fo ...

cssvertical-alignment

XMLHttpRequest request shows blank result

Issue: After clicking the submit button on my HTML form, a JavaScript function is called with an Ajax request. The request returns successfully, but the result disappears quickly. I'm curious if I may be overlooking something here (besides jQuery, w ...

javascriptajaxxmlhttprequestforms

Unfamiliar function detected in the updated Vue Composition API

I am currently in the process of converting a basic SFC to utilize the new Vue CompositionAPI. The original code functions perfectly: export default { data() { return { miniState: true } }, methods: { setMiniState(state) { if ...

javascriptvue.jsvue-componentquasar-frameworkvue-composition-api

Unsure of the best way to approach pagination using {$.getJSON, php image array} - seeking guidance on the right

Currently, my code is set up as follows: When a user visits a specific link on the page The $.getJSON function sends a request to a PHP script PHP uses scandir() to generate an array containing image names (eventually in the hundreds to thousands, ...

javascriptphpajaxpagination

Find the total of values in an array that may be null or undefined

In this scenario, I have an array that looks like this: myData = [[2, null, null, 12, 2], [0, 0, 10, 1, null], undefined]; The goal is to calculate the sum of each sub-array, resulting in an array like this: result = [16, 11, 0]. The ...

javascriptarraysangularjsreduce

Encountering an error with an undefined callback argument within an asynchronous function

I encountered an issue while working with the viewCart function. I have implemented it in the base controller and am calling it from the home controller. However, I am facing an error where the callback argument in home.js is showing up as 'undefined& ...

javascriptnode.jsasynchronousexpress

Add fresh inline designs to a React high-order component creation

Applying a common HOC pattern like this can be quite effective. However, there are instances where you may not want a component to be wrapped, but rather just extended. This is the challenge I am facing here. Wrapper HOC const flexboxContainerStyles = { ...

javascriptcssreactjs

Trouble with Showing Bootstrap 5 Icon

My current project involves creating a website using Bootstrap 5 icons, but I'm encountering an issue where the icon is not displaying correctly. The expected appearance should be like this [![Example1][1]][1], but it actually looks like this [![Examp ...

htmlcssvisual-studiofrontendbootstrap-5

What is the best way to stop the content in :after from wrapping onto the following line?

How can I add a divider "/" after each li element in my Bootstrap-based menu without it wrapping to the next line? The code I am using can be found here: http://jsfiddle.net/zBxAB/1/ I have tried using inline-block to prevent the slash from wrapping, but ...

htmlcsstwitter-bootstrap

Sending a parameter value from a blade view in Laravel to a controller: tips and tricks

What is the best way to pass the value "{{$ item-> id}}" to a method in a controller? For example, if we have show.blade.php with the value: "{{$ item-> id}}" In MyController.php, how can we utilize this value within the method: public function ...

javascriptphpajaxlaravellaravel-blade

Three dots implemented in the heading of a card

In my Bootstrap 4 project, I am aiming to design a card header with three distinct parts. The left part will showcase the author. The middle section will present a preview of the content. The right part will display the date. Specifically, I want the mid ...

htmlcsstwitter-bootstrapbootstrap-4

Guide to implementing a slider in HTML to adjust the size of my canvas brush

Hey there, I'm looking to implement a slider functionality under my canvas that would allow users to change the brush size. Unfortunately, all my attempts so far have been unsuccessful. Can anyone lend a hand? Much appreciated! <canvas i ...

javascripthtmljquerycss

The error has not been handled properly and is being thrown at line 174 in the events.js file

I encountered an issue while trying to request data from an API, resulting in a crash on any Windows server. Can someone lend a hand with this problem? Here is a snippet of my code: app.get("/js/2806/api/products/getAllDrugs", (req, res) => { co ...

javascriptnode.js

The outcome of the Javascript Calculator is showing as "Undefined"

I've been attempting to create a calculator using JavaScript, but I'm facing an issue where the 'operate' function keeps returning Undefined, and I can't seem to figure out why. I suspect that the problem lies with the switch state ...

javascripthtml

Disabling eslint does not prevent errors from occurring for the unicorn/filename-case rule

I have a file called payment-shipping.tsx and eslint is throwing an error Filename is not in camel case. Rename it to 'paymentShipping.tsx' unicorn/filename-case However, the file needs to be in kebab case since it's a next.js page that s ...

javascripttypescriptnext.jseslinttypescript-eslint

Creative Blueprint

Our company currently operates 3 browser based games with a team of just 4-5 coders. We are looking to enhance the collaboration within our coding team and streamline our processes. Considering the fact that our games are built using a mix of html, php, j ...

phpjavascriptcssxmlapplication-design

Issues with concealing the side menu bar in Vue.js

I've been attempting to conceal the side menu bar, with the exception of the hamburger icon when in the "expanded" state. Despite my efforts to modify the CSS code, I am still struggling to hide the small side menu bar. The following images represent ...

javascripthtmlcsstypescriptvue.js