The incorporation of zoom disrupts the smooth scrolling capability of the menu

My landing page has a menu that scrolls users to the selected section. However, my client prefers the page at a 90% zoom level. To accommodate this request, I added the following line of code:

body {
   zoom:90%;
}

Unfortunately, when I click on a menu option, I get scrolled down past the intended section. Is there a way to maintain both the zoom and scrolling functionality?

You can see the issue for yourself on the page I'm working on:

Answer №1

Initially, the issue lies with the browser compatibility of this particular website, which can be described as less than ideal. In all honesty, it seems to stem more from a logical problem rather than a technical one. It appears that the height of each section has been set along with a designated scroll amount. This inevitably leads to discrepancies when zooming out, requiring adjustments in scroll amounts and section heights. One potential solution could involve adding padding to each section to adequately fill the screen height, subsequently adjusting the scrolling based on these new dimensions.

In my personal opinion, it may be more effective to rethink the proportions by scaling everything down to 90% of its current size rather than attempting to mask underlying issues. If the preference is for a 90% scale, then it should be created as such instead of simply appearing to be at that percentage.

Note: Originally intended as a brief comment, but ended up being somewhat of a rant...

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

Using Django ajax doesn't function properly when it's in a separate file

My Django site utilizes AJAX to handle requests. Initially, I had the JavaScript code embedded within the HTML document using <script>...</script>, which worked perfectly fine. However, when I decided to move the JavaScript to a separate file, ...

Getting the nested object property with pluck using Lodash

I have an array of objects containing character information: var characters = [ { 'name': 'barney', 'age': 36, 'salary':{'amount': 10} }, { 'name': 'fred', 'age': ...

Receiving feedback from an Ajax request

When attempting to retrieve the responseText from an AJAX call created in plain JavaScript, there seems to be an issue where Firebug can detect the request but cannot obtain a reference to the responseText. Below is the code for the function: function ge ...

Attempting to rearrange the table data by selecting the column header

In an attempt to create a table that can be sorted by clicking on the column headers, I have written code using Javascript, HTML, and PHP. Below is the code snippet: <?php $rows=array(); $query = "SELECT CONCAT(usrFirstname,'',usrSurname) As ...

Moving elements using CSS

Hi, I've been facing this issue with my web development since the start. Whenever I zoom in, the container also moves along. Is there any way to fix this problem? .darkslidecont{ width: 200px; height: 50px; position: relative; bac ...

Using CSS styles in emails can lead to an unexpected horizontal scrolling effect

I am currently working on an application using Symfony, and I have implemented a basic confirmation email with minimal CSS styling. However, the email template is causing horizontal scrolling due to the layout. Below is the HTML code of my email template: ...

Can HTML be transferred between browser tabs using Angular?

I'm in the process of developing a unique Angular (v17) application that allows users to drag and drop HTML elements, even across multiple browser tabs. I am inspired by the capabilities demonstrated by neo.mjs, as shown in this demo: https://www.yout ...

Utilize the size of the array as a variable

I have a question regarding the use of the length of an array as an integer value in JavaScript. Here is the code snippet: var counter = 0; var bannerLinks = document.getElementsByClassName("bannerlink"); var linkCount = bannerLinks.length; va ...

Implementing a custom body class in AngularJS when utilizing partials

Looking for some help with AngularJS. I have an index.html file, along with controllers and partials. The <body> tag is located in the index.html. I am trying to set the class for the body using my controller. After adding a value to $scope.body_c ...

Unselected default option in Angular 4's select dropdown

My goal is to use Angular to retrieve a value from a variable and display it as the first option in a select element, while keeping the rest of the options below static. The issue I am facing is that even though Angular is fetching the data successfully, t ...

Mastering the art of transforming JSON data for crafting an exquisite D3 area chart

I often find myself struggling with data manipulation before using D3 for existing models. My current challenge is figuring out the most efficient way to manipulate data in order to create a basic D3 area chart with a time-based x-axis. Initially, I have a ...

What are the steps to include media queries?

My website looks good on big monitors, but not on smaller ones or on mobile phones. I need help with adding media queries to my CSS Reset so it works across all devices. Here's the website link and the CSS Reset code: html, body, div, span, applet, o ...

The process of departing a SocketIO room and switching to a different room logic

I am wondering how I can leave the Room when I click on a new Room Here is what my page looks like: The list on the left side is from the MySQL Server and it displays a list of my chats. Each Room name has an id value which corresponds to the room name, ...

What are your thoughts on combining a JSON object with HTML?

When using ASP.NET MVC, it is possible to return a JSONResult. return JSON(new { View = RenderViewAsString("MyView", model), wasSuccessful = true}) This approach combines HTML and data in a single JSON object. The goal is to utilize strongly typed HtmlHe ...

What is the reason behind the blocking of Ajax GET requests without CORS, while JSONP requests are permitted?

Accessing any page on the web through a GET request using HTML tags from a different origin is possible: <script src="http://example.com/user/post?txt=sample"></script> XHR requests to other origins are blocked for security reasons. For examp ...

Starting service upon startup in Angularjs

I am looking to retrieve configuration data from the server and store it in the global scope within my AngularJS application. My app operates in multiple modes such as development and production, with different external services being used depending on the ...

Vue.js template is failing to properly render hyperlinks, although basic string output is functioning as expected

Whenever I print attrib.link, everything works perfectly fine, <div v-for="attrib in attributes"> {{ attrib.link }} </div> However, when I try: <div v-for="attrib in attributes"> <a target='_blank' href={{ attrib.link } ...

Simply interested in extracting the JSON Class specifically, not all of the data

Looking for a way to extract only text from a specific class using $.getJSON and YQL. Currently, it retrieves all data and removes tags. Is there a method to achieve this? function filterData(data){ // remove unwanted elements // no body tags ...

Using JavaScript to show a prompt message inside an h1 tag within a newly created div

I have developed a basic JavaScript program that opens a prompt dialog when the div tag is clicked, allowing the user to enter text. The program then creates a new div element and displays the entered text above it. However, I am facing an issue where I wa ...

Having trouble rendering JSON encoded data in a JqPlot Chart within a PHP script

I've spent the past few days scouring through Stack Overflow and various other websites, but I haven't been able to find a solution to my specific issue. Even the book 'Create Web Charts with JqPlot' by Fabio Nelli didn't provide t ...