'Div has 0 height on mobile

I have 3 divs that are arranged in a row using bootstrap

 <div className="tile col-sm-4"> 
      <img src='./cabnets.jpg' alt="wood" />
      <div className="text">
      <h1>Superior Cabniets</h1>
      <h2 className="animate-text">More lorem ipsum bacon ipsum.</h2>
      <p className="animate-text">Bacon ipsum dolor amet pork belly tri-tip turducken, pancetta bresaola pork chicken meatloaf. Flank sirloin strip steak prosciutto kevin turducken. </p>
  
      </div>
     </div>

I am styling them with css to provide a hover effect with the following css

.tile
{
 
  height:30rem;
  background-color:#99aeff;
  display:inline-block;
  background-size:cover;
  position:relative;
  cursor:pointer;
  transition: all 0.4s ease-out;
  box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.44);
  overflow:hidden;
  color:white;
  font-family:'Roboto';
  
}
.tile img
{
  height:100%;
  width:100%;
  position: absolute; /* not appearing on mobile */ 
  top:0;
  left:0;
  transition: all 0.4s ease-out;
}
.tile .text
{
   z-index:5; 
  position:absolute;
  padding:30px;
  height:calc(100% - 60px);
}

I am expecting them to collapse on top of each other for mobile screens, however instead they have completely disappeared. I have checked the developer tools and I see on mobile my divs are still there but their height is 0. height-0
I have no css breakpoints in my code, or any other code that affects the .tile class. Full sized screens show the 3 divs perfectly.

javascripthtmlcssreactjs


Solution 1:[1]

I think that image already has a height. What it doesn't have is "width". Try adding col-12 or col-xs-12 to the .tile depending on the bootstrap version you are using.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Aravind Prabash

Related Questions