Hello @zapfish1 ... Easy there, you did not do a bad job. You got most of it close to the design as possible (thumbs up 👍👍👍 for that), just that you took a more challenging😬🥵 route.
Now, let's make a few adjustments to make it great.
- Did you know that, the browser applies styling to the elements on the page before the stylesheet is applied. Some of these styles have a way of distorting the styling that is added later. Hence, most devs (🤔 - if not all) apply some resets to create a "base" look for the webpage before styling and you should too. It is called CSS Resets. There are a lot of articles about it online. The lines below 👇👇 should be okay for this project.
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin-block: 0;
padding: 0;
}
body {
min-height: 100vh;
}
img,
picture {
max-width: 100%; /* helps to fit image within page/div container */
display: block;
}
- In relation to positioning, here are a few observations;
- The
div.child element is applied these styles;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
and I am sure it was supposed to work with the style declarations for the .container element to position the "card" in the center. I am of the view this is a hard way 🥵🥵😬 to do it. I recommend that since you are fond of grid you apply this style {display:grid; place-items: center center;} to the <body> to place the div.child in the center. No margin or padding needed.
- The positioning effect achieved using this declaration
.links a {
display: grid;
justify-content: center;
}
can be done with {text-align:center;} 😉....
-
The initial max-width styling for the <img> element in the css reset can be reduced when applying the actual styles to get the picture like the size in the design. The size is most likely below 40%.
-
I noticed you used a px value for the max-width of the div.child element. You can consider using a % value (which is way more responsive) for the mobile design, then apply the px value for desktop/larger displays using a media-query - read more about it on MDN
I hope the following help improve your solution. All the best and happy coding😁🧑💻
