Mobile Spacing Issues

  • cookgirl26
    March 30, 2026 at 7:51 pm

    Hello, I’ve been working on my site lately with your help on several issues.

    I recently added some custom CSS to achieve a more customized look for the recipe gallery (individual #dcdcdc borders for images and a #8c5e32 Crimson Pro title), but it seems to have caused two conflicts on mobile:

    1. Large Vertical Gap after the Gallery:

    In the 3-recipe gallery on the homepage (Block Element using standard Columns), there is now a 2-inch “white space” immediately following the title of the last recipe before the next homepage section begins.

    It seems the container’s bottom spacing is inflating when the columns stack.

    2. Search Modal “X” Alignment:
    Since I adjusted my header borders to a single #dcdcdc “shelf” line, the “X” close button in the custom search modal code you previously gave me is being pushed much higher toward the top of the screen on mobile. It isn’t cut off, but the vertical positioning is now off.

    Here’s the CSS I used to achieve this look:

    /* Header/Menu Border */
    .main-navigation .inside-navigation,
    .mobile-header-navigation .inside-navigation {
    border-bottom: 1px solid #dcdcdc;
    }

    /* Gallery Title (Crimson Pro & #8c5e32) */
    .center-gallery-title.force-center {
    color: #8c5e32 !important;
    font-family: ‘Crimson Pro’, serif;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-bottom: 45px;
    display: block;
    }

    /* Image Borders & Montserrat Links */
    .home-featured-gallery img {
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    }

    .home-featured-gallery a {
    font-family: ‘Montserrat’, sans-serif;
    text-decoration: none !important;
    color: #333;
    display: block;
    margin-top: 15px;
    text-align: center;
    }

    Could you help me with this, so the mobile gaps are closed and the search “X” returns to its original spot within that custom snippet? Thanks!

  • Alvind
    March 30, 2026 at 11:20 pm

    Hi there,

    Could you provide the site URL again so we can take a look?

  • cookgirl26
    March 30, 2026 at 11:38 pm

    Here is my site URL. Please let me know if you need temporary admin access to look at the Block Element settings directly. Thanks.

  • George
    March 31, 2026 at 4:37 am

    1. Not sure what you mean. There is a margin-bottom of 6em that we’ve added at the bottom of the three column grid in the homepage in a previous ticket. That space is being retained for mobile too.

    Section bottom margin

    2. The close button has the following CSS:

    .gp-search-modal-close {
    position: fixed;
    top: 35px;
    right: 25px;
    z-index: 100000;
    background: #ffffff;
    border: 1.5px solid #8c5e32;
    border-radius: 50%;
    cursor: pointer;
    padding: 8px;
    line-height: 0;
    box-shadow: 0 4px 10px rgba(140, 94, 50, 0.15);
    transition: all 0.2s ease;
    animation: fadeIn 0.3s ease-in-out;
}

    and for mobile there is this CSS:

    @media (max-width: 768px) {
    .gp-search-modal-close
 {
        top: 25px;
        right: 20px;
    }
}

    Increase the top values to bring the close button lower on the screen.

  • cookgirl26
    March 31, 2026 at 6:15 am

    Everything is fine now, thank you.

  • George
    March 31, 2026 at 6:27 am

    You are welcome!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.