Home / Questions / 34879
Accepted
lromeraj
Asked: 2020-11-21 03:48:07 +0800 CST 2020-11-21 03:48:07 +0800 CST

Items are unstructured in Google Chrome (Android only)

  • 772

When I initially load the page:

enter image description here

When I reload it:

enter image description here

As you can see, the close button has been completely deformed

This doesn't only happen to me with this button , it also happens to other elements and divisions of other sections of the web page that something similar happens to them, but instead of being deformed, they slide to the left.

It can also be seen on the black background as the "Consult" button, which has also been destructured.

This only happens to me using the Google Chrome browser on mobile devices (Android), but neither in Safari, nor in Opera, nor in Mozilla does this happen to me.

Here is the code for this section:

#gradientbg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  background: #000000;
  opacity: 0.7;
  -webkit-transition: ease 0.8s;
  -moz-transition: ease 0.8s;
  -o-transition: ease 0.8s;
  transition: ease 0.8s;
}

#infoboxerror {
  position: fixed;
  top: 50%;
  left: 0%;
  width: 100%;
  text-align: center;
  transform: translate(0%, -50%);
  background: #FF5555;
  opacity: 1;
  padding: 50px 0px;
  -webkit-transition: ease 0.8s;
  -moz-transition: ease 0.8s;
  -o-transition: ease 0.8s;
  transition: ease 0.8s;
}

#closebuttoninfoboxerror {
  color: #FF5555;
  font-size: 125px;
  padding: 0px 0px;
  background: #ffffff;
  border-radius: 100%;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transition: ease 0.3s;
}

#closebuttoninfoboxerror:hover {        
  box-shadow: none;
}

#infoerrorsection {
  margin-top: 0px;
  color: #ffffff;
  font-size: 60px;
  font-family: 'Fredoka One', cursive;
}
<html>
  
  <head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <meta id ="statusbarcolor" name="theme-color" content="#0092ED" />
  </head>

  <body>
    <!-- Error de asistente -->
    <div id="gradientbg"></div>
    <div id="infoboxerror">
      <i id="closebuttoninfoboxerror" class="material-icons">close</i><br><br>
      <div id="infoerrorsection">
        <h>El asistente personal no se encuentra disponible en estos momentos, por favor, vuelve a intentarlo más tarde</h><br><br>
        <h class="material-icons" style="font-size: 150px;">warning</h>
      </div>
    </div>
  </body>

</html>

html

1 Answers

  1. Best Answer

    Adding this to <head>fixes everything:

     <meta name="viewport" content="user-scalable=no">
    • 2