My code below features a page designed using Bootstrap HTML and CSS, but it doesn't look right on all devices. For example, on mobile devices, the grid appears zoomed in and unresponsive. I tried removing
grid-template-columns: auto auto;<!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a1b15093a485449544b">[email protected]</a>/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9cfdf3efdcaeb2afb2ad">[email protected]</a>/dist/aos.js"> </script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="492b26263d3a3d3b2839097c6779677b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b5954544f484f495a4b7b0e150b1509">[email protected]</a>/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>