Alignment issue in the mobile version

  • Resolved Anuj

    (@anujmakhloga)


    3 months, 1 week ago

    Hi, I’m working on customizing the header of my new website (Can’t share the website link here at the moment) using Generatepress theme, and need your assistance. I’ve attempted some CSS tweaks to align these elements but haven’t been able to resolve the issue completely.

    • Currently, in the mobile version, the site title, search modal, and navigation button (hamburger menu) are not aligned properly. The search modal and the navigation button are appearing below the title instead of alongside it. Reference – (image1)
    • I would like all three elements to align horizontally in one row, ensuring a neat and organized header layout for mobile users. Reference – (image2)

    Also, I need the header to remain sticky on all screen sizes so that it stays visible while users scroll. This includes the site title, search modal, and navigation button (menu toggle).

    I would greatly appreciate it if you could provide a CSS or configuration solution to address these concerns. Thanks for your help.

Viewing 13 replies - 1 through 13 (of 13 total)
  • Alvind

    (@alvindcaesar)

    Hi there,

    For this type of issue, we will need to see the site itself, as it is essential to inspect it directly in order to determine the root cause and provide the necessary CSS adjustments.

    Thread Starter Anuj

    (@anujmakhloga)

    Check this website – wikibuff.com

    Hi there,

    try adding this CSS:

    /* make header sticky */
    #masthead {
        position: sticky;
        top: 0;
    }
    /* mobile header layout */
    @media(max-width: 768px) {
        #masthead .mobile-menu-control-wrapper {
            display: contents;
        }
        .mobile-menu-control-wrapper .menu-toggle {
            order: -1;
            flex-grow: 0;
        }
        .inside-header {
            padding-inline: 10px;
        }
        .site-logo {
            margin-inline: auto;
            max-width: 50vw;
        }
    }
    Thread Starter Anuj

    (@anujmakhloga)

    Hi @diggeddy , thank you for your quick response. Both the codes are somehow not working on the mobile version of the given website but are working on another one. However, the issue is that, even on the other website, the content overlaps the header when I scroll, although the alignment is working perfectly on that site. Here’s the screenshot of the mentioned website where content is overlapping – image.

    You added the CSS to the Customiser > Additional CSS. Edit that and move the CSS above the other CSS you have in there

    Thread Starter Anuj

    (@anujmakhloga)

    Thanks @diggeddy , It’s working now, but the sidebar is still overlapping with the header while scrolling. The main content section is fine, though.

    ying

    (@yingscarlett)

    Change this CSS:

    #masthead {
        position: sticky;
        top: 0;
    }

    to this:

    #masthead {
        position: sticky;
        top: 0;
        z-index: 999;
    }
    Thread Starter Anuj

    (@anujmakhloga)

    Perfect. Thank you so much.

    ying

    (@yingscarlett)

    You are welcome ? ??

    Thread Starter Anuj

    (@anujmakhloga)

    Thank you again for that.

    Just another request, when I upload larger images, they do not appear fully in one view on the desktop, I have to scroll (vertically) to see the entire image. On mobile devices, the images display correctly without any issues.

    Could you please guide me on how to fix this issue, ensuring that the images scale properly on desktop without requiring scrolling?

    Check the images of this post- wikibuff[dot]com/sports/alex-lees/

    Thread Starter Anuj

    (@anujmakhloga)

    I found something like this in the forum – 

    .single-post,.entry-content img {
        height: auto;
        max-height: 70vh;
        width: 100%; 
        object-fit: contain;
    }

    but then, the header no longer remains sticky.

    ying

    (@yingscarlett)

    Try to remove .single-post, from the CSS.

    Thread Starter Anuj

    (@anujmakhloga)

    That worked perfectly. Thanks a lot.

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