Responsive 2 column layout with header and footer
It should be simple, but I'm still so new to CSS.
I'm using 11ty to generate static HTML. I have a CSS file along with it. I'm trying to make a 2-column layout, with header and footer, that looks fine on desktop and mobile. I accept that mobile probably looks different, but I haven't even got the desktop looking right yet.
I've got a codepen here: https://codepen.io/rikrose/pen/yLWJZov
It appears that my table-of-contents section is too narrow, but I have no idea what's controlling that width. In fact, looking at another page, it appears that the width is uncontrolled, and so varies from page to page.
I'm fairly sure I need shorter titles on the sections, but I also need a fixed width, at least on desktop.
What have I cross-threaded, and what do I need to go read to learn how to do it correctly?
I'm using 11ty to generate static HTML. I have a CSS file along with it. I'm trying to make a 2-column layout, with header and footer, that looks fine on desktop and mobile. I accept that mobile probably looks different, but I haven't even got the desktop looking right yet.
I've got a codepen here: https://codepen.io/rikrose/pen/yLWJZov
It appears that my table-of-contents section is too narrow, but I have no idea what's controlling that width. In fact, looking at another page, it appears that the width is uncontrolled, and so varies from page to page.
I'm fairly sure I need shorter titles on the sections, but I also need a fixed width, at least on desktop.
What have I cross-threaded, and what do I need to go read to learn how to do it correctly?
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
