diff options
| -rw-r--r-- | css/blog-post.css | 12 | ||||
| -rw-r--r-- | css/projects-styles.css | 7 |
2 files changed, 16 insertions, 3 deletions
diff --git a/css/blog-post.css b/css/blog-post.css index 93b15ec..29e0eb9 100644 --- a/css/blog-post.css +++ b/css/blog-post.css @@ -209,6 +209,18 @@ img { /* Center the blog post horizontally */ } + .project-post { + padding-top: 3%; + width: 90%; + /* Set width to 90% of the screen */ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: justify; + margin: 0 auto; + } + h1 { font-size: 1.75rem !important; /* Reduce h1 font size on mobile */ diff --git a/css/projects-styles.css b/css/projects-styles.css index 4761443..5cf1843 100644 --- a/css/projects-styles.css +++ b/css/projects-styles.css @@ -4,9 +4,10 @@ body { min-height: 100vh; + width: 100vw; display: flex; flex-direction: column; - overflow: auto; + overflow-x: hidden; position: relative; background-color: #f9f9f9; margin: 0 !important; @@ -59,7 +60,7 @@ h4 { p { font-size: 1rem !important; font-weight: 400; - width: 300px; + width: minmax(250px, 1fr); text-wrap: wrap; } @@ -135,7 +136,7 @@ a { .projects-grid { display: grid; gap: 1em; - grid-template-columns: auto auto auto; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-auto-flow: row; } |