Hello everyone!
Just completed my first tribute page for the Responsive Web Design Cert
Love to get some feedback.
https://codepen.io/mahboibrink/pen/bXgNxW?editors=1100
Cheers!
Hello everyone!
Just completed my first tribute page for the Responsive Web Design Cert
Love to get some feedback.
https://codepen.io/mahboibrink/pen/bXgNxW?editors=1100
Cheers!
Great job. it looks wonderful. Try making it responsive and it will be perfect.
@MahboiBrink Great first project!!!
I made some changes to the #image to make it responsive. Here is the code.
#image {
width: 100%;
height: auto;
display: block;
margin: 0 auto; /* This one liner is very common to center an item */
max-width: 625px;
/* margin-left: auto;
margin-right: auto; */
/* width: 625px; Stops the image from being responsive. */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
/* text-align: center; Not necessary for an image. */
}
#tribute-info {
padding: 0; /* Remove the default padding from the ul element */
width: 96%;
display: block;
font-size: 18px;
/* margin-left: auto;
margin-right: auto; */
font-family: "Pacifico", cursive;
}
#main {
padding: 0 1rem;
}
@media only screen and (max-width: 550px) {
#tribute-info {
width: 96%;
}
}
Last but not least :
Go to Pen Settings --> HTML --> Click โInsert the most common viewport meta tagโ --> Save & Close.