Nickle (They/Them)

I'd like to make my pixel art site more mobile-responsive. A lot (if not all) the doll/art pages end up with content off to the right, so the viewer has to scroll side-to-side to see everything.

Right now, my art, blurbs, and base credits are in HTML tables. Is there any way to make it so that if it's being viewed in a narrow browser window, the table cells will stack?

I'm also open to suggestions of other ways to display my art that don't involve tables. I'm just a very old-school coder, so HTML and a bit of CSS is all I know. 😅 I'm just not sure what's possible right now!

 

#smallweb #indieweb #neocities #codinghelp #websitehelp #advicewanted #suggestionswelcome

✧ Nickle's Night Sky ✧

Feb 26 at 8:18pmWeb
Show threadNickle (They/Them)Mar 3

Been trying to figure out how to make my doll/art pages mobile responsive, but also retaining the descriptions and base credit links for each doll. I looked into flexboxes, grids, and cards, but was utterly confused. I then thought of having a pop-up on click containing the description, and it kind of worked, but then I found out the way I did that - with modals - would require me to make a new modal ID in my css for every single doll on my site. Screw that. Ugh, I'm so lost as to what to do.

I'd love to do what Lazer-Bunny did with her Ribbons page, but I have no idea what css magic she wove to get the ribbons, their titles, and their descriptions all in one neat little box.

Ribbons | Lazer-Bunny ˚ʚ♡ɞ˚

The personal website of Lazer-Bunny ˚ʚ♡ɞ˚

Lazer-Bunny
Show threadkenanFeb 26
@nickle4apickle One simple solution is to use flexbox. You‘d have more control over the document flow that way.And with some container or media queries, you could control the size of the images dynamically.
Show threadNickle (They/Them)Feb 26

@ingenieur thanks so much for replying! :D

I just learned about flexboxes earlier, and I do really like them! I don't know enough about them to try implementing them on my website just yet, though.

My main issue is that each piece of pixel art (most of mine are called "dolls," cuz I use a blank body called a base - think like an old-school paper doll - to draw on top of) has a little blurb to the right of it, and its base credit (a clickable link to the artist who made the base) below it. I really like this format, and don't know how to keep this layout without the blurb potentially getting shifted below the doll or something. 🤔

Maybe those container queries you mentioned could help? I'll have to look into those.

Thanks again!

Show threadkenanFeb 26
@nickle4apickle Well, first of all I see you use tables for such content which might be okay, but not very intuitive. Table elements are for tabular data, mostly for text. In older days we used tables for layouting too since flexbox and grid were not there yet. What you want to achieve is a responsive layout and you might need to consider using flexbox, because although technically making a table layout responsive is possible, it will be so tricky to do it with CSS in your case. (1/3)
Show threadkenanFeb 26
These problems are what flexbox and grid are solving. It is really not difficult to do that. You just make your main table element a div with display: flex property and the rest will be just adjusments. You can mix them both (grid and flexbox) to achieve more fine-tuned layouts. Grid gives you more granular control over flexbox, flexbox makes your layout automatically shift to a stacked version of your design on smaller screen sizes. (2/3)
Show threadkenanFeb 26

Just dig some, you would really get the grasp of it quickly.

On the other hand, if you want to keep your horizontal display, you might introduce some horizontal scrolling to your tables/rows. So the user can scroll to see the content. In this case, you might not even need flexbox. You just need to give the main content div an overflow-x: scroll property to, hide the overflowing elements and display them on scroll. (3/3)

Show threadNickle (They/Them)Feb 26

@ingenieur thanks for the detailed explanation!

Grid combined with flexbox sounds like it might be just what I'm looking for! I'll look up stuff about that.

Show threadkenanFeb 26

@nickle4apickle No problem at all. Yes they are often combined together. They solve slightly different problems although they are used interchangeably.

Have fun experimenting!