Mobile Chrome: Exploring Height-Based Sizing and Scrolling

Lately, I've been working on a project where I've incorporated elements with percentage heights. While this works smoothly on most browsers, I've encountered an issue with Chrome Mobile.

Essentially, when users scroll up on the page, the address bar becomes visible and adjusts the screen height. This alteration in height causes the elements to resize, resulting in a noticeable "jump" after the scrolling action ceases.

Is there a solution to prevent this behavior while still utilizing elements sized with viewport percentage?

androidhtmlcssgoogle-chromemobile-chrome

Answer №1

Absolutely! Fixing this issue with CSS is totally achievable. Just incorporate @media queries similar to the example below:

@media only screen
    and (min-device-width: 320px) //adjust based on your screen size requirement
    and (max-device-width: 568px){

    .element{
        width: 50%;
    }
}

Feel free to include multiple media queries as necessary. Remember to tailor the min-device-width and max-device-width values according to your specific needs, taking into account the device being targeted.

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

Guide to pulling and showcasing information from XML at 30-second intervals using JQUERY AJAX and HTML

Seeking assistance as a beginner. Looking to retrieve and showcase data (HTML / PHP page) from XML every 30 seconds. XML FILE : <MAINData> <LiveData> <Field no="1">ENG ODI</Field> <Field no="2">ENG</Field> ...

javascriptjqueryhtmlajaxxml

Enlarge an image when hovering over it

I am currently in the process of creating a website and I have encountered an issue. When I hover over an image, I want it to zoom in, but unfortunately it does not zoom within the designated div area. How can I fix this problem? <div class="container" ...

htmlcss

Transferring HTML variables to CSS

I've been searching for an answer without much luck. Is it possible to transfer variables from HTML to CSS, maybe using data attributes? I want to display different backgrounds based on vendors using media queries on brand pages. I know inline CSS d ...

csssassshopify

Comparison of Head.js screen size and CSS3 @media query: benefits of prioritizing the former

What are the benefits of using Head.js screen size detection instead of CSS3 media queries? Head.js Screen Size Detection .lt-1024 #hero { background-image: (medium.jpg); } CSS3 @media query @media only screen and (max-width: 1024px) { #hero { back ...

csshead.js

The search and sorting functionality in jquery DataTables is malfunctioning

I am facing difficulties with sorting and filtering the datatable as none of the JS functions seem to be working properly. I have already included the necessary JS files. Here are some details: I am connecting to a database to retrieve data in JSON format. ...

javascriptjqueryajaxhtmldatatable

create the text with double bold - adjusted pages

Is there a method to enhance the boldness of the text without adjusting the font size? Currently, the following styling is applied: numbers: { fontSize: 30, color: '#31C283', fontWeight: 'bold', }, Is there a way to m ...

javascriptcssreactjstypescriptreact-native

Splitting HTML code into separate sections based on tables is the main feature of Simple HTML DOM

My task involves scraping data from a webpage, but the challenge lies in the fact that the content is not enclosed within divs or any specific tags. The only distinguishing feature I have found is a particular table that separates the chunks of data I requ ...

htmlweb-scrapingsimple-html-dom

The CSS variable for the Bootstrap Modal header padding, var(--bs-modal-header-padding), is missing or not defined

Is there a way to use the modal-header CSS property inside a normal div instead of inside a modal? When I try to do so, I am getting an error saying that the variable is not defined. Can someone please help me understand what I am missing? <html lang= ...

htmlcssmodal-dialogbootstrap-modalbootstrap-5

Maintain course focus when updating

I'm currently working on a to-do list where clicking on an item adds the "checked" class. However, when I refresh the page, everything reverts back to its original state without the checked class. How can I maintain the state of the checked items? I& ...

javascriptphphtml

Unable to adjust the top padding of the navbar to 0 pixels

Having recently started learning HTML and CSS, I am encountering an issue with the padding on my navbar. I am unable to get it to align with the top of the site as there is a persistent space between the navbar and the top. Below is my HTML code: <!do ...

htmlcssnavbarpadding

What is the best way to create a repeating Jquery loop in code?

Hey there! I've been working on creating a button that toggles the background color from white to yellow and back again using Jquery. However, I've hit a bit of a roadblock with implementing a loop function. If you'd like to take a look at m ...

jqueryhtmlcss

Is it possible to modify the button icon on hover by utilizing chakra-ui and vanilla-extract?

My stack includes nextjs13, chakra-ui, and vanilla-extract Seeking guidance on how to update both icon and text within a button upon hover, utilizing chakra-ui and vanilla-extract. The current setup of my button is as follows: <Button > <svg wi ...

cssreactjsnext.jschakra-uivanilla-extract

Implement a Horizontal view feature in the FullCalendar API

In my project, I am utilizing the full-calendar API to create a vertical resource view. Everything works perfectly when I have around 10 resources. However, once I increase the number of resources in my project, the view becomes distorted. https://i.sstat ...

htmlcssfullcalendar

How can jQuery select an element by its id attribute by referencing the href attribute of a different element?

Whenever the user interacts with a div.nav element, jQuery switches its class to active. Presently, it applies display: block to all three of the div.content elements. I aim for jQuery to only apply the display: block property to the div.content elements t ...

jquerycss

What is the best way to retrieve the matching value from an API for a List<string> in Flutter?

This is the response from my API: var = ''' [ { "entity_id": "86", "building_name": "Burj Khalifa", "location": "Al Ttay", "image_field": "1595916594 ...

androidiosflutterdartflutter-layout

While working with Xamarin.Forms, I encountered an error in my XAML file

https://i.sstatic.net/MVSzq.png Attempting to remove a child layout was unsuccessful. ...

androidvisual-studioxamlxamarin.forms

Checkbox in Angular FormGroup not triggering touched state

There seems to be an issue with the Angular form when checking if the form is touched, especially in relation to a checkbox element. Despite the value of the checkbox changing on click, I am seeing !newDeviceGroup.touched = true. I'm not quite sure wh ...

javascripthtmlangulartypescriptangular-reactive-forms

Utilizing jQuery or Javascript to obtain the title of the current webpage, find a specific string within it, and then apply a class to the corresponding element

Let's imagine I start with this: <title>Banana</title> and also have some navigation set up like this: <ul id="navigation"> <li> <a href=#">Banana</a> </li> </ul> Upon loading the sit ...

javascriptjqueryhtmlcss

What is the technique to shift the blocks to the adjoining column?

https://i.sstatic.net/6jeHV.png Will these elements flow into the adjacent column as I continue adding more of them? GS0 represents the background and block is a class defining the block. .GS0{ min-height: 90vh; display: flex; justify-content: ...

htmlcssreactjs

Uncover each image individually

I have a task in React where I am displaying a list of images using the map method, and I want to reveal each image one by one after a delay. The images I am working with can be seen here and I need them to be revealed sequentially. The following code sni ...

javascriptcssreactjs