Hi, @admuh . People have already addressed your question about positioning, so I’m just going to answer your first two questions.
Ideally, all websites should be mobile-responsive. Many people use tablets and smartphones to access websites, so it’s important that they’re able to view your content. This specific project had a requirement for a media query, which can help with mobile responsiveness. With media queries, you can do stuff like change font sizes or the layout to make a webpage look better under (or over) a certain screen size. The example provided for us had the navbar at the top of the screen for mobile devices, which is a better layout for those devices than a side navbar. Since you currently only have a media query related to motion, adding at least one for mobile screens could improve your page a lot.
If it’s responsive web designing, everything should be responsive. Regardlesss of the type of website.
You can do some styling on CSS.
absolute positioning is used to force the element go wherever you want without anything stopping it, hence, absolute. You use relative positioning on its parent so it doesn’t go further than that parent.
Blockquote About second question, does it mean that I have to make every code block into its own code element?
No, the code is already its own in-line element. You simply need to add a class if you want to style the code that isn’t pre-formatted. The span tag makes most sense if you want to style something that isn’t already differentiated from the text around it, like a random word in the middle of a paragraph.
The mobile responsiveness looks a lot better now, but I’d personally do the first size-based media query sooner (maybe at 769 px, which is the standard width for portrait-oriented tablet devices.) You might consider reducing some of your font sizes. Your body text and the text in your navbar is 23px, and 16px is generally considered a good size for body text on mobile view. You’ll want to keep your section headers a bit bigger to preserve visual hierarchy, but the size for that could be reduced as well. I also noticed that the width of your pre-formatted code causes horizontal scrolling at around 769 px. If you let some of the longer lines of code take up another line, it would be better for people on mobile devices. Finally, I’d look into setting a maximum height for your navbar on mobile view, and then setting the overflow for the navbar to auto so people can scroll down it on smaller devices. I had a lot of sections in my technical documentation, and I had to control the navbar height on smaller screens so it didn’t take up too much of the screen.
Would like to know more about that recommendation. Is there any some W3 recommendation of that?
Sounds like a good idea to set a max-height. At first, I considered implement a menu button for mobile devices but then I remembered about my course that it is not a good UX . I visited your page, and it’s nice!
About the overflow auto, is there any reason to not use overflow scroll? Or it is same thing?
I don’t know if there’s some specific recommendation from W3, but it’s a recommendation I’ve seen a lot when I Googled the subject. It’s the default font size for most browsers, and it usually hits that sweet spot for body text by being readable but not too big. Of course, this depends on the specific font you’re using. You can afford to go a little smaller on some, and some look too small at 16px. Use your best judgment on that.
Overflow scroll vs. auto will probably have the same result for this project, but they are slightly different. Overflow auto only shows a scrollbar if it’s needed, and overflow scroll shows it all the time, even when the content is too small to require a scroll bar.
Thanks for pointing out the CSS error; it’s been fixed now.
You can’t put same position on the same element. You can put the absolute positioning on the paragraph and the relative positioning on your div. After that, whatever positioning you put on your paragraph like you mentioned top: 20; it will do that but will never get out of the relative which is your div.
Edit: I found a freeCodeCamp article about this, take a look:
The position property is comment out to help you later, after you open that html on your browser, Firefox or Chrome are great for this.
After you upload HTML page, open dev tools on your browser, F12 key / Inspector tab, or double click and select Inspect.
Select the p element in the HTML and, below HTML, switch off/on between the diferent position properties. Static is the default one.
Turn off all and go to DIV element and turn off his position to relative, for example, and back to P element again, and turn off/on every option.
Finally, turn off all again. And active BODY position and do the same tests with your P element again.
I hope i have explain myself well and this help you.
On the other hand, Kevin Powell (youtube, fcc or here Conquering Responsive Layouts Conquering Responsive Layouts) have said that he thinks its better to learn first Grid basis syntax, then Flexbox basis syntax and after start to check have to make things you want or have to fix the issues you got in your own pages. I was thinking the same too after a few tutorials, and I glad he says that. And he thinks also it is better nearly always start for Mobile First Aproach, he has an article there too about it.
Don’t be to hard with yourself.
Allow yourself make mistakes, it is the way we all learn.
Now I should do something for myself aswell because I am behind in mine projects.
Happy coding and congrats!