CODEWITHSUNDEEP
cssresponsive-design
tramboo
tramboo

Reputation: 25

Why CSS is not working as desired on android?

The CSS media query for small devices isn't working for Android when screen is rotated in landscape mode, the background color isn't changing, and the form overflows.

The site works good, when screen rotation is turned off, I don't know why is this happening, since there is no problem in IOS, only in Android.

The CSS code:

* {
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

body,
html {
  height: 100%;
  margin: 0;
}

body {
  background: linear-gradient(to top left, #5487ab 17%, #ffffff 102%) fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 549px) {
  .houseImg {
    display: none;
  }
  .container {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-color: #f1f1f1e0;
    height: 386px;
    width: 278px;
    border-radius: 9px;
    margin: auto;
    margin-top: 4rem;
  }
  .brand {
    display: block;
    margin: auto;
    width: 29%;
    padding-top: 28px;
  }
  .brandName {
    font-family: 'Source Serif Pro', serif;
    display: block;
    text-align: center;
    font-size: 19px;
    color: #0060a3;
    letter-spacing: 0.4px;
    margin: 0;
    margin-top: 7px;
  }
  .usrTxtField {
    background-color: #f1f1f1e0;
    width: 237px;
    height: 31px;
    border: 1px solid #8c8b8b;
    border-radius: 7px;
    font-size: 16px;
    padding-left: 8px;
    font-family: 'Maven Pro', sans-serif;
    color: #252525;
    transition: none;
    display: block;
    margin: auto;
  }
  .usrTxtField:focus {
    border: 2px solid #3d79a2;
  }
  .usr {
    margin-left: 20px;
    margin-bottom: 4px;
    margin-top: 20px;
    font-family: 'Maven Pro', sans-serif;
    font-size: 12.5px;
    color: #5a5a5a;
  }
  .submitLogIn {
    background-color: #0060a3;
    border: none;
    display: block;
    margin: auto;
    text-align: center;
    height: 40px;
    width: 125px;
    margin-top: 17px;
    border-radius: 25px;
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.4px;
    font-family: 'Maven Pro', sans-serif;
    cursor: pointer;
  }
  .checkboxSave {
    margin-left: 20px;
    margin-top: 10px;
  }
  .saveText {
    font-family: 'Maven Pro', sans-serif;
    color: #5a5a5a;
    font-size: 12px;
  }
  .forgotPassword {
    font-family: 'Maven Pro', sans-serif;
    color: #0060a3;
    font-size: 12px;
    text-decoration: none;
    margin-left: 18px;
  }
}

The HTML code:

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Art</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Serif+Pro:600&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Maven+Pro:500&display=swap" rel="stylesheet">
  </head>

  <body>
    <div class="gridContainer">
      <div class="container">
        <a href="index.html"><img src="img/artLogo.png" class="brand"></a>
        <p class="brandName">ART PS GROUP</p>
        <form autocomplete="off">
          <p class="usr">Username</p>
          <input type="text" name="usrTxt" class="usrTxtField">
          <p class="usr">Password</p>
          <input type="password" name="password" class="usrTxtField">
          <input type="submit" name="submit" value="Log In" class="submitLogIn">
          <input type="checkbox" name="save" class="checkboxSave"><span class="saveText">Remember me</span><a href="#" class="forgotPassword">Forgot Your Password?</a>
        </form>
      </div>
      <div class="container2">
        <img src="img/birdHouse.jpg" class="houseImg">
      </div>
    </div>
  </body>

</html>

Upvotes: 0

Views: 2211

Answers (3)

Soothran
Soothran

Reputation: 1243

This happens because your android device screen has a height greater than 549px (considering your media query specifications). Naturally in landscape mode, this height becomes device width and hence your media query is ignored.

this is the media query you can target for almost all phones


/* phones (portrait and landscape) ----------- */
@media only screen and (min-width : 320px) {
/* Styles */
}

/* phones (portrait only) ----------- */
@media only screen and (max-width : 480px) {
/* Styles */
}

Upvotes: 2

Ajay Varghese
Ajay Varghese

Reputation: 769

Giving fixed width for DOM elements can mess up the view in small devices. particularly when the given width is not available as the device width goes less than that width.

So while writing media queries for smaller devices, say mobile phones, It would be great if you replace all the fixed widths to percentages. So that they will not overflow from the available space and will stay within the device width.

If you are having issues specifically for landscape, you can handle them using media query and orientation combination.

@media all and (max-width: 768px) and (orientation: landscape) {
}

Above code is enough for writing rules for small devices when used in landscape orientation.

Upvotes: 0

asobak
asobak

Reputation: 329

It is not possible to accomplish responsive design with only one media query. For making responsive design right, please visit and check this site, where media queries are explained and are examples on how to use it.

Android phone and iOS phone doesn't necessarily use the same width and height, most iOS phones uses width: 375px and height: 667px(or width: 667px and height: 375px when in landscape mode), although that is only for iPhone 6/7/8 excluding Plus and other models, you can check width/height which phone use which in Chrome/Mozzila Firefox/etc. in developer mode while emulating mobile devices.

Upvotes: 0

Related Questions