Last week I built this HTML and CSS Developer Cheatsheet using the stack early mentioned and just a little of JS, with GitHub Pages as the host. The thing is, there’s a wrapper where I put my CSS Sidebar and HTML related content, but when I add more content to the HTML Section, my main tag overlaps because even if I add a Height to the to 100% my content still overflows, so what do you think about it? How can this be fixed?.
In the other hand, I’d want to know what do you think about it.
It looks nice, great job! I wish to have a project like this too. Work in progess… lol
Anyway, not sure what your problem is, I will tell you what I did now, I hope that lead you into a better solution.
If you open the browser dev tools you could see if some CSS properties are working find or not. Like vertical-aling: base-line, I would erase it. Or font-size: 100%, for example.
I did some modifications in the dev tools, the code below.
*, *::before, *::after { box-sizing: border-box; }
// as idea, because I dont like to use code I really dont need, like resets and stuff like that.
body {
line-height: 1.2;
max-width: 100vw;
}
nav {
overflow: hidden; // this line can be problematic, I cannot see why you need it.
etc.
}
.wrapper {
display: flex;
justify-content: space-around;
}
.css-sidebar {
max-width: 38%;
box-shadow: 5px 3px 3px rgb(121, 115, 115);
z-index: 0;
}
.html {
max-width: 58%;
}
With less code it seems work better, but it might be a question of taste, of course. But maybe you could do something like that. Turn off or comment out all code and check how it works when you add more html content and turn on some necessary for layout properties, because HTML pages are responsive by default, without any CSS.
I hope this gives you some ideas.
Keep the great job Juan José!! Fantástico.
Happy coding!
.