This is a movie review application. When the screen size is on PC and mobile devices, there seems to be an issue where the movie review gets cut off from the 3rd row onwards. This is visible in the provided image, where only the buttons are partially cut off. If more rows were added, the reviews would be completely hidden.
Attempted solutions like applying height: 100% and width: 100% to the HTML and body elements resulted in an additional vertical scrollbar appearing when displaying the movie listings.
Looking for guidance on how to resolve this issue.
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/2a0c07254d.js" crossorigin="anonymous"></script>
<!-- Additional CSS and Font Links -->
<title>Reviewer</title>
</head>
<body>
<!-- Various HTML elements including forms, headers, and listing divs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="../node_modules/axios/dist/axios.min.js"></script>
<script src="./js/functions.js"></script>
<script src="./js/movies.js"></script>
<script src="./js/main.js"></script>
</body>
</html>
This is my CSS:
<!-- Style rules for various HTML elements including notifications, headers, forms, buttons, and movie list section -->
JavaScript generating HTML for each movie review:
// Function for dynamically creating sections with movie data
function generateHTML(res) {
const movie = res.data;
for (let i = 0; i < movie.length; i++) {
const sections = document.createElement('section');
sections.innerHTML = `
<div class='id'>${movie[i].id}</div>
<ul>
<li> Title: <p class='title'>${movie[i].title}</p> </li>
<li> Runtime: <p class='runtime'>${movie[i].runtime}</p> minutes</li>
<li> Rating: <p class='rating'>${movie[i].rating}</p>/10 </li>
<li> Review: <p class='review'>${movie[i].review}</p> </li>
</ul>
<div class="delete-and-update-btn-div">
<button class="delete-btn">Delete</button>
<button class="update-btn">Update</button>
</div>
`;
movieListDiv.appendChild(sections);
}
}
If you have any suggestions or solutions, please share. Thank you!