Main issue: Unexpected extra spacing appears on certain pages only in full-screen (desktop) view; example provided via the Event Services page URL.
Notes: “Breakpoint” refers to screen-size-specific styles; “min-height” forces a minimum element height.
Status: Unresolved; awaiting further inspection and confirmation.
Hi!! I’m having an issue with spacing on my webpages. I’m noticing it on a few pages, but I will only include one here since I’m sure once I find the solution for one, I can fix the others. Here’s the web link: Event Services – Kaibre Artistry and Design, LLC.
The issue seems to only happen once tha page is in Full screen mode.
@RichAscend This usually happens when a section or block has a fixed height or extra top/bottom padding that only shows at larger breakpoints. On desktop/full screen, the theme applies different spacing rules than mobile.
Check the section’s padding/margin settings first. If those look fine, it’s likely a custom CSS rule or a min-height set on that section in the theme file causing the gap.
You have a bunch of CSS rules like this in assets/section-multicolumn-image-with-text.css :
And as you said, it’s for screen and (min-width: 1200px) and (max-width: 1440px)…
This can be a side-effect of some custom changes to make other pages look the way you want, but it would be necessary to sort these out.
Say, these CSS rules could’ve been applied in section “Custom CSS” – this way the would only apply to that particular section instance.
Oh wow that’s interesting! I didn’t touch the css for those pages. Just duplicated the “about” pages (from my recollection) and alternated the sections on the page to match the layout that I wanted. But didn’t touch the css specifically
I’m gonna look into those “paddings” sections and see if I can change it in a way that helps
@RichAscend Yep, that makes sense. The extra space is almost always coming from padding/margin or a fixed height on that section at desktop breakpoints. Adjusting those should fix it.
