I've been working on creating a CSS template and everything seems to be functioning correctly, except for the grid gap which doesn't seem to work properly on my iPhone. Here's the code I have so far:
<div class="grid">
<h1 class="page-title">
<?php echo $username; ?>
</h1>
<header class="header">
Reviewed
<?php
$sql = $mysqli->query("SELECT `id` FROM `users` WHERE `username`='$username'");
$result = $sql->fetch_assoc();
$result = $result['id'];
$sql = $mysqli->query("SELECT COUNT(rating) FROM `reviews` WHERE `userid`='$result'");
$result = $sql->fetch_assoc();
echo " " . $result['COUNT(rating)'] . " ";
if ($result['COUNT(rating)'] == 1) {
echo "Movie";
} else {
echo "Movies";
}
?>
</header>
<main class="main-content">
Test
</main>
<aside class="sidebar">
Sidebar
</aside>
<footer class="footer">
Footer
</footer>
</div>
CSS:
.grid {
margin: 15px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
grid-template-areas:
"index-title index-title"
"index-header index-header"
"index-main-content index-main-content"
"index-sidebar index-sidebar"
"index-footer index-footer";
grid-gap: 10px;
}
.page-title {
grid-area: index-title;
text-align: center;
}
.header {
grid-area: index-header;
border: 1px black solid;
font-size: 20px;
text-align: center;
}
.main-content {
grid-area: index-main-content;
background-color: green;
}
.sidebar {
grid-area: index-sidebar;
background-color: yellow;
}
.footer {
grid-area: index-footer;
background-color: purple;
}
@media screen and (min-width: 1062px) {
.grid {
margin: 15px;
display: grid;
grid-template-columns: 1fr 500px 500px 1fr;
grid-template-rows: 1fr 1fr 2fr 1fr;
grid-template-areas:
". index-title index-title ."
". index-header index-header ."
". index-main-content index-sidebar ."
" .index-footer index-footer .";
grid-gap: 10px;
}
}
While the gap seems to work fine when I resize the page, it doesn't appear to function as expected on my iPhone SE. Any idea why this might be happening?
Your insights would be greatly appreciated.
Thank you in advance.