Tell us what’s happening:
My code fails for having no media query, when I have a few.
Your code so far
- {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
font-family: ‘Poppins’, sans-serif;
scroll-behavior: smooth;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
#pageWrapper {
height: 2730px;
}
#navbar {
display: flex;
position: fixed;
top: 0;
width: 100%;
margin: auto;
height: 10vh;
background-color: #be3144;
box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
align-items: center;
}
.nav-links{
display: flex;
justify-content: flex-end;
margin-right: 2rem;
flex: 1;
list-style: none;
color: #5f5f79;
text-decoration: none;
overflow: hidden;
}
#navbar li a {
display: block;
text-align: center;
padding: 16.7px 18px;
text-decoration: none;
color: #f2f2f2;
font-size: 25px;
font-weight: 500;
}
li a:hover {
background: #45567d;
}
#welcome-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
background-color: #000;
background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
}
#welcome-section > p {
font-size: 3rem;
font-weight: 200;
font-style: italic;
color: #be3144;
}
#projects > h1 {
font-size: 3rem;
font-weight: 400;
text-decoration: underline;
display:flex;
padding-top: 50px;
padding-bottom: 30px;
justify-content: center;
color: #f2f2f2;
}
h1 {
font-weight: 400;
font-size: 42px;
color: #f2f2f2;
/text-shadow: 1px 1px 2px grey;/
}
h3 {
font-weight: 100;
font-size: 28px;
font-style: italic;
color: #be3144;
margin: 2px;
padding: 6px 10px;
}
#projects {
background-color: #45567d;
padding-bottom: 4rem;
}
.projects-container-1 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 4rem;
width: 100%;
max-width: 1280px;
margin: 0 auto;
margin-bottom: 6rem;
}
.projects-container-2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 4rem;
width: 100%;
max-width: 1280px;
margin: 0 auto;
margin-bottom: 1rem;
padding-bottom: 50px;
}
.btn {
display: flex;
justify-content: center;
padding: 1.1rem 1.1rem;
border-radius: 2px;
text-decoration: none;
color: #f2f2f2;
width: fit-content;
margin: 0 auto;
}
.btn a {
text-decoration: none;
color: #f2f2f2;
}
.btn-show-all {
font-size: 1.4rem;
background-color: #303841;
transition: background 0.3s ease-out;
}
.btn-show-all:hover {
background: #be3144;
}
.btn-show-all:hover > i {
transform: translateX(2px);
}
.btn-show-all > i {
margin-left: 10px;
transform: translateX(0);
transition: transform 0.3s ease-out;
}
#social {
height: 100vh;
background-color: #303841;
padding-top: 100px;
}
#social > h1 {
font-size: 3rem;
font-weight: 400;
display:flex;
padding-top: 90px;
padding-bottom: 0px;
justify-content: center;
color: #f2f2f2;
}
#social h3 {
display:flex;
justify-content: center;
font-weight: 100;
font-size: 28px;
font-style: italic;
color: #f2f2f2;
margin: 2px;
padding: 6px 10px;
}
#footer {
height: 7%;
background-color: #303841;
}
#contact-links {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 7rem 1rem;
border-radius: 2px;
margin: 0 auto;
}
#contact-links {
flex: 1;
}
#contact-links a {
margin-right: 1rem;
margin-bottom: 1rem;
padding: 0.5rem;
border-radius: 5px;
background-color: #f2f2f2;
color: #333;
text-decoration: none;
transition: background-color 0.3s ease;
}
#contact-links a:hover {
background-color: #333;
color: #f2f2f2;
}
}
.profile-link {
color: #ffffff;
text-decoration: none;
margin: auto;
font-size: 1.5rem; /** this is the text**/
}
.profile-link a {
margin: 0 10px;
font-size: 40px;
}
.profile-link i {
margin: 0 10px;
font-size: 1.4rem; /** this is the icon**/
}
#profile-link {
color: #ffffff;
text-decoration: none;
margin: auto;
font-size: 1.5rem; /** this is the text**/
}
#profile-link a {
margin: 0 10px;
font-size: 40px;
}
#profile-link i {
margin: 0 10px;
font-size: 1.4rem; /** this is the icon**/
}
.profile-link a:hover {
color: #007bff;
}
.fab {
font-family: ‘Font Awesome 5 Brands’;
}
.fas {
font-family: ‘Font Awesome 5 Free’;
}
hr {
border: none;
border-top: 3px solid #be3144;
}
.ftext1 {
display:inline-block;
justify-content: center;
padding-top: 25px;
font-size: 18px;
margin-left: 200px;
color: #f2f2f2;
}
.ftext2 {
display:inline-block;
justify-content: center;
padding-top: 25px;
font-size: 18px;
margin-left: 200px;
color: #f2f2f2;
}
/**media queries **/
@media only screen and (max-width: 767px) {
#projects > h1 {
font-size: 1.5rem;
}
}
@media only screen and (max-width: 767px) {
h3 {
font-size: 1.1rem;
}
}
@media only screen and (max-width: 767px) {
#social > h1 {
font-size: 1.5rem;
padding-top: 30px;
}
}
@media only screen and (max-width: 767px) {
#social > h3 {
font-size: 1.1rem;
}
}
@media only screen and (max-width: 767px) {
#contact-links {
flex-wrap: wrap;
justify-content: flex-start;
padding: 2rem 1rem;
}
}
@media only screen and (max-width: 767px) {
.ftext1 {
margin-left: 0;
margin-top: 20px;
text-align: center;
font-size: 16px;
}
}
@media only screen and (max-width: 767px) {
.ftext2 {
margin-left: 67px;
margin-top: 20px;
display:inline-block;
justify-content: center;
text-align: center;
font-size: 16px;
}
}
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.
Your browser information:
User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/110.0
Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage
Link to the challenge: