I finished another project during this course. Having great time with API and some JavaScript…
Please have a look and tell me how You like this site. It’s simple - I prefer minimalistic design.
Here’s the link: https://codepen.io/icelandico/pen/NYMrZr
Overall good. It is working. However the social media icons seem to be floating around.
On smaller viewports the boxes queeze down (width). I recommend you fix these issues.
Thanks for feedback. i know this issue but don’t really know how to make it more RDW…
1 Like
Several RDW practices you could use:
-
Changing font size: You might want to resize your font as the window size changing. 16px are a good standard, on mobile screen you might be able to get away with 12-13px font size depending on the font readability.
-
Changing container width: an example your
<header>width are defined using %. The container are showing % in relative to window size, when the window get smaller, your container get smaller too and there will be point your content will need larger container than the defined % width. You can use min-width to ensure the narrowest it resize will always fits your content. Or just change the width % on certain breakpoint. -
Use Position Absolute only when necessary: I see a lot of position absolute here. Understand that position absolute will take the elements off the normal flow and let you have the responsibility to tell where it’s positioned. You can remove absolute from buttons and social media icons, use margin and let it flow as normal. This way you don’t have to set new rules on many breakpoints to tell browser where you want the elements needed to be.
I hope this helps, keep up the good work!
2 Likes
It helps for button only. But icons are going outside the container even if I delete the absolute position and mess with margins. Thanks for feedback!
There are several way to manage container width, most importantly to define the CSS rules the most explicit way you can make sense of it.
Example:
- on footer-container class you could do width auto and margin-left: 20px, margin-right: 20px. This way you know the width will always be 100% - 40px. Width auto on a block element is always 100% of the parent element width.
- You could also do width 90%, margin left and right auto on footer-container class. I’m not into this because I won’t know how much space on left and right part of the container from it’s parent component and if I have to align with other container.
- Personally I would use max-width. I’ll define the maximum width of this container (500px) then use the parent element
<footer>to add whitespace between the container and browser (padding left and right 20px). This way it’s somewhat become more modular, I can just take the HTML and CSS of footer-container and it will use the whole width of parent container, let parent container manage the whitespace. Its kinda what css library doing too, but I won’t go there, you will see how and why css library code the way they code once you start using it and facing many different layouts.
Again, no right or wrong way of applying CSS to HTML, there are just more maintainable way. All depends on how you make a sense of it right now.
Another quick note, try to use the content to manage the height of container. If you want it to have more whitespace inside the container, use margin or padding on the elements inside container (icons).
Your footer-container class has height 100px, this is why it doesn’t grow and items inside bleed out. You can use min-height to ensure you have height. Else use the content inside of it to create the container space.
Give it a go and have fun 
1 Like
Well, I mess around some classes and values and I have to say that is way better! Icons and text are not leaving the container. However on my smaller screen (17") the default view of footer shows me 2 rows of icons. 3 icons in upper row and 1 in lower
Is it possible to prevent situation like this?
Use a media query to set the layout differently.