EmSixTeen Posts - Answer Overflow

EmSixTeen

Posts Comments

KPCKevin Powell - Community

•Created by EmSixTeen on 6/19/2024 in #front-end

Help with consistent alignment across cards 📏

2 replies

KPCKevin Powell - Community

•Created by EmSixTeen on 3/15/2024 in #os-and-tools

My gulp has broken and I'm seemingly too useless to fix it 😩

6 replies

KPCKevin Powell - Community

•Created by EmSixTeen on 3/7/2024 in #front-end

Need my column to take up the full height of the available space on desktop - probably simple!

10 replies

KPCKevin Powell - Community

•Created by EmSixTeen on 2/1/2024 in #front-end

Having trouble adding a sidebar to my grid system

I'd really love help here if someone can dissect and figure out my dilemma. I have this WordPress site which is built using Advanced Custom Fields' flexible content fields. It's not using Gutenberg/the block builder. The user can add a section (<section>). They have some basic options, like class and background colour ↳ Inside each section they can nest what we're calling blocks, several if desired. Think text block (<div>), image block (<figure>), infobox (<div>), etc.). The blocks have some basic options, like class, background colour, and importantly width - narrow, standard, or wide. I set up a CSS grid to automatically give the children a width, whether the chosen narrow, standard, or wide. Standard is default. See here:

  --grid-spacing-full: minmax(0px, 1fr);
  --grid-spacing-wide: clamp(0px, 2.5vw, 100px);
  --grid-spacing-standard: clamp(0px, 5vw, 100px);
  --grid-spacing-narrow: clamp(1px, 70vw, 750px);

  --section-grid: [full-start] var(--grid-spacing-full) [wide-start]
    var(--grid-spacing-wide) [standard-start] var(--grid-spacing-standard)
    [narrow-start] var(--grid-spacing-narrow) [narrow-end]
    var(--grid-spacing-standard) [standard-end] var(--grid-spacing-wide)
    [wide-end] var(--grid-spacing-full) [full-end];

  > * {
    grid-column: standard;
  }

  --grid-spacing-full: minmax(0px, 1fr);
  --grid-spacing-wide: clamp(0px, 2.5vw, 100px);
  --grid-spacing-standard: clamp(0px, 5vw, 100px);
  --grid-spacing-narrow: clamp(1px, 70vw, 750px);

  --section-grid: [full-start] var(--grid-spacing-full) [wide-start]
    var(--grid-spacing-wide) [standard-start] var(--grid-spacing-standard)
    [narrow-start] var(--grid-spacing-narrow) [narrow-end]
    var(--grid-spacing-standard) [standard-end] var(--grid-spacing-wide)
    [wide-end] var(--grid-spacing-full) [full-end];

  > * {
    grid-column: standard;
  }

🚨🚨🚨 So, my actual issue here is that I want to also incorporate a sticky sidebar on some pages. How on earth can I do that? It feels like I need an entirely new grid system but I'm dizzy running myself in circles now. The sections span the full width of the page, and they need to continue to so that I get the full-width background colours per section, while the content should take up the left 3/4 of the content-container.. but then how am I do actually make a sticky sidebar stay atop those on the rightmost 1/4? So that it can scroll down along the page? Is this explanation even making sense? 🥲 🚨🚨🚨 Pen here: https://codepen.io/emsixteen/pen/dyrmZJN

12 replies

KPCKevin Powell - Community

•Created by EmSixTeen on 10/10/2023 in #front-end

Is there a way to force iOS to display a vertical scrollbar on a desired element?

I've been tearing my hair out trying to figure out why my scrollbars are disappearing, and it turns out it's an iOS thing (possible Mac too?). The browser is automatically hiding the scrollbars, and they're only showing when I hover the element, which reeeeeeally isn't acceptable as the user needs it conveyed to them that the element is scrollable by sheer virtue of the affordance a scrollbar gives. This also happens on a desktop browser when viewing the page in devtools as an iOS device. I've of course tried:

::-webkit-scrollbar {
  width: auto;
  height: auto;
}

::-webkit-scrollbar-thumb {
  background: initial;
}

::-webkit-scrollbar {
  width: auto;
  height: auto;
}

::-webkit-scrollbar-thumb {
  background: initial;
}

and the like, but support for 'custom' scrollbars was removed from iOS. The scrollbars work as intended on desktop as best I can figure. Pen of the an example of the issue (need to swap to iOS or an iOS device in devtools): https://codepen.io/emsixteen/pen/xxmMXvd

32 replies

KPCKevin Powell - Community

•Created by EmSixTeen on 3/2/2023 in #os-and-tools

Is there any way to stop Firefox devtools panel from changing layout when resizing?

'Cos it really does my head in, as seen here: https://streamable.com/haxojk

10 replies

Gaming

Programming