I am currently utilizing bootstrap 4 for the construction of a website. I have encountered an issue where my homepage does not display properly on handheld devices when using Google Chrome's device toggle toolbar. The homepage requires scrolling to view all three posters, but if I click on movie1, the content displays perfectly without any scrolling necessary. It is worth noting that both pages utilize the same CSS file.
To address this issue, I have ensured that the following code is included in both HTML files:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Additionally, the following media queries have been integrated into the CSS file:
@media (min-width: 768px) and (max-width: 992px){
}
@media (min-width: 480px) and (max-width: 767px) {
}
The head code snippet for the homepage is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=0">
<link rel="icon" href="movie-symbol-of-video-camera_icon-icons.com_72981.png">
<link rel="stylesheet" href="style.css">
<title>indextest</title>
<style>
</style>
</head>
And for the movie1 page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="icon" href="../static/images/movie-symbol-of-video-camera_icon-icons.com_72981.png">-->
<link rel="icon" href="movie-symbol-of-video-camera_icon-icons.com_72981.png">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
If you have insights or suggestions on why one page is functioning correctly while the other is not, please do share your thoughts. Thank you!
Below are images illustrating the problem: https://i.sstatic.net/FS9No.png
Situation where content fits perfectly with no need for scrolling below: https://i.sstatic.net/0RWu3.png