@ringm
Posted
Hi o.kowu, congratulation on finishing this one. It looks really good! You really nailed the desktop and mobile versions of the site.
However, you could really improve it if you made it responsive (that is: make the components automatically adjust their size based on the screen size available). Right now you have a breakpoint that changes the layout from desktop to mobile, but what about the sizes of the devices in between? A tablet for example.
Also you have an issue with the background. You set a max width on the body element, which is making the whole page appear at the top left screen of the browser. This is not ideal. The bg image and the color should fill the entire browser window, and the components be centered.
As a general rule, is almost never a good practice to work with fixed width's and height's. Start by removing them and see what happens!
If you want to center an element, a quick trick is to set it's parent to display: flex; and the give the element you want to center a margin: 0;. That would do the job.
A possible solution for the bg and centered content would be:
/*this class should be on a div that wraps all the rest of the elements*/
.bg {
width: 100vw;
/*flexible unit: this way you make sure you fill the entire width of the viewport*/
height: 100vh;
/*flexible unit: this way you make sure you fill the entire height of the viewport*/
background: url('./images/bg-desktop.svg') no-repeat bottom, hsl(229, 57%, 11%);
/*bg color and img on the same definition*/
}
.container {
height: 100%;
display: flex;
}
.content {
margin: auto;
}
I hope I was clear enough, give it a try and if doesn't work let me know I'll help you polish the rest ;)
Happy coding!
