-
I have created a table with a sticky first column. Now I know it will work in plain html however, in my page template, it will not. Could you help me troubleshoot, please?
-
How do you make the 1st column sticky? I don’t seem to see any CSS that’s related to this.
Let me know 🙂
-
My bad 🙂 The first column in the table is sticky. So I should be able to scroll/drag the cell contents right and left ‘underneath’ it. The problem is I can’t scroll or drag, so wondering if it’s one of my page settings…
-
The first column in the table is sticky.
Yes, I mean, how did you set it to be sticky?
-
.seb-pc-scroll {
overflow-x: auto !important;
width: 100%;
max-width: 100%;
touch-action: pan-x;
-webkit-overflow-scrolling: touch;
}.seb-paint-chart table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
min-width: 640px; /* forces genuine horizontal scroll to exist */
}/* Sticky first column */
.seb-pc-sticky {
position: sticky;
left: 0;
z-index: 2;
background: #F5F0E8; /* solid background – critical, see below */
}/* Sticky header row */
.seb-paint-chart thead th {
position: sticky;
top: 0;
z-index: 3;
}/* The corner cell (sticky column AND header) needs the highest z-index */
thead .seb-pc-sticky {
z-index: 4;
}The table sits inside a wrapper div (.seb-pc-scroll) that’s the actual scroll container — the table itself is just wider than its wrapper (via min-width), which is what creates genuine horizontal scroll rather than the whole page scrolling.
My question – Whether GeneratePress’s own container/wrapper CSS applies any overflow: hidden at a parent level that could be silently clipping or interfering with this nested scroll container (we found and fixed something similar earlier this project on a different page)
Whether their theme’s global touch-action handling (if any, perhaps related to their mobile menu or swipe gestures) could be intercepting horizontal touch gestures before they reach nested elements.
NB I JUST TRIED
.seb-pc-scroll {
width: 100% !important;
max-width: 100vw !important;
}Seemed to fix it. Any comment you can make would be welcome, though.
-
The table seems to be working fine now 🙂
But the page is overflowing on mobile, can you try this CSS?@media(max-width: 768px) { div#page:has(.seb-pc-scroll), div#page:has(.seb-pc-scroll) * { max-width: 100% !important; } } -
Thanks — that CSS fixed the issue on our single-chart pages (e.g. SA 1.1.2). However, we have another page using a two-column layout (Custom HTML block in each column, one containing a similar scrollable table, the other a form/calculator) where the same overflow issue is still happening — the whole page overflows on mobile, not just one column.
Page URL: https://2027.sebeetles.com/paint-build-date-toolkit/
Could this be related to how the two-column layout itself handles responsive stacking, separate from the fix you already gave us? Happy to share more details if useful.
-
Hello,
Checking on the last page you sent us, I can see that on mobile, both columns collapse to one on mobile. Am I missing something?
-
Thanks for checking — but this is actually a different issue than column stacking (that part works correctly). The problem is that the overall page content extends/overflows horizontally on mobile — not that the two columns fail to stack.
For context: your colleague earlier gave us #page:has(.seb-pc-scroll) CSS which successfully fixed this exact overflow on our other, single-column chart pages. However, this specific two-column page (/paint-build-date-toolkit/) still overflows horizontally on mobile even with that same fix applied.
When inspecting in DevTools, we found .content-area correctly sized at ~350px (matching the phone screen), but a child element inside it was measuring ~481px, seemingly ignoring its parent’s width. Could you check whether the two-column layout on this specific page has its own width behaviour separate from the single-column pages the earlier fix addressed? -
The new page does not have any element with the class
.seb-pc-scroll, so no, the CSS does not apply on that page.On your new page, the table has a different class, so try this CSS instead:
@media(max-width: 768px) { div#page:has(.seb-pr-table-scroll), div#page:has(.seb-pr-table-scroll) * { max-width: 100% !important; } } -
Works great ty Ying. Take the rest of the week off 😉
-
Ah`1 before you go 😉 one more thing – Issue: On our homepage, a hero section (dark background, containing a headline and a small stats panel) has an unusually large vertical height on large monitors — filling most or all of the visible screen. We’ve confirmed this isn’t caused by any min-height CSS on our end (we removed it entirely, and the issue persists), and we can’t find an obvious height-related setting in the GenerateBlocks container’s Sizing or Layout tabs either. Could you help us identify what’s actually controlling this section’s height?
Also, I use my own default template on some pages, but I note that disabling Content Title doesn’t work once I choose that.
-
Hi there,
The issue is caused by this CSS in Customize > Additional CSS:
/* Hero section fills viewport */ body.page-id-13 .entry-content { min-height: calc(100vh - 120px); display: flex; align-items: center; }Specifically, the
min-heightproperty is forcing the content area to be much taller than its contents, which is creating the extra vertical space. -
Fixed ty! Also, I use my own default template on some pages, but I note that disabling Content Title doesn’t work once I toggle that? Is there a way to code a custom template for that GP setting to work?
-
Also, I use my own default template on some pages, but I note that disabling Content Title doesn’t work once I toggle that?
Is this a custom-coded template, or are you using a GeneratePress Element?
By the way, it would be great if you could open a new topic for this, as we’ve resolved the original issue in this thread. That will help keep each topic focused and make it easier to manage.
- You must be logged in to reply to this topic.