CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nardong Bagsik
Nardong Bagsik

Reputation: 228

Create a Div Container that will not resize its content

I have a code that creates a card by 2's and here is the code.

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<style>
   .card {
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
          transition: 0.3s;
          width: 450px;
          height: 200px;
          display:inline-block;
          margin: 3px;
        }

         .card:hover {
          box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        }
   div#one {
          width: 30%;
          height: 100%;
          float: left;
        }
   div#two {
          margin-left: 30%;
          height: 100%;
   }
   * {
          font-family: 'Lato', sans-serif;
   }     
</style>
</head>
<body onLoad = "LoadAllData()">


<table width = "74%" align = "center">
<thead>
<tr><td></td></tr>
</thead>
<tbody>
<tr><td>
<div id = "maincontainer" class = "maincontainer" width = "1000px">
</div>
</td></tr>
</tbody>
</table>

<script>
function LoadAllData(){
google.script.run.withSuccessHandler(GenerateMainTable).getData();
}
function GenerateMainTable(data) {
  var createcard = document.getElementById("maincontainer");
  createcard.innerHTML += '<div class="container" align = "center">' 

  for (var i = 1; i < data.length; i++) {
    var imagelink = data[i][0];
    var brand =  data[i][1];
    
    if (data[i][0] === "") { break; }
    createcard.innerHTML += '<div class="card">' +                                      
                            '<div id="one">' +
                            '<img src="'+ imagelink +'" alt="FELCO Prod." height="95%" width="95%" align = "center">' +
                            '</div>' +
                            '<div id="two">'+
                            data[i][1] + "<br>" +
                            data[i][2] + "<br>" +
                            data[i][3] + "<br>" +
                            data[i][4] + "<br>" +
                            data[i][5] + "<br>" +
                            '</div>' +  
                            '</div>'; 
  }
  createcard.innerHTML += '</div>';
}
</script>

</body>
</html>

and here is the output.

enter image description here

I have 2 problems here and thats my question.

1.How can I provide a container that will maintain a 2 column cards (div) even when I resize the browser.

2.How can I resize Image height based on card size.

TYSM

Upvotes: 0

Views: 64

Answers (1)

Will
Will

Reputation: 3241

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100px;
  /* set height to whatever you want */
}

.image {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/3/3b/Rabbit_in_montana.jpg');
  background-position: center;
  background-size: cover;
}

.text {
  padding: 10px;
}
<div class="cards">
  <div class="card">
    <div class="image"></div>
    <div class="text">
      meow, meow, meow
    </div>
  </div>
  <div class="card">
    <div class="image"></div>
    <div class="text">
      meow, meow, meow
    </div>
  </div>
</div>

Upvotes: 1

Related Questions