Does anyone know how to make the <footer> appear after the content in a mobile version? I position the grid content as absolute. And when it's a mobile version that needs to scroll down, I can't simply position the <footer> at the bottom.
Would very much appreciate any other comment as well.
Nicely done but I would suggest use the following code to center the body element..
You first remove the position properties and the margin property from the .grid-container selector:
.grid-container { position: absolute; right: 0; left: 0; top: 0; bottom: 0; margin: auto; }
Then add the following properties to the body element..
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; position: relative; }
Then you can use this for the footer:
footer { position: absolute; right: 0; bottom: 0; }
looking forward to insightful contributions as always
@Abolude30 Congratulations on making a nice attempt. It’s really a good one but I would like to make a few contributions or suggestions that would help make the design look a lot better.
You should make use of the style-guide file to get the appropriate colors and font-family used. That been said, you can also give the main-container a width of 350px which is subject to change if it’s run on a mobile device with a screen width lesser than the width specified, it would suffice to use a width of 95%.
For the container, you could use:
.container { width: 350px; border-radius: 10px; background: var(--dark-blue); padding: 1.4rem; }
As your root element from the style-guide file, this should suffice for the different colors used:
:root { --white: hsl(0, 0%, 100%); --light-gray: hsl(217, 12%, 63%); --medium-gray: hsl(216, 12%, 54%); --dark-blue: hsl(213, 19%, 18%); --very-dark-blue: hsl(216, 12%, 8%); }
The p element with an id set to T-card, there is no need for the width as it could cause unexpected behaviours when the page is resized. The container or card’s padding should take of its width. A font-size of 13px would do.
The p element with an id of info, this should help:
#info { font-size: 12px; color: rgb(255, 136, 0); background: hsl(217, 17%, 24%); padding: 6px 15px; border-radius: 15px; width: 58%; margin: 0 auto 26px; }
For the button elements,
.num-card .btn { width: 45px; height: 45px; border-radius: 100%; background: hsl(217, 17%, 24%); border: none; outline: none; font-size: 13px; text-align: center; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; color: var(--medium-gray); }
.num-card .btn:hover { background-color: rgb(255, 136, 0); font-weight: 700; color: var(--white); }
Add the following to your code to help with the styles. It’s a font imported from google fonts.
https://fonts.google.com/specimen/Overpass
it's almost good but i can't make the footer stay at the bottom of the page so if someone as the solution for that please. Thx
Your code looks great and also the layout and design. For the footer, I think it's best you set the position to absolute and bottom to 0. This should help. I noticed the body having an overflow of scroll in the x-axis. You could also rectify it by setting overflow-x to hidden.
This was a lot of fun. With the result I am satisfied, with the code quality not that much. Although a rather small (mini) project, it started to grow in complexity when the various states of the pages had to be saved and loaded correctly. A little bit of architecture (maybe a very simple MVC setup) could have made life easier, I guess?
If you like, tell me what you think :)
Nice layout and functionalities....But I suggest you should have activated the required attribute when the next step button is clicked. And it might also help to resize the height of the body so that it doesn't overflow.
