I manged to center it and managed to get the two texts to look almost similar to the design
What challenges did you encounter, and how did you overcome them?centering the code
What specific areas of your project would you like help with?Better ways to center
Here's an Updated css code for you to use:
body {
background: rgb(148, 184, 252);
height: 100dvh; /* the body need to know the full height if the screen to place the content on the center dynamically */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.attribution {
/* since EVERYTHING in our bosy is centered, lets make our attribution a free man, absolute positioning should do the trick */
position: absolute;
bottom: 0;
font-size: 11px;
text-align: center;
}
.attribution a {
color: black;
text-decoration: none;
font-weight: bold;
}
.container {
display: flex;
flex-direction: column; /* it's better to place it here, right after defining the flex property*/
align-items: center;
justify-content: center;
/* flex-direction: column; */
background: white;
/* margin: auto; */
margin-inline: auto; /* This is the margin on the 'y' axis */
/* give the body a flex property, and place the content center - refer to the "body" for more info*/
/* width: 15%; */ /* This was your error */
width: min-content; /* this is better as we want the container to fit the image just right, */
padding: 20px;
/* margin-top: 200px; */ /* This wont be required */
border-radius: 14px;
}
.container img {
width: 300px;
border-radius: 7px;
}
.container p {
text-align: center;
}
.container h3 {
text-align: center;
}
/* here are a few tips,
- On your browser download the extension "debug css", helps you edit your pages css visually
- also download PixelPerfect, to obtain perfect measurments base on the image provided...
- Hope this helps ;)
*/
I take immense pride in having completed another challenge and in learning new techniques, such as clamp() and calc().
Up to this point, I wouldn't do anything differently.
What challenges did you encounter, and how did you overcome them?As I progress through projects, I find that the challenges become less daunting, yet there are always new techniques that enable me to further hone my skills.
What specific areas of your project would you like help with?As is my custom, I ask that you analyze my HTML and CSS code and provide suggestions and tips on how I can improve.
I have a question..., first of all how did you get the program so close to the design??? This is incredibly mind blowing!!
