Column in mobile view not working properly

Question

I made a website that has text columns with a class name col. It works fine in desktop view. But in mobile view, 900px or smaller, it doesn't show the last column text since it gets hidden behind footer. I added clearfix hoping it will fix the problem, but it didn't. Anyone knows how to fix this?

My code:

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  font-family: Arial;
}

ul li {
  text-decoration: none;
  list-style: none;
}

body {
  background: #000000;
}

a {
  text-decoration: none;
}

.wrapper-top {
  padding-top: 100px;
  padding-bottom: 40px;
}

#header {
  background-image: url(../images/city-wallpaper.jpg);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  height: 600px;
}

.wrapper {
  background: white;
}

.header-wrapper {
  margin: 0 auto;
  max-width: 1000px;
}

.menu-bar li {
  display: inline-block;
  text-align: center;
  font-size: 20px;
  text-decoration: none;
}

.menu-bar {
  padding-top: 20px;
}

.menu-bar a {
  text-decoration: none;
  padding: 0px 20px;
  color: #e6e6e6;
}

.menu-bar a:hover {
  color: #ffffff;
}

.logo-left {
  float: left;
  width: 100px;
  height: 110px;
  background: #1e62cc;
  color: white;
  padding: 10px;
}

.logo-left p:last-child {
  font-size: 15px;
  float: left;
}

.logo-left p:first-child {
  font-size: 32px;
  font-weight: bold;
}

.logo-left p {
  float: left;
}

.section {
  max-width: 1000px;
  margin: 0 auto;
}

.header-section {
  font-size: 110px;
  color: white;
  clear: both;
}

.header-section h1 {
  font-family: 'Roboto', Arial;
  font-weight: bold;
}

.read-more-box {
  position: relative;
  top: -8px;
  left: 1000px;
  background: #1e62cc;
  width: 110px;
  height: 110px;
  display: block;
  color: white;
  padding: 10px;
  box-sizing: border-box;
  font-size: 20px;
}

.block-nav {
  position: relative;
  top: -100px;
  background-color: #292929;
  color: white;
}

.block-nav li {
  width: 25%;
  height: 250px;
  background: #2f2f2f;
  float: left;
  list-style: none;
  transition: all .5s;
  padding: 20px;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 22px;
  line-height: 250px;
  text-align: center;
  position: relative;
}

.block-nav li:nth-child(2) {
  background: #191919;
}

.block-nav li:nth-child(4) {
  background: #191919;
}

.block-nav {
  transition: all .5s;
}

.block-nav li:hover {
  transform: scale(1.1);
}

.left {
  width: 40%;
  float: left;
}

.right {
  width: 60%;
  float: right;
}

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.clearfix {
  display: inline-block;
}


/* start commented backslash hack \*/

* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}


/* close commented backslash hack */

.container {
  position: relative;
  top: -70px;
}

.container h2 {
  font-size: 40px;
  color: #1e62cc;
  margin-bottom: 10px;
}

.ctr-image {
  width: 100%;
  float: right;
}

.first {
  width: 50%;
  height: 600px;
  background-image: url(../images/city-wallpaper2.jpg);
  background-repeat: no-repeat;
  float: left;
  padding: 20px;
  box-sizing: border-box;
  font-size: 22px;
}

.first h2 {
  color: #1e62cc;
  font-size: 30px;
  font-weight: bold;
}

