Currently, I am designing the homepage using the bootstrap Cover page template. The images displayed are just placeholders. While the site functions perfectly on desktop screens, resizing it to smaller sizes causes the grid layout to collapse into a single column. Additionally, the box-shadow effect fails to adjust according to the new size; it seems like the body is constrained to 100vh, which is not the case. https://i.sstatic.net/PpOkk.png
You can notice that the shadow abruptly ends, failing to extend along with the rest of the page.
Below is a snippet of my code for reference:
body {
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}
.big-box {
max-width: 42em;
}
... (More CSS Code) ...
</html>The issue of row margin disappearing also arises when viewing on mobile devices.
I experimented by removing the h-100 class from the html tag, which resolved my problem on mobile but introduced another issue on desktop screens where the height does not occupy the entire screen.
If anyone could provide insights on how to ensure consistent functionality across both mobile and desktop platforms, I would greatly appreciate your assistance.