Image not showing on mobile version

Question

I tried to add a jsfiddle, but was not able to .

I am trying to get a hang of mobile design and I am having a little issue, with an image disappearing from the mobile version of the site.

I am sure that I am messing someone on my code.

I tried floating the image, display: inline-block and the image keeps hiding behind the fixed nav bar.

the page in question is hosted here: http://try.lucianooliveira.net/flooring.html and when you resize the window to 320x480 the image completely disappear.

this is what I have under my media queries

 @media screen and (max-width: 768px) {

   .main_content {
  width: 100%;
  height: 80px;
  margin-top: 100px;
  display: block;
  }



  .main_content h1 a {
    margin-top: -20px;
   font-size: 1em;
   text-align: center;
  }

  .main_content p {
    margin-top: 10px;
  }


  .logo,
  .logo li,
  .col  {
    display: block;
    width: initial;
    height: initial;
    margin: initial;
  }

  .logo h1 {
  font-size: .6em;
  display: block;
  width: 100%;
  text-align: center;

}

  .nav ul {
    margin-top: 10px;
  }

  .nav ul li a {
    text-decoration: none;
    color: white;
    text-align: center;
  }

  .column1 {
  float: left;
  width: 100%;

  }

.column1 h1 {
  color: purple;
  text-align: center;
  width: 100%;
}

.clear:before,
.clear:after {
    content: " ";
    display: table;
}

.clear:after {
    clear: both;
}


}

Answer 1

You're image isn't disappearing. It's hiding behind the fixed bar.

The reason this happens is because fixed elements get popped out of the normal flow of an html document. You need to therefore compensate for it's height by applying a margin-top to the image in order to push it and everything down.

add this to your css media query and see what happens:

@media screen and (max-width: 768px) {
/*your existing code goes here, but add the following ruleset */
  .wrapperFlooring img {
    margin-top: 95px;
  }
}

I chose 95px because that's the height of the fixed nav... this number can vary!