As a beginner in programming, I recently deployed my first project to github pages. However, I am facing two issues:
- While the desktop version of the site looks perfect, the cards on the home page appear unseparated on mobile and iPad devices. Despite trying to add margin and other adjustments, the issue persists.
- I have heard about organizing files into folders like Css, image, JS, etc., when uploading them to a server. But I'm confused about placing HTML pages (excluding index) in a "static" directory while leaving the index on the root directory. Can someone explain the reason for this?
You can view my github site here:
Below is the HTML code for the index page:
<!-- Home page -->
.grid-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: min-content;
justify-content: space-between;
grid-template-areas:
"hd"
"feat"
"main"
"ft";
}
.menu {
list-style-type: none;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.featured-post {
grid-area: feat;
padding: 0 20px;
border-bottom: 2px dotted #ffffff;
font-size: 2.5rem;
background-image: url("../img/feat-post-img.png");
background-size: contain;
}
.feat-post-link {
text-decoration: none;
color: #ffffff;
}
.hd-feat-post {
color: #dcbff3;
padding-top: 0px;
}
.txt-feat-post {
font-size: 1.5rem;
padding-top: 0px;
}
.main-home {
grid-area: main;
display: flex;
flex-direction: column;
gap: 20px;
margin: 30px 30px;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Personal Blog Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="css/style.css" />
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet" />Here are the CSS files for the mobile layout:Github Link
https://i.sstatic.net/mLS9c.jpg
Any help or insights would be greatly appreciated!