Vertical spacing

  • lmarks

    (@lmarks)


    10 months, 3 weeks ago

    Background: I have been creating pages directly in HTML since 1995. I’ve been working with WordPress since 2020 but am still more comfortable in HTML than WordPress. I have kind-of resisted learning CSS. I’ve been a disaster volunteer since 2002 and have created disaster response/recovery websites since 2010. At this point, I’m responsible for the website of the state “chapter” of a national organization who dictates the basic design. I am not allowed to change the basic page design. I am permitted to create pages and add them to menus.

    The problem: Their design starts with a clever dropdown wherein opening a new page starts with the page title covering about half the screen. As the user scrolls, it retracts to about 1/5 the screen. The type of content I’m given on several pages (including the page linked above) begs for the use of in-page links. But when I use them, the first several lines of the target are obscured by the large title. The user has to scroll upward (counterintuitive) to see the beginning of his desired target. I could work around this problem by preceding each section with something like a
    <p id=”myid”>&nbsp:<br />&nbsp:<br />&nbsp:<br /></p> (to create some space between the link target and the actual content) but that’s really ugly and I expect it won’t work right on mobiles or different screen sizes.

    Can I expect the in-page links to magically work right if I move everything to the Gutenberg editor?

    Is there some way to use the WP-spacer element that will work with mobiles and all screen sizes? I don’t know how to get the number of pixels or lines or whatever this weird theme occupies (and I suspect it’s dynamic) to specify the space.

    Other practical suggestions?

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Ahmod Musa

    (@musabin)

    10 months, 3 weeks ago

    Hi @lmarks,

    It sounds like the issue is caused by the theme’s large sticky header covering part of the content when using in-page anchor links. This happens because the browser scrolls the anchor target to the very top of the viewport, but the fixed header overlaps it.

    Gutenberg alone won’t “magically” fix this, because the problem comes from how the theme handles the header and scrolling. However, there are some practical solutions you can try:

    1. Use CSS to offset the anchor position
      You can add a little CSS so that anchor targets are scrolled into view below the header. For example:
      :target {
      scroll-margin-top: 100px; /* Adjust 100px to match your header height */
      }
Viewing 1 replies (of 1 total)

The topic ‘Vertical spacing’ is closed to new replies.