What causes the discrepancy in margin values between desktop and mobile devices?

In my project, I have a collection of div elements that need to be spaced vertically from one another by the height of the window plus an additional 100px. However, I encountered a discrepancy when setting this margin using jQuery between mobile and desktop browsers. The issue seems to be related to how the additional + 100 is interpreted as a string rather than a number.

Snippet of My Code

$(".text-container").css("margin", "50px auto " + (window.innerHeight + 100) + "px auto")

Observed Margin on DESKTOP (Chrome)

alert((window.innerHeight + 100) + ", " + typeof (window.innerHeight + 100) + ", " + $(".text-container").css("margin")) 

--> 740, number, 50px 18px 740px

Observed Margin on MOBILE (Chrome and Samsung Internet)

alert((window.innerHeight + 100) + ", " + typeof (window.innerHeight + 100) + ", " + $(".text-container").css("margin")) 

--> 874, number, 50px 20.6094px 740100px 20.5938px

It seems like there's some misunderstanding in my implementation. Any insights on what might be causing this difference?

javascriptjquerycsswindow

Answer №1

It's a bit odd to me, but I would suggest setting the offset value outside of the .css() function and then passing it as a variable inside.

Here's an example:

var add_margin = window.innerHeight + 100;
$(".text-container").css("margin", "50px auto "+add_margin+"px auto");

This should do the trick.

If you encounter issues with numbers being treated as strings instead of numerical values, consider using parseInt() or parseFloat() functions to specify the data type of your variables to the browser.

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

What is the process for changing a JavaScript date to the Hijri format?

Greetings! I am currently working on a web application using AngularJS/JavaScript. In my project, I have implemented a date picker and I am capturing dates from the front end. My goal is to save the selected date in the database in Hijri format. To achieve ...

javascriptangularjsdate

Tips for effectively utilizing the display: inline property in conjunction with ng-repeat

I am struggling to create a timeline with a broken structure on my website. I suspect that the issue lies in using display:inline. When attempting to apply this to my site: https://i.stack.imgur.com/4Ur7k.png the layout gets distorted: https://i.stack.i ...

javascriptcssangularjshtml

The second parameter of the filter function is malfunctioning

I'm currently delving into the "filter" function in AngularJS. Upon reviewing the documentation, I've discovered that it can also take a second parameter. When set to "true", it carries out a strict comparison. HTML <fieldset> <leg ...

javascriptangularjs

Creating a modal using JavaScript and CSS

When I click on the hello (plane geometry) as shown in the figure, a popup appears on the extreme left of the screen instead of appearing on the plane geometry box. Can someone please help me fix this issue? I have also included the code below: https://i. ...

javascripthtmlcssthree.js

Ending a div tag inside another div element

I have set up a listings page with individual divs for each listing, loading content from a separate php script using $.post The issue I'm facing is hiding the listing, possibly related to this line of code: $('div.close_listing') I can o ...

jqueryhtml

Error: Missing semicolon at line 1005 in Vue computed function. Vetur is indicating this issue

As a beginner in vue3, I am venturing into building some side projects. However, I keep encountering an error message stating ';' expected.Vetur(1005) when attempting to utilize the computed function. Strangely enough, sometimes the same syntax w ...

javascriptvue.jsvuejs3

Having issues with the onclick _dopostback function in MVC? It seems like the post

When attempting to execute a postback in ASP.NET MVC after confirming with JavaScript, the following button is used: <input type="submit" id ="RemoveStatus" value="Remove Status" name="button" onclick="return CheckRemove();"/> The JavaScript code f ...

javascriptasp.netasp.net-mvcpostbackdopostback

How can I bind the ID property of a child component from a parent component in Angular 2 using @Input?

I have a unique requirement in my parent component where I need to generate a child component with a distinct ID, and then pass this ID into the child component. The purpose of passing the unique ID is for the child component to use it within its template. ...

javascriptangularinputtypescriptoutput

The challenge with linking within Layerslider

Having some trouble with an external link to a specific layerslider slide (html version, NOT wordpress). Here is the webpage in question: After reaching out in the support forum, I was advised to use this javascript: <a href="javascript:void(0);" onc ...

javascriptjqueryhtmlslideshowdeep-linking

React Alert: Please be advised that whitespace text nodes are not allowed as children of <tr> elements

Currently, I am encountering an error message regarding the spaces left in . Despite my efforts to search for a solution on Stack Overflow, I have been unable to find one because my project does not contain any or table elements due to it being built with ...

javascripthtmlnode.jsreactjsvalidation

Displaying a large image within a small div using Bootstrap 4

I have a specific image with dimensions of 244px by 751px, and I am trying to place it inside a div container that is 132px by 132px. I want the image to maintain its aspect ratio without being stretched. Despite using the img-fluid class, the image does n ...

cssbootstrap-4

Utilizing various if conditions in conjunction with the jQuery chart plugin Piety

Check out this Fiddle example I'm interested in experimenting with different color combinations using a small chart plugin called piety. The documentation demonstrates how to set different colors for a pie chart: $(".bar-colours-1").peity("bar", { ...

javascriptjqueryhtml

Set up a directory alias for the Grunt connect server

I have a set of folders in my project directory that I would like to make accessible using the Connect framework through a Grunt task. The structure of my folders is as follows... / /src index.jade /styles main.css /dist index.html /docs index.htm ...

javascriptnode.jsgruntjsnode.js-connect

Align text to the center within the dropdown menu for all web browsers

Is it possible to center align text in a select drop down for all browsers? It appears centered in Firefox, but shifts to the left in Chrome and Safari. CSS: .challenge{ max-width: 850px; width: 98%; height: 50px; background: #ffffff; margin: 3 ...

htmlcssdrop-down-menucross-browser

Although Angular allows for CSS to be added in DevTools, it seems to be ineffective when included directly in

Looking to set a maximum length for ellipsis on multiline text using CSS, I tried the following: .body { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } However, this approach did not work. Interesti ...

cssangular

What is the best way to align text in the center of a div?

I just created this dropdown menu, but I am encountering an issue. Whenever I resize the div or h4 element, the text ends up at the top. Even after trying to solve it with text-align: center;, the problem persists. Here is a visual representation of what ...

javascripthtmlcss

Steps for triggering a modal popup using server-side code when a button is clicked

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="3.aspx.cs" Inherits="KVTRANSAPORTS._3" MasterPageFile="~/Site1.Master" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> <script src="Sc ...

c#jqueryasp.nettwitter-bootstrap

Revolutionizing user experience: New feature seamlessly triggers button actions with the power of "enter"

I need assistance with modifying a form that contains two buttons and several text inputs. Currently, if the enter key is pressed, it triggers a click event on the first button. However, I want to modify this behavior so that if any of the text boxes are f ...

javascriptjqueryhtmlinputenter

Getting the date from a datetime JSON - here's how!

How can I extract the date from a JSON datetime string like 2013-11-09T00:00:00 using either Jquery or JavaScript? ...

javascriptjqueryjson

Refresh a page automatically upon pressing the back button in Angular

I am currently working on an Angular 8 application with over 100 pages (components) that is specifically designed for the Chrome browser. However, I have encountered an issue where the CSS randomly gets distorted when I click the browser's back button ...

javascripthtmlangulartypescript