Scrolling and white space issue on mobile.

[himshekhar07]

On this page ​https://mercantile.wordpress.org/product-category/wp20/, there is horizontal scrolling and a white space issue.

Here is the screenshot:
​https://share.cleanshot.com/n2f4RXTbnXs57RHMNKg4

[nuhel]

Temporary fix of this issue

[nuhel]

This is happening because search input is taking extra space in the nav bar.

Element class name is wp-block-search__inside-wrapper.

Here is an temporary solution for the issue

@media only screen and (max-width: 526px) {
  .wp-block-search__inside-wrapper{
    max-width: 50px;
  }
}

Fix Screenshot: https://meta.trac.wordpress.org/attachment/ticket/6992/Screenshot%202023-05-20%20at%2012.09.10%20PM.png

[rafiahmedd]

If someone clicks on the search bar than it will break the design again. I think better if we bring the search bar below the header or if we move it inside the menu just for mobile devices.

Replying to nuhel:

This is happening because search input is taking extra space in the nav bar.

Element class name is wp-block-search__inside-wrapper.

Here is an temporary solution for the issue

@media only screen and (max-width: 526px) {
  .wp-block-search__inside-wrapper{
    max-width: 50px;
  }
}

Fix Screenshot: https://meta.trac.wordpress.org/attachment/ticket/6992/Screenshot%202023-05-20%20at%2012.09.10%20PM.png

[devtanbir]

Here is the solution for the issue:

@media only screen and (max-width: 526px) {
    .header-block.wp-container-7.wp-container-7 {
        flex-wrap: wrap;
        height: auto;
    }
    .wp-block-search__no-button {
        width: 70%;
    }
}

[rafiahmedd]

@devtanbir looks good however I think a few more design adjustments will be needed here. Let's see what others think of this.
Replying to devtanbir:

Here is the solution for the issue:

@media only screen and (max-width: 526px) {
    .header-block.wp-container-7.wp-container-7 {
        flex-wrap: wrap;
        height: auto;
    }
    .wp-block-search__no-button {
        width: 70%;
    }
}

[coffee2code]

#7008 was marked as a duplicate.

[coffee2code]

I can't reproduce this. Presumably this has either been fixed since this was reported, or it is related to the presence of the WP20 link in the site header, which is no longer present. It's possible this may relate to the issue reported in #6904.

Feel free to reopen if you are still experiencing the bug. If you do, I would ask if you could also use the page inspector to delete the entire wrapper for the footer banner if it is present (see my comment in #6904 for more info), if you can, to see if that is causing the issue.