Small Web September Check-In 2: Halfway House/Troubleshooting!

[enchantedsleeper]

Somehow, we’re already (nearly) halfway through the month of September 😱 Where has the time gone?!

How is everyone doing with their small webbing so far? The theme of this check-in is troubleshooting: if there’s any part of your Small Web September project that you aren’t sure how to accomplish, or maybe something that you worked on didn’t turn out quite right, come and ask about it here!

It doesn’t have to be specific to this month, either – maybe it’s a past project that you hit a wall on, or a future project you’d like to start. If you haven’t run into any issues yourself, feel free to offer suggestions to people in the comments who have!

Here are some question prompts for this check-in:

• How is/are your Small Web September projects going? Are you working on the same things that you put down in your Goals (if you decided to set goals), or something else?
• What do you plan to focus on for the second half of September?
• What’s an element of your project that you found unexpectedly challenging? Did you manage to solve the problem, or not yet?

As a reminder, this is the second of four ‘check-in’/comment points that will be published during the event – you can check out the schedule and dates of these posts over on the event intro. There’s no cut-off point for commenting on them, so you can add something at any time – you also don’t need to comment on every one or do them in order! The themes are a loose guide; all discussion is welcome.

For our previous check-in post, head on over to Small Web September Check-In 1: Links!

Comments

[althea_valara]

I've made really good progress! My goals were to finish porting over FFBE Season 1 and what I have of FFXIV so far, plus maybe start a replay of FFXI: Chains of Promathia for documentation purposes. Well, I have FINISHED FFBE Season 1! I'm tackling FFXIV today, and I did start a replay of FFXI:CoP already.

I'm having great fun writing Python scripts to make HTMLizing the files quicker. Very proud of the one script I wrote to automatically build links for the FFBE Story Events (there's like 43 story events; that'd be a LOT of hand-coding of links!)

Originally, I had just planned on leaving FFBE at Season 1, but I've found YouTube videos of the remaining seasons plus some of the story events I hadn't documented, so now I am working on documenting those, as well. Frankly, I've been putting a LOT of work into my site so far, but I'm having a blast.

I *am* having one problem with CSS. On the main FFBE landing page, I'm using <details> to collapse the (long) link list for each subsection. The link list is styled as, well, a list (some are ul, one is ol) and I can't seem to get CSS to apply to the list properly. I wanted the twisty for the Details to be bigger text, maybe 1.5em, but wanted the actual links to be at 1em, but no matter what I do, I can't achieve it. Leaving it for now, because it's not BAD, just, at the bigger font it makes the list l-o-n-g. This is on my local copy so hasn't been pushed to Neocities yet, as I'm still tweaking a bunch of other stuff before I push it live.

It occurs to me I should check how my site looks on mobile devices. It's using fairly simple HTML and CSS, so it should be okay on mobile too.

Link to my site: https://altheavalara.neocities.org

[aflatmirror]

I just checked it out on my phone; it's good overall! My only quibble about usability is that the nav links and menus are a bit too small to comfortably click on and read when my screen is oriented in portrait mode (landscape is fine).

I guess a div or somesuch gets scaled based on the viewport width even if that ends up making it smaller than intended? Perhaps when I'm next at my laptop I can read through the CSS to try and see what's going on (though, warning: my CSS was never sophisticated and is now a decade's worth of rusty on top of that 😅)

[althea_valara]

Thanks for the feedback!

I checked it out both on my Fire tablet and my iPhone, and oh, I see what you mean. It looks pretty good on my tablet but I had trouble using the menus. On my iPhone it looked too small overall.

I've already made one change to be more responsive: on the FFXI main page with the icons, I switched from tables to a box model so there wouldn't be a horizontal scrollbar. It looks better! But yeah, I'm going to play with some media queries to see if I can get it pleasing for me on the phone as well as desktop.

[le_gaosaure]

I think I know what's going on with your CSS! Thing is, "em" is a relative size, and it's relative to the parent element, which means that if you have, say, your paragraphs in 1.5em, a link set to 1em inside a paragraph will display as 1.5 x 1 = 1.5em size. If you want to have a size relative to the base of the page and not have this multiplicative effect, you can use "rem" instead =)

[enchantedsleeper]

Oh, I came a cropper before when trying to switch to "em" for sizing - it looked the way I wanted to on desktop, but then on mobile it was minuscule... I couldn't figure out why that was. I found another way to get my desired effect, but I'll have to look into "rem"!

[le_gaosaure]

Hmm, I'm not sure "rem" would solve that specific problem... From what I understand (and apologies if I don't make sense, I'm slightly feverish aha ^^"""): pixels are pixels, so far so good. Em are a multiplier on the default size and "stack" based on the parent element; currently most web browsers display text at 16px if you don't give any size so this is the base default: 1em = 16px, but if you size elements inside other elements you will get the multiplicative effect. Rem are also a multiplier on the default size, and use the same size as reference so 1rem = 16px, but they don't "stack" because the R in rem is for "root" so it's always compared to the root element's default, not to the current element's default. So if something looks "normal sized" on computer and tiny on mobile with em, there's no obvious reason for rem to act differently. I'd be more suspicious of a size in pixels or % having sneaked in (and I can't remember how % work for size right now and I'm too tired to look it up aha ^^""").