Ancestors

Written by Elias Mårtenson on 2025-01-30 at 11:20

I've asked this before, and I did get some good suggestions, I wasn't able to fix the problem (probably because I really don't understand CSS at all).

Is there anyone here who would be willing to help explain what changes I need to make to the CSS in order to get rid of the horizontal scrolling in my documentation page for my project?

This is the page, generated from asciidoc, so I can't actually change the content, only the CSS: https://kapdemo.dhsdevelopments.com/reference.html

What I really wanted to do was to have the TOC on top on mobile devices, but on the side in an actual browser.

I'll give a finder's fee as well, if requested.

Note that the project is open source (MIT licensed) by the way.

=> More informations about this toot | More toots from loke@functional.cafe

Toot

Written by Efi (nap pet) 🦊💤 on 2025-01-30 at 11:26

@loke I can help! 🐾

=> More informations about this toot | More toots from efi@chitter.xyz

Descendants

Written by Elias Mårtenson on 2025-01-30 at 11:29

@efi I'd love some help. Have you seen how terrible the linked page looks like on mobile?

=> More informations about this toot | More toots from loke@functional.cafe

Written by Efi (nap pet) 🦊💤 on 2025-01-30 at 11:31

@loke yes, I can use firefox dev mode to see how it would look on any device size!

how would you like the TOC to look when the width is not enough to show them side by side? I just don't know what would make sense with such a tall TOC

=> More informations about this toot | More toots from efi@chitter.xyz

Written by Elias Mårtenson on 2025-01-30 at 11:32

@efi Not sure. Is it possible to put it on top, so one can just click on a line and jump to that section?

=> More informations about this toot | More toots from loke@functional.cafe

Written by Efi (nap pet) 🦊💤 on 2025-01-30 at 11:40

@loke yes, but the box would have to scroll up and down and im not sure how ergonomic it is to have two boxes that scroll up and down on top of each other? but it is how I have it right now with a simple edit

=> View attached media

=> More informations about this toot | More toots from efi@chitter.xyz

Written by Elias Mårtenson on 2025-01-30 at 11:42

@efi Ah, I see. The way it originally looked was that everything was just one page (no separate scroll areas). The TOC was just on top of the content. I think this is perfectly fine for mobile.

I wanted to create a sidebar for the menu when using a browser, and came up with my current solution. I couldn't figure out how to preserve the original behaviour for mobile only.

=> More informations about this toot | More toots from loke@functional.cafe

Written by Efi (nap pet) 🦊💤 on 2025-01-30 at 11:44

@loke oh, ok! can do!

=> More informations about this toot | More toots from efi@chitter.xyz

Written by Efi (nap pet) 🦊💤 on 2025-01-30 at 11:50

@loke this is all you need! (I think; let me know if there's a detail to make better)

@media (max-width: 60em) {

#header {

    position: initial !important;

}

#content {

    margin-left: 0px !important;

}

#footer {

    margin: 0 !important;

}

}

=> More informations about this toot | More toots from efi@chitter.xyz

Written by Elias Mårtenson on 2025-01-30 at 12:00

@efi Ohh, that's simple! Thanks! This @media thing looks useful.

Thanks a lot! Together with the suggestion from @bean I think I may have a much more usable version now.

Please share your contribution links if you want to be sponsored with something (coffee money?)

=> More informations about this toot | More toots from loke@functional.cafe

Written by Efi (nap pet) 🦊💤 on 2025-01-30 at 12:03

@loke @bean feel free to drop me as much as you feel like, I am quite literally powered by caffeine, since they won't diagnose me for adhd because "it's not a real category" and thus won't give me meds lol

https://ko-fi.com/A321H8J

=> More informations about this toot | More toots from efi@chitter.xyz