.second {
  background-image: url(../images/city-lights.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 50%;
  height: 300px;
  float: right;
}

.second p {
  color: white;
  font-size: 22px;
  box-sizing: border-box;
  padding: 20px;
}

.second-a {
  width: 50%;
  float: right;
  color: black;
}

.second-b {
  width: 50%;
  height: 300px;
  float: right;
}

.second-c {
  width: 50%;
  height: 300px;
  float: left;
  background: blue;
}

.footer-section {
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 40px;
  color: white;
}

.footer-section li {
  list-style: none;
  float: right;
  margin: 0px 20px;
}

.footer-section a {
  color: white;
}

.right {
  float: right;
}

.left {
  float: left;
}

.third-a {
  border-bottom: 1px solid grey;
}

.third-b {}

.article {
  background-color: white;
  color: black;
  width: 100%;
  box-sizing: border-box;
  float: right;
  height: 150px;
  padding: 20px;
}

.article h2 {
  font-size: 24px;
  color: #1e62cc;
}

.second-b {
  background-image: url(../images/town.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.color-box {
  width: 100%;
  height: 300px;
  background-color: rgba(0, 140, 255, 0.5);
  line-height: 300px;
  text-align: center;
  cursor: pointer;
}

.color-box:hover {
  background-color: rgba(0, 140, 255, 0.8);
}

.color-box-content {
  color: white;
  font-size: 22px;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

.color-box-content i {
  vertical-align: middle;
  margin-right: 10px;
}

.block {
  position: absolute;
  top: -100px;
  left: 20px;
}

.top-link {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background: #1e62cc;
  float: right;
  color: white;
  cursor: pointer;
}

.top-link a {
  color: white;
}

.top-link:hover,
.read-more-box:hover {
  background: #174b9a;
}

.equal-height-container {
  margin-bottom: 40px;
}

.top-link span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

.logo-right {
  width: 50px;
  height: 50px;
  line-height: 50px;
  background-color: #e31e09;
  float: right;
  text-align: center;
  color: white;
  cursor: pointer;
  position: relative;
}

.logo-right:hover {
  background-color: #c70000;
}

.logo-right .fa-bars {
  display: inline-block;
  vertical-align: middle;
}

.nav-expanded {
  display: block;
}

.logo-right {
  display: none;
}

.menu-bar-open {
  list-style: none;
  display: inline-block;
  padding-top: 20px;
}

.menu-bar-open li {
  display: inline-block;
  font-size: 22px;
  color: white;
}

.menu-bar-open a {
  color: white;
  padding: 0 20px;
}

.menu-bar-open li a:hover {
  color: #dcdcdc;
}

.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                      supported by Chrome and Opera */
}


/*  FEATURES.HTML  */

#header-features {
  background-image: url(../images/city-wallpaper.jpg);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  height: 70px;
}

.features-section {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.features-header {
  font-size: 70px;
  margin-bottom: 20px;
}

.features-text {
  max-width: 700px;
  margin: 0 auto 20px;
  padding: 0 10px
}

.features-table {
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.col {
  width: 25%;
  float: left;
  height: 100%;
  box-sizing: border-box;
  padding: 10px;
}

.col:nth-child(odd) {
  background: #dedede;
}

.col:nth-child(even) {
  background: #f9f9f9;
}

.col h2 {
  font-size: 24px;
}

.col li {
  padding: 10px;
  border-bottom: 1px solid grey;
  text-align: left;
}


/* SERVICES */

.services-section {
  padding: 0 10px 50px;
  margin: 0 auto;
  max-width: 600px;
}

.services-section h3 {
  font-size: 30px;
  margin-bottom: 10px;
  color: red;
}

.services-section p {
  padding-bottom: 10px;
}


/*CONTACT*/

.contact-container {
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  margin-bottom: 20px;
}

.contact-section {
  width: 60%;
  float: left;
  padding: 40px;
  box-sizing: border-box;
  background: #F2F2F2;
}

.contact-section h2,
.contact-aside h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.contact-aside {
  max-width: 25%;
  float: right;
  padding: 40px;
  box-sizing: border-box;
  background: #F2F2F2;
  ;
}

.contact-section textarea {
  width: 100%;
  margin-top: 30px;
  height: 100px;
  margin-bottom: 20px;
}

.textfield input {
  width: 50%;
  height: 30px;
  margin-bottom: 20px;
}

.textfield {
  font-weight: bold;
}

.textfield p {
  margin-bottom: 10px;
}

.contact-btn {
  width: 100px;
  height: 30px;
  border: 0px;
  background: #4DA0E9;
  cursor: pointer;
  outline: 0;
  /* läheb vaja kuna muidu kui on active tekkib piirjooned */
  color: white;
  font-size: 18px;
  font-family: Arial;
  border-radius: 4px;
  color: white;
}

.contact-btn:hover {
  background: #428BCA;
}

.contact-header {
  text-align: center;
  font-size: 70px;
  margin-bottom: 20px;
}


/*ABOUT*/

.about-section {
  padding: 0 10px 50px;
  margin: 0 auto;
  max-width: 600px;
}

.title {
  text-align: center;
  font-size: 70px;
}

**RESPONSIVE CSS** @media screen and (max-width: 900px) {
  .header-section h1 {
    font-size: 70px;
    margin-top: 100px;
  }
  .read-more-box {
    position: static;
    margin-top: 20px;
  }
  .col {
    width: 100%;
    height: auto;
  }
  .menu-bar-open li a:hover {
    background: #960000;
    color: white;
  }
  .contact-section,
  .contact-aside {
    width: 100%;
  }
  .contact-aside {
    max-width: 100%;
  }
}

@media screen and (max-width: 700px) {
  .header-section h1 {
    font-size: 40px;
  }
  .menu-bar li {
    display: block;
  }
  .read-more-box {
    position: static;
    margin-top: 20px;
  }
  .menu-bar {
    display: none;
  }
  .logo-right {
    display: block;
  }
  .menu-bar-open {
    position: absolute;
    top: 50px;
    right: 0;
    list-style: none;
    background: #e31e09;
    display: none;
    padding-top: 0px;
  }
  .menu-bar-open li a {
    color: white;
    padding: 20px;
    width: 200px;
    float: left;
  }
  .menu-bar-open li {
    display: block;
  }
  .textfield input {
    width: 100%;
  }
}

@media screen and (max-width: 500px) {
  .first,
  .third-a,
  .third-b,
  .second-a,
  .second-b,
  .second,
  .second-c,
  .left,
  .right {
    width: 100%;
  }
  .first {
    height: 300px;
  }
  .header-section {
    margin-top: 80px;
  }
  .block-nav {
    top: -200px;
  }
  .fa-4x {
    font-size: 2em;
  }
  .block-nav li {
    width: 50%;
    height: 150px;
    line-height: 150px;
  }
  .block {
    top: -50px;
  }
  .container {
    padding: 20px;
  }
  .header-section {
    margin-top: 20px;
  }
  .left,
  .right {
    width: 100%;
  }
  .footer-section li {
    float: none;
    margin: 10px 0px;
  }
  .footer {
    padding: 20px;
  }
  .nav-expanded {
    display: block;
  }
  .contact-section {
    padding-top: 50px;
  }
  .footer-section {
    padding: 20px;
  }
}

!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>this is the title</title>

  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 900px)">

</head>

<body>

  <div id="header-features">
    <div class="header-wrapper" id="top">
      <div class="logo-left">
        <p>COOL</P>
        <p>website</p>
      </div>
      <div class="logo-right" id="menu-btn">
        <span>
    				<i class="fa fa-bars fa-2x" aria-hidden="true" ></i>
    			</span>
      </div>
      <ul class="menu-bar-open">
        <li><a href="index.html">Home</a></li>
        <li><a href="features.html">Features</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact-us.html">Contact us</a></li>
        <li><a href="about.html">About</a></li>
      </ul>
    </div>
  </div>
  <div class="wrapper wrapper-top">
    <div class="features-section">
      <div class="features-container">
        <h2 class="title">Features</h2>
        <p class="features-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, inventore, ipsa, quidem, nam culpa error odit alias perferendis fugiat similique ab illum temporibus ducimus sint deserunt recusandae consequatur facere voluptate nulla quis nemo
          doloribus deleniti odio modi officiis provident debitis commodi. Et minus ullam molestias accusantium quaerat! Laudantium, tempora, reiciendis.</p>
      </div>

      <div class="features-table clearfix">
        <div class="col">

          <ul>
            <li>
              <h2>lorem</h2>
            </li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, nisi dignissimos earum consequatur officiis totam velit delectus iusto vero dolor reprehenderit maiores voluptatibus recusandae non suscipit mollitia neque aliquam eos?
            </li>
            <li>Odd and even are keywords that can be used to match </li>
            <li>Odd and even are keywords that can be used to match </li>
            <li>Odd and even are keywords that can be used to match </li>
          </ul>
        </div>
        <div class="col">
          <ul>
            <li>
              <h2>ipsum</h2>
            </li>
            <li>Odd and even are keywords that can be used to match </li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, inventore assumenda nostrum commodi fuga necessitatibus reprehenderit earum officiis incidunt velit. </li>
            <li>Odd and even are keywords that can be used to match </li>
            <li>Odd and even are keywords that can be used to match </li>
          </ul>

        </div>
        <div class="col">
          <ul>
            <li>
              <h2>sit</h2>
            </li>
            <li>Odd and even are keywords that can be used to match </li>
            <li>Odd and even are keywords that can be used to match </li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, possimus labore harum quas doloremque laboriosam!</li>
            <li>Odd and even are keywords that can be used to match </li>
          </ul>

        </div>
        <div class="col">
          <ul>
            <li>
              <h2>amet</h2>
            </li>
            <li>Odd and even are keywords that can be used to match </li>
            <li>Odd and even are keywords that can be used to match </li>
            <li>Odd and even are keywords that can be used to match </li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, quas, maxime, voluptate inventore vero blanditiis eveniet recusandae reprehenderit perspiciatis minima maiores expedita rerum magni aspernatur. </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="footer-section">
    <div class="left">
      <a href="">Contact information</a>
    </div>

    <div class="right">
      <ul class="footer-nav">
        <li><a href="">Contact us</a></li>
        <li><a href="">Copyright</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Features</a></li>
      </ul>
    </div>
  </div>
  <script src="script/jquery-3.2.0.min.js"></script>
  <script src="script/script.js"></script>

</body>

</html>

Answer 1

The problem is here:

.features-table {
  ...
  height: 500px;
}

The height is fixed to 500 pixels at all screen sizes. You need to override it in your media query.

@media screen and (max-width: 700px) {
  ...
  .features-table {
    height: auto;
  }
}

Answer 2

You can try to change the px to %
It because % is depend on the screen,if you set 100%, then it will display full screen on you phone, but if you set 100px,maybe it just take a small place on you phone only