Ahmer Ali Ahsan Ahmer Ali Ahsan - 23 days ago 11
Sass (Sass) Question

In responsive view border is not showing on divs

Problem: My below code is working fine on desktop or landscape devices. But When I switch to mobile / responsive view div border is not showing. I don't know what I am doing wrong in below code. Please some one take me out from this little problem.

Head Code:

<meta name="viewport" content="width=device-width, initial-scale=1">


HTML Code:

<div class="ah-header">
<div class="ah-logo"></div>
<div class="ah-navbar-searchbar"></div>
<div class="ah-nav"></div>
</div>


CSS Code:

.ah-header {
padding: 9px;
background-color: rgb(25, 118, 210);
display: table;
width: 100%;
min-height: 50px;
max-height: 150px;
.ah-logo {
display: table-cell;
width: 250px;
border: 1px solid yellow;
}
.ah-navbar-searchbar {
display: table-cell;
position: relative;
/* Firefox */
width: -moz-calc(100% - 500px);
/* WebKit */
width: -webkit-calc(100% - 500px);
/* Opera */
width: -o-calc(100% - 500px);
/* Standard */
width: calc(100% - 500px);
border: 1px solid yellow;
}
.ah-nav {
display: table-cell;
position: relative;
/* Firefox */
width: 250px;
border: 1px solid yellow;
}
@media only screen and (max-width : 320px) {
.ah-header {
padding: 0px !important;
display: block !important;
max-height: 150px !important;
}
.ah-logo, .ah-navbar-searchbar, .ah-nav {
display: table-row !important;
border: 1px solid yellow;
height: 50px !important;
}
}

Answer

Set your @media query's .ah-logo, .ah-navbar-searchbar, .ah-nav rule to display: block; instead of display: table-row

Side note, I removed all the !important as they are not needed here and you missed a bracket } on the .ah-header rule

.ah-header {
  padding: 9px;
  background-color: rgb(25, 118, 210);
  display: table;
  width: 100%;
  min-height: 50px;
  max-height: 150px;
}
  .ah-logo {
    display: table-cell;
    width: 250px;
    border: 1px solid yellow;
  }

 .ah-navbar-searchbar {
    display: table-cell;
    position: relative;
    /* Firefox */
    width: -moz-calc(100% - 500px);
    /* WebKit */
    width: -webkit-calc(100% - 500px);
    /* Opera */
    width: -o-calc(100% - 500px);
    /* Standard */
    width: calc(100% - 500px);
    border: 1px solid yellow;
  }
  .ah-nav {
    display: table-cell;
    position: relative;
    /* Firefox */
    width: 250px;
    border: 1px solid yellow;
  }
  @media only screen and (max-width: 320px) {
    .ah-header {
      padding: 0px;
      display: block;
      max-height: 150px;
    }
    .ah-logo,
    .ah-navbar-searchbar,
    .ah-nav {
      display: block;
      border: 1px solid yellow;
      height: 50px;
    }
  }
<div class="ah-header">
  <div class="ah-logo"></div>
  <div class="ah-navbar-searchbar"></div>
  <div class="ah-nav"></div>
</div>

Comments