Hello fellow Campers,
Here is my attempt on the 4th project-Technical Documentation page
It’s quite a simple one, but it took time, because I couldn’t get the responsiveness perfect. Also, there was a lot of content that I needed to type in(Typing all this in a day or two still seems impossible to me.)
Kindly provide your constructive feedback, so that I can improve on my skill and make myself skilled enough to be able to contribute to this wonderful community
Thank you so much
Link to Codepen: https://codepen.io/sambarvadai/pen/BajERPq
I enjoyed the color you used on your page!
But your page got very deformed on my PC screen when @media was activated.
Adding this code on your @media solved the problem:
And I think the
max-width that you used on your @media was a little big, I think
600px is a good value, just an opinion
And your text is going through the edge of the page.
Thank you so much for the feedback
Seems slightly weird, as I developed this on VS Code and tested on Chrome before I put this on codepen.
Can you put up a screenshot here, so that I can see the problem as well?
And for the media query, yes, I’ll work on it. Possibly a lazy attempt from me at making it responsivr, but yes, Ill try to fix it.
Thank you so much for taking out your time to review this
Sure! Here is the screenshot:
I am using the MS Edge browser, so maybe this could have caused the problem…
But any way, if you need anything else, just ask
Is this the old edge or the chromium version, if you dont mind me asking.
I looked here and is the Chromium version.
And sorry about the image be in Portuguese language
Thank you for this info.
I’ll check why the rendering on Chromium edge is like this.
I tested it on my other system. And also tested it on my iPad. Looked alright.
Will deep dive into this issue. Thank you for your feedback, Julio
@miku86 @julio-pinheirooCan you guys tell me the steps to reproduce this error? I am not able to do so, but I see that there is a problem with the page.
Thank you so much for this
I’ll try to see where is it that I went wrong, and fix it accordingly.
Your page looks good @anicsekaran. Some things to revisit;
- Codepen provides the boilerplate for you. It only expects the code you’d put within the
body element in HTML. (No need to include the body tags). For anything you want to add to the
<head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
- The link to the font goes in the box labeled ‘Stuff for <head>’
- Mentioning because you have elements out of order. The links to the stylesheet and fonts belong in the
head element. The link to the fcc test script belongs right before the closing
body tag. Everything the browser renders belongs in the
body element. So that last
div element belongs in the
- When cleaned up, run your HTML code through the W3C validator.
- There are HTML coding errors you should address.
- Don’t use
<br> to force spacing or line breaks. That’s what CSS is for.
Sorry @anicsekaran! I didn’t saw that you marked me on this topic.
But I think the video that was made by @miku86 couldn’t be better, it shows perfectly the problem and the solution that I proposed.
Hello @julio-pinheiroo and @miku86 : Thank you for your feedback
I’ve tried improving the responsiveness of the page, and found out a couple more flaws, which I have corrected.
Thank you so much for your inputs