in my below code i have page designed using bootstrap html and CSS but it is not looking good on all devices for ex on mobile ... grid looks very zoomed and not responsive i itried to remove grid-template-columns: auto auto; it worked but i need to view 2 columns in each row .. is it bootstrap problem or way i wrote code is not the right way of responsivness?
any help please?
enter image description here
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link href="assets/js/scripts.js" rel="stylesheet" />
<link href="assets/css/style.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css"
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"> </script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="bootstrap.bundle.min.js"></script>
</head>
<style>
.navbar {
background-color: rgb(43, 59, 43) !important;
}
.h2,
h2 {
font-size: 21px;
}
img {
vertical-align: middle;
width: 250px;
}
.grid-container {
display: grid;
grid-template-columns: auto auto;
grid-gap: 10px;
padding: 10px;
}
.grid-container>div {
/*background-color: rgba(255, 255, 255, 0.8);*/
background-color: rgb(235, 235, 235);
text-align: center;
padding: 20px 0;
font-size: 30px;
height: auto;
}
</style>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<img src="assets/images/logo.png" alt="" style="width: 59%;">
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
<a href="menu.html" class="nav-item nav-link active">menu</a>
<a href="#" class="nav-item nav-link">home</a>
<a href="#" class="nav-item nav-link">about </a>
</div>
</div>
</div>
</nav>
<div class="container" ng-controller="CardController">
<div class="grid-container" id="menu-items-container">
</div>
</div>
</body>
</body>
</html>
<script>
products = [
{
"placeImage": "assets/images/item.png",
"placeName": " salad ",
"price": 80
},
{
"placeImage": "assets/images/item.png",
"placeName": " salad ",
"price": 65
},
{
"placeImage": "assets/images/item.png",
"placeName": " salad ",
"price": 30
}
];
console.log(products);
const data = JSON.parse(JSON.stringify(products));
function renderItem(item) {
const base = document.createElement("div");
const img = document.createElement("img");
const title = document.createElement("h1");
const price = document.createElement("h2");
img.src = item.placeImage;
title.textContent = item.placeName;
price.textContent = item.price;
base.appendChild(img);
base.appendChild(title);
base.appendChild(price);
return base;
}
const container = document.querySelector("#menu-items-container");
for (let item of data) {
container.appendChild(renderItem(item));
}
</script>