Guide to Positioning Pre-Loader in the Center on Mobile Devices

Despite trying numerous solutions, I'm struggling to center my pre-loader on mobile devices. It looks fine on desktop and mobile landscape orientations, but whenever I switch to mobile portrait, it just won't center properly.

CSS:

    .load-screen{
    background-color: white;
    opacity: 1;
    position: fixed;
    margin-left: auto;
    z-index: 1000;
    width: 100%;
    height: 100vh;
    transition: 0.4s ease-in;
}

.loading-image{
    display: block;
    width: 100%;
    margin-top: 15vw;
    margin-left: auto;
    animation-name: loadscreen;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
    align-items: center;
    justify-content: center;
    text-align: center;

}

Screenshot: Mobile Screenshot

javascripthtmlcsspreloader

Answer №1

When using display:flex, any content inside will become a flex item. By applying justify-content: center, the item will be centered horizontally, while align-items: center centers the item vertically.

To see an example, check out this Fiddle: http://jsfiddle.net/fm3xvzc8/

.load-screen{
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 1;
    position: fixed;
    margin-left: auto;
    z-index: 1000;
    width: 100%;
    height: 100vh;
    transition: 0.4s ease-in;
}

.loading-image{
    display: block;
    width: 100%;
    // margin-top: 15vw; The margins aren't necessary
    // margin-left: auto; The margins aren't necessary
    animation-name: loadscreen;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;

}

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

Put dashes in the middle of each MongoDB post title

In my express app, users can create and view posts. Currently, I search for posts by their title. However, I am encountering an issue when the post title contains spaces. The search function works perfectly for titles without spaces, but it gives an error ...

javascriptnode.jsregexmongodbexpress

What is the best way to place an icon in the lower right corner of a design

I have encountered an issue while building the testimonial section below. The problem arises when the amount of text in each block is not the same, causing the quote icon to be displayed improperly in the bottom right corner. Sometimes, it even extends out ...

htmlcssbootstrap-4

Animate the service item with jQuery using slide toggle effect

Currently, I am working on a jQuery slide toggle functionality that involves clicking an item in one ul to toggle down the corresponding item in another ul. However, I am encountering difficulties in linking the click event to the correct id and toggling t ...

javascriptjqueryhtmlcss

Obtain the value of an element from the Ajax response

Just starting out with Jquery and Ajax calls - here's what I've got: $(document).ready(function () { $.ajax({ type: "GET", url: "some url", success: function(response){ console.log(response); } }) }); Here's the ...

javascriptjqueryajax

Display a persistent bar on the page until the user reaches a specified <div> element through scrolling

Looking to implement a sticky bar at the bottom of my page that fades out once the user scrolls to a specific div and then fades back in when scrolling up and the div is out of view. This bar should only appear if the user's screen size is not large ...

javascriptjqueryhtmlcss

Exploring the World of React Variables

Recently, I've been diving into the world of React and encountered some challenges while styling my components. Personally, I find it more organized to style within the same JavaScript file instead of having a separate one. However, I'm curious a ...

cssreactjs

How can one discern the most effective method to identify JavaScript code that alters particular HTML content on a webpage?

On my website, I have a <p> tag and I am interested in knowing which JavaScript function is responsible for adding text inside this element. Is there a special method in Chrome to add a listener on this tag and pinpoint the script that writes to it ...

javascriptgoogle-chrome

The transitions on my jQuery Mobile page are not functioning correctly

I am currently working on a custom MVC structure using Handlebars and jQuery Mobile. To manually manage routing, I have disabled two jQM parameters: $.mobile.linkBindingEnabled = false; $.mobile.hashListeningEnabled = false; These lines disable link bind ...

javascriptjquerymodel-view-controllerjquery-mobilehandlebars.js

SyntaxError: An unidentified item was encountered at the <head> location

I have encountered an issue while loading a PHP file that utilizes ajax. Initially, the page loads without any errors. However, upon triggering the onclick event on a button, I receive the error message "Uncaught SyntaxError: Unexpected identifier" pointin ...

javascriptphphtmlajax

Is it possible for webkit CSS resize to not function properly when applied to a canvas element that is

Consider this HTML and CSS code snippet: #box { width: 100px; height: 100px; overflow: hidden; resize: both; border: 1px solid black; } #content { width: 100%; height: 100%; } <div id="box"> <canvas id="content"> ...

htmlcsshtml5-canvaswebkit

Occasionally, the Array.filter() method might strip away every element within the array

This situation is really frustrating me. The goal is to have the newArray return all elements except the one where the two ids match, as specified in the code. However, when I add objects to the array and then try to remove them one by one, the results are ...

javascriptarraysreactjs

Adding or Deleting Rows from Input Table

I'm in the process of creating a website that features an input table allowing users to easily add or remove rows at their discretion. The desired UI is shown below: https://i.sstatic.net/EFAlM.jpg Here is the HTML code I have developed so far: & ...

javascripthtmlcssbootstrap-4

How to manage a particular process ID in Node.js?

I am currently working on a node application that allows clients to control a program running on the server. The program needs to run in its own terminal window at all times. Here is the ideal scenario: When a client clicks a button, a command is executed ...

javascriptnode.jsprocesschild-processcommand-line-interface

Images are not displayed when utilizing font-awesome on a MVC 5 website

I'm having an issue where adding font-awesome to the style bundle is causing images not to display correctly. Instead of showing the right icon, I am getting a transparent box. My style bundle configuration looks like this: bundles.Add(new StyleBund ...

csstwitter-bootstrapasp.net-mvc-5font-awesome

Tips on managing the onKeyUp event in a ReactJS form

Here is a simple JavaScript function called numericOdds implemented in home.js file: function numericOdds(e) { var valid = /^[1-9]{1}[0-9]{0,1}$/ var number = /^[1-9]{1}$ | ^[1-9]{1}[0-9]{1}$/ var lastValid = ''; var n; console.log(&apo ...

javascriptreactjs

Combining elements in an array with no existing values using Javascript

While exploring a piece of code, I started pondering over its utility. grid.push([].concat(row)); From what I can tell, this seems identical to grid.push([row]); So, why the extra 'concat' operation? ...

javascriptarrays

Exploring, navigating, and cycling through JSON in Node.js

I'm currently attempting to extract the titles of front page articles from Reddit's RSS feed and running into some issues. Below is the snippet of code I am working with: //var util = require('util'); //var cheerio = require('chee ...

javascriptjsonnode.js

Identify the currently active subitem within the item-active class in a PHP carousel slider

I am working on creating an image carousel slider with 4 items and 4 slides each. These images will act as radio buttons, and I want to highlight the slide corresponding to the selected radio button. So, when the carousel loads, the selected slide should b ...

javascriptphptwitter-bootstrapcss

What methods can I use to generate unique paths within a URL for a website, and how can I assign a distinct status to each path?

I have developed a JavaScript program that allows you to draw using canvas. I have now set up a web server with Node.js in order to enable drawing on the website. Each specific drawing will be saved as a unique URL path so that you can resume where you lef ...

javascriptnode.js

Looking to attach a listener to an element within a modal once it has finished rendering?

Upon clicking a button, a modal window appears. The controller assigned to the modal contains a list of element IDs that need listeners assigned. However, when the controller initializes, the modal has not yet rendered, causing the elements requiring liste ...

javascriptangularjsbootstrap-modal