Html Question posted in
Some basic documentation can be found here.

Can't seem to centre page on mobile browser load up, automatically corrects itself to where I want it after scroll. html/css related

How the website loads on mobile

After a scroll the sections jumps to the desired loading location

So, I’m trying to centre a section with a heading, paragraph & button on a welcome page. My code successfully works for a computer browser but when i load it up on a mobile browser i run into the following issue;

  • The centred section is much lower than the centre, and when i scroll using my finger it automatically springs to life and jumps to the expected centre position. This is tatty looking in my opinion, I have seen multiple websites with working examples of what I aim to achieve but for the life of me I just can’t figure it out.

Please see a very simplifed version of code below;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="index.js"></script></head>
<body>
    <section>
        <h1>Hello</h1>
        <p></p>
        <button></button>
    </section>
</body>
</html>

html, body{
    padding: 0;
    margin: 0;
    background-color: black;
}
body{
    display: block;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
section{
    position: fixed;
    background-color: white;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

I have searched the web for a potiental fix for this before but ended up dodging it instead. I’m back again because I really like landing pages or sections that are the same height & width as the screen size. This could be a simple case of not searching using the correct terminolgy but… I have searched for hours again this time again.

Any pointers to help or even the solution would be greatly appreciated.

TIA

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    For anyone struggling with this issue also. Here is where i found the answer to the issue CSS3 100vh not constant in mobile browser

    & here is the piece of code that fixed the issue;

    min-height: -webkit-fill-available;


  2. 0

    There is probably no need of so many rules & selectors.

    Here is a basic grid layout example for that little content:

    html {
  display: grid;
  place-content:safe center;
  min-height: 100vh;
  min-height: 100svh;/* Small Viewport Units  for mobile */
  background-color: black;
  color: white;
}

body {
 /* margin: auto; *//* instead place-content:safe center;  if you prefer */
}

section {
  text-align: center;  /* texts need to be centered too ? */
}
    <section>
  <h1>Hello</h1>
  <p>paragraph</p>
  <button>button</button>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search