Xan Posts - Answer Overflow

Xan

•Created by Xan on 12/17/2024 in #front-end

Allow overflow when centered element goes off screen

On my website https://xansnh.neocities.org/ (similarly with https://xan.nekoweb.org/) everything is centered with a flexbox, but the contents change size to always fit the screen, which doesn't really work for smaller viewports. Or, they might go slightly off screen (above/below), even with a scrollbar. But subpages on my main website, for example https://xan.lol/#now, all the contents are surrounded by display: block elements with margin. How can I achieve that kind of margin, but still keep contents centered without scrollbars when they wouldn't normally go off screen or exceed some percentage of the view-height?

1 replies

KPCKevin Powell - Community

•Created by Xan on 11/17/2024 in #front-end

Nesting media queries in non-media query

I see https://developer.mozilla.org/en-US/docs/Web/API/CSSNestedDeclarations#css does this, but "CSSNestedDeclarations" is only supported by less than 50% of browsers. (https://caniuse.com/mdn-api_cssnesteddeclarations) Is it ok to put a media query inside the declaration block of another regular selector?

nav {
  display: flex;
  flex-direction: row;
  @media (max-width: 512px) {
    flex-direction: column;
  }
  justify-content: center;
}

nav {
  display: flex;
  flex-direction: row;
  @media (max-width: 512px) {
    flex-direction: column;
  }
  justify-content: center;
}

or do I need to seperate them?

nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

@media (max-width: 512px) {
  nav {
    flex-direction: column;
  }
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

@media (max-width: 512px) {
  nav {
    flex-direction: column;
  }
}

25 replies

KPCKevin Powell - Community

•Created by Xan on 6/12/2023 in #os-and-tools

What's a VSCode-like IDE in the browser that has a terminal?

Looking for the best way to get browser-based VScode or a similar alternative with a terminal I think I've heard of some (that are free) but I don't recall what they were called.

11 replies

KPCKevin Powell - Community

•Created by Xan on 2/5/2023 in #front-end

Force text to stay on single line & select class in js

4 replies

KPCKevin Powell - Community

•Created by Xan on 2/1/2023 in #front-end

Alter letter spacing to make text fill screen width

8 replies

KPCKevin Powell - Community

•Created by Xan on 1/30/2023 in #front-end

What selector is best for setting font across a page?

I'm currently using body but I'm wondering if * would be better, or if there's an even better alternative.

5 replies

KPCKevin Powell - Community

•Created by Xan on 11/26/2022 in #front-end

Animate parent (letter-spacing) on child (a) focus

Backstory I just practically finished creating my personal website (https://xan.lol) but upon using my keyboard to interact with navigation links on the homepage, I was saddened to see them not animate. CSS Question More in-depth I have a link (a) that's animated from it's parent (#homelinks li). When focused (:focus) on by a keyboard, how can I animate the list item?

11 replies

KPCKevin Powell - Community

•Created by Xan on 10/12/2022 in #front-end

Text in top right and bottom left of header

I have this prototype: https://xan.likes.cash/frontend_ui_gradient.png These are the things I want to know: - How to put text in corners - How to make this gradient (that sits atop a full-screen image, but I got that figured out - possibly using Bulma framework)

10 replies

Gaming

Programming