There are a couple of things I think I did it bad.
The border of the info-div on the left hand side is taller than the content which I have no idea how to fix it.
I cannot make the info-div disappear when the width of the page is lower than 480px. I tried the media query stuff, but I screwed it up so I just deleted it.
When I look at the html or css code, I find that it is relatively hard to understand compare to other people’s project. How do I fix it or avoid it in the future project?
There are HTML coding errors you should be aware of and address.
Since copy/paste from codepen you can ignore the first warning and first two errors.
Codepen provides validators for HTML, CSS and JS. Click on the chevron in the upper right of each section and then click on the respective ‘Analyze’ link.
The one for CSS is good. Use it and address the issue(s).
(The one for HTML misses things which is why I recommend W3C)
Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
To help you visualize how you have your elements on your page you can temporarily add the following universal selector
* {
border: solid 1px lightgreen
}
Is there a reason you’ve set the CSS preprocessor to SCSS when everything is straight CSS?
To help with responsiveness it will be better if you use relative units rather than hard coding pixel values.
I actually don’t know what SCSS is, I set it to SCSS because the codepen ask me to at the very beginning? or maybe I’ve done it wrong. I will change it back to CSS. Thank you!!
@xavier.yeung , is it alright for forum users to have access to your codes? I checked and realized your editor was basically accessible meaning your codes could be tampered with. Kindly look into that, except if it’s normal for people to have access to it. Not sure because I’m yet to share mine for feedback.