17,464 questions
-2
votes
0
answers
24
views
Handling table headings neatly in Filament tables on mobile with Split layout [closed]
I’m using FilamentPHP tables with headings in a Split layout to make my tables responsive. On desktop, everything looks great, but when the layout stacks on mobile, the headings make the table look ...
0
votes
0
answers
39
views
Is overriding CSS custom properties for typography and spacing at breakpoints bad practice? [closed]
I’m building a design system where all typography and spacing values are defined as CSS custom properties (--font-size-md, --space-5, etc.).
At smaller breakpoints (800px and 400px), I override those ...
- 245
0
votes
0
answers
21
views
My Widget does not work properly Because of different grid sizes
I used a custom grid structure. Not only it doesn't work as I want on different screen sizes, but also the widget I defined externally does not fit into different grid structures. Here index.jsx:
this ...
2
votes
1
answer
73
views
Why is Tailwind CSS breaking my existing CSS Code? [duplicate]
Summary: Existing CSS code for setting an HTML element's width to 100% of viewport width fails when tailwindcss is added. For an element who's display is set to display: flex; the children being ...
- 51
0
votes
1
answer
70
views
Flutter: How to hide bottom navigation bar on specific pages for mobile only while keeping sidebar on desktop?
I'm building a Flutter app that runs on both mobile and desktop platforms, and I'm struggling with implementing responsive navigation that behaves differently based on the platform.
Current Setup
// ...
1
vote
0
answers
151
views
How to make min-height scale with clamp() font-size to avoid layout shift?
I have this CSS:
div#appointmentsCont {
width: 80%;
max-width: 320px;
min-width: 554.5px;
}
div#appointmentsCont h3 {
font-size: clamp(19px, 3vw, 24px);
}
The <h3> is inside ...
1
vote
0
answers
55
views
MJML inconsistent section width in Outlook on Windows
I'm developing an email template with MJML and I'm trying to resolve some inconsistencies in Outlook desktop on Windows.
My understanding is that MJML generates conditional wrapper tables with a fixed ...
- 11
1
vote
1
answer
83
views
Align a shaped svg vector image exactly to the right of a div to make it part of the background
I’m working on a design where I have an S-shaped SVG curve as part of a background behind a containing text and buttons. You can see in my screenshots what I’m trying to achieve:
First image: This is ...
- 25
1
vote
1
answer
66
views
Why does grid-template-areas break when combining minmax() and auto-fit in CSS Grid? [closed]
I’m trying to create a responsive layout using CSS Grid.
The grid should have a header, main content, and a footer. I’m using grid-template-areas combined with auto-fit and minmax() to make the layout ...
- 29
1
vote
0
answers
58
views
Flutter responsive layout not sizing properly
I'm working on an application in flutter, and am having a hard time implementing my UI designers figma design in flutter, using a responsive layout. The designer came up with this:
And I was able ...
- 1,264
0
votes
1
answer
116
views
Responsive sidebar inside a floating / full-screen chat widget – HTML, CSS, JS
I’m building a floating chat widget that can be
Minimized (small)
size: 400 × 600 px (bottom-right corner)
sidebar is collapsed (≈ 30 px) and can be toggled open to 100%
when the user closes / re-...
1
vote
0
answers
120
views
Responsive text size not working with Tailwind CSS v4.1 + Next.js 15 [closed]
I'm building a web project using Next.js v15.3.5 Turbopack and the Tailwind CSS v4.1 framework for styling.
I set up the global.css file following the instructions on the official page, adding ...
0
votes
0
answers
39
views
How to virtualize M×N Kanban board with cell-level API calls and dynamic heights?
I'm implementing a complex Kanban board with virtualization and facing several challenges. The board has M rows (sections) and N columns (statuses), where each cell makes its own API call to fetch ...
0
votes
0
answers
13
views
Issues with responsiveness on varying devices of the same max-width
So I'm working with Next.js building an e-commerce store. It's my first fullstack project so it's kinda a big deal for me.
Problem is, after i did the responsiveness for mobile screens (max-width: ...
- 11
1
vote
0
answers
89
views
Stacked backdrop-filter blur divs showing gaps/artifacts on different screen sizes
I’m creating a glass-morphism progress bar made of 10 stacked slices, each with its own
backdrop-filter: blur().
It renders perfectly on desktop Chrome/Edge, but on high-DPR mobile
screens (Safari iOS ...
- 118