Identifying CSS when the height of the browser is smaller than the height of the device

On my page, I am facing a situation where the CSS of an element needs to be adjusted for devices like the Nexus 5X. These devices have 'Android nav bars' at the top and bottom, which can push elements around on the page.

Currently, I am using jQuery to detect and make adjustments based on device type. However, I am wondering if there is a way to achieve this using CSS media queries instead.

Here is the code snippet I am currently using:


if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    is_mobile = true;
}
if ($( window ).height()<window.screen.height && is_mobile==true) {
    $('#my_element').css("height","46vh");
}

I was considering using CSS to compare heights directly, but it seems that 'device-height' is deprecated. Additionally, it may not be possible to directly compare the two heights in CSS anyway.

Thank you for any assistance

css

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

How to stop font-family and letter spacing from affecting the margin of div and ul elements in CSS

I'm facing a challenge with aligning a rotated div and an unordered list in a container. Adjusting the margin of either element does the trick, but changing font-family or letter-spacing globally affects the spacing between the two. Check out this JS ...

htmlcss

Prevent screen from loading without JavaScript using an overlay

Is there a way to darken and lock the page, preventing clicking or scrolling, while displaying white text notifying the user that JavaScript is not enabled? I understand that the recommended approach is to gracefully degrade all elements when JavaScript i ...

javascripthtmlcssnoscript

Background and checked styles for radio buttons

Thank you in advance for any assistance you can provide. I am looking to create a unique radio button design. When the radio button is not checked, I want it to display as a simple white circle. However, once it is checked, I would like it to appear eithe ...

cssreactjsmaterial-ui

Continuously I am being informed that the value is null

Check out this code snippet: var Ribbon = /** @class */ (function () { function Ribbon(svg) { // Code here... } Ribbon.prototype.init = function() { // Initialization code here... }; Ribbon.prototype.updateR ...

javascripthtmlcssnull

Is there a way to incorporate pseudo-dynamic css into my projects?

I'm struggling with managing custom colored elements on my website. For instance, I have a hundred navigation squares on the site, each with its own unique color. The only solution I can think of is creating separate CSS classes for each color, but t ...

javascriptcss

How to Insert a Background Image into Advanced Custom Fields (ACF) using CSS

Hey there, I'm facing a bit of a challenge with this particular section. In the past, I've only included ACF PHP within HTML when the background image was directly in the HTML code. Now, however, I have two shapes specified in my CSS using pseudo ...

phphtmlcsswordpressadvanced-custom-fields

What is the best way to arrange cards in a specific order with breaks in between each flip

I am currently working on creating flip cards using HTML and CSS. I have successfully implemented the hover effect which flips the cards when hovered over. Now, my goal is to make the cards automatically flip one after the other at specific time intervals ...

javascripthtmlcss

Adjustments made to the size of the h1 font

I am perplexed by the fact that these two h1 tags have different font sizes, even though they have identical properties and declarations. From what little knowledge I have, it seems like it may be related to inheritance; considering one h1 tag is nested an ...

csstypography

Arabic and Latin letters become intertwined

I am currently working on implementing an Arabic version of our website without affecting the other languages. The goal is to keep the changes to the markup minimal. Here is the English version: <div class="location_description"> <span itemscope ...

htmlcss

When incorporating `Ionic/core` into my project, it unexpectedly alters my scss styling

Exploring StencilJs: In my project using StencilJs, I aim to create a wheel time picker with 3 columns for hours in 12-hour format and minutes which can vary based on the provided array such as [0,15,30,45] or [00,30]. Additionally, there will be options ...

csssassweb-componentstenciljs

Tips for creating a responsive image with a gradient overlay

Having trouble articulating my query, so here's a fiddle: https://jsfiddle.net/8zsqydj0/ .background-img-wrapper:before { content: ""; top: 0; left: 0; position: absolute; height: 100%; width: 100%; background: linear-gradient(to righ ...

htmlcsstwitter-bootstrapbootstrap-4linear-gradients

Tips for avoiding flickering in safari during @-webkit-keyframe animations

At times, Safari may experience flickering during the execution of a CSS animation. Despite extensive research and attempts to find a solution, the issue persists. The HTML code snippet is as follows (refer to jsfiddle for more details) <div class="do ...

csscss-animationskeyframe

Issues with jQuery animate not functioning properly when triggered on scroll position

I found a solution on Stack Overflow at this link, but I'm having trouble implementing it properly. The idea is to make an element change opacity from 0 to 1 when the page is scrolled to it, but it's not working as expected. The element is locat ...

jquerycss

Troubleshooting SCSS Issues in NextJS

Can anyone help me with debugging SCSS in NEXT.JS? I've been trying to figure it out but haven't had any luck. When I use @debug on a SCSS module, nothing shows up in the console. Do I need to configure something in the next.config.js file or is ...

cssdebuggingsassnext.js

Unable to alter Mui input label color upon focus using theme.ts

In my next.js app, I'm facing an issue with changing the color of the label in a Material UI input field using Mui. Despite updating the theme.ts file to change the border bottom color and label color, only the border bottom color is being applied. T ...

javascriptcsstypescriptmaterial-uiemotion

Adjust grid column sizes automatically when a smaller number is declared - tailwind

I am working with the tailwind grid system and have specified 6 columns for each row. However, if the number of elements is less than 6, I would like it to resize them to 3. <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 grid-flow-r ...

cssgridtailwind-css

"Applying a background color to a BorderPane element is successful when done inline, but encounters issues when

So I have a border pane and I am trying to set its background color to black using CSS. When I directly set the style inline, like this: borderPane.setStyle("-fx-background-color: black;"); it works perfectly fine. However, when I try to add a class s ...

javacssjavafx

Display content in two columns. If the width of the left column is too narrow, move the content in the right column

In my layout, there is a wrapper div with two child elements: left div and right div. The left div contains text which can be lengthy, while the right div holds an image loaded asynchronously without known width: <div id="wrapper"> <div id="l ...

htmlcss

"Utilizing a media query to display an anchor link at the top based

How can I create a "Back to Top" link that automatically scrolls mobile and tablets to the top of the page? Usually, I would achieve this using JavaScript by detecting the window and body height. Is it possible to accomplish this using a media query? @me ...

css

Tips for resolving alignment issues in a chat box:

I am currently working on adjusting the alignment of my chat box app. I have placed 3 div elements with the class .bubble inside a div with the class .chatlines, but they appear to be clustered together instead of aligned properly. It's challenging to ...

htmlcssalignmenttext-alignmentdivide