Hello, this contains 3 questions pertaining to the media query for max-width 480px.
-
In the media query, I am trying to center the items for my About section. I have used (justify-items: center), but the intro description and button are still not centered. What is the problem here?
-
I would like to center the items in my header. What CSS would fix this?
-
Is there a way to have the Projects section automatically wrap all its children in the background color, or do we have to set this specifically no matter what?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Michelle</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
<h2 id="name">Michelle</h2>
<nav id="navbar">
<ul>
<li name="welcome"><a href="#welcome-section">About</a></li>
<li name="projects"><a href="#projects">Projects</a></li>
<li name="contact"><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="welcome-section">
<div class="welcome-section">
<h1 id="intro">Hello! I'm Michelle.</h1>
<p class="intro-desc">I am learning how to code and this is my first kick at designing a personal website. Please take a look and feel free to send me a message with suggestions and tips ~
</p>
<button>Resume</button>
</div>
</section>
<section id="projects" class="projects">
<h2 class="heading2">Projects</h2>
<p class="header-desc">All of my latest projects are here.</p>
<div class="project-tile">
<div class="project">
<a href="https://github.com/"><img src="https://i.pinimg.com/originals/19/aa/ee/19aaee8246ea2766a47720fbafab5054.png" alt="project 1 image"/>
<p class="project-title">Project 1</p></a>
<p class="project-desc">What this project is about here</p>
</div>
<div class="project" >
<a href="#"><img src="https://i.pinimg.com/originals/6e/d3/45/6ed3458ebe63c1ffaaeca7a4c3b47eca.png" alt="project 2 image"/>
<p class="project-title">Project 2</p></a>
<p class="project-desc">What this project is about here</p>
</div>
<div class="project">
<a href="#"><img src="https://s3.getstickerpack.com/storage/uploads/sticker-pack/cute-dinosaur-2/tray_large.png?bab6f2e455b2369d39fdc70c676078e5" alt="project 3 image"/>
<p class="project-title">Project 3</p></a>
<p class="project-desc">What this project is about here</p>
</div>
</div>
</section>
<section id="contact">
<h2 class="heading2">Let's Connect</h2>
<p class="header-desc">Feel free to contact me with any of options below.</p>
<div class="icons">
<a id="profile-link" href="https://www.linkedin.com/" target="_blank"><i class="fa fa-linkedin-square icon" style="font-size:32px"> Linkedin</i></a>
<a href="https://www.rd.com/list/adorable-puppy-pictures/" id="profile-link" target="_blank"><i class="fa fa-github icon" style="font-size:32px"> Github</i></a>
<a href="https://www.stylecraze.com/articles/most-beautiful-daisy-flowers/" id="profile-link" target="_blank"><i class="fa fa-facebook icon" style="font-size:32px"> Facebook</i></a>
</div>
</section>
</main>
</body>
</html>
:root {
--base-color: #b9e6ff;
}
html {
box-sizing: border-box;
}
body {
margin: 0;
text-align: center;
}
header {
width: 100%;
height: 7%;
background-color: beige;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30px;
position: fixed;
}
nav > ul {
list-style-type: none;
display: flex;
justify-content: space-evenly;
align-items: center;
padding-right: 35px;
}
nav > ul > li > a {
text-decoration: none;
color: black;
padding: 20px;
font-size: 20px
}
li > a:hover {
color: gray;
cursor: pointer;
}
.welcome-section {
height: 100vh;
overflow: auto;
background-color: var(--base-color);
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, minmax(100px, auto));
justify-items: start;
}
#intro {
grid-column: 2 / 5;
grid-row: 2 / 3;
font-size: 5rem;
align-self: end;
}
.intro-desc {
grid-column: 2 / 3;
grid-row: 3 / 4;
text-align: left;
line-height: 2;
font-size: 20px;
max-width: 400px;
}
button {
grid-column: 2 / 3;
grid-row: 4 / 5;
align-self: start;
font-size: 1.1rem;
padding: 15px 25px;
}
button:hover {
cursor: pointer;
}
.heading2 {
font-size: 3rem;
padding-top: 100px
}
.header-desc {
font-size: 20px;
}
.projects {
height: 100vh;
background-color: #BBD0FF;
}
.project-tile {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
margin: 50px 20%;
grid-gap: 10px;
}
div > a > img {
width: 200px;
padding: 30px;
border-bottom: 1px solid black;
}
div > a {
text-decoration: none;
color: black;
}
div > a:hover {
color: white;
}
.project {
border: 1px solid black;
}
.project-title, .project-desc {
font-size: 20px;
}
#contact {
height: 75vh;
background-color: #BBD0FF;
}
.icon {
padding: 20px
}
.icons > a {
color: black;
}
.icons > a:hover {
color: white;
}
@media (prefers-reduced-motion: no-preference) {
* {
scroll-behavior: smooth;
}
}
@media only screen and (max-width: 480px) {
header {
display: block;
height: 15%;
}
#name {
padding: 3px;
font-size: 1.7rem;
}
.welcome-section {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, minmax(100px, auto));
justify-items: center;
}
#intro {
font-size: 4rem;
}
.project-tile {
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 1fr);
}
.projects {
height: 325vw
}
}
Challenge: Build a Personal Portfolio Webpage
Link to the challenge: