Making WordPress.org

Opened 13 months ago

Closed 8 weeks ago

#6992 closed defect (bug) (worksforme)

Scrolling and white space issue on mobile.

Reported by: himshekhar07's profile himshekhar07 Owned by:
Milestone: Priority: normal
Component: Swag Store (mercantile.wordpress.org) Keywords: needs-patch
Cc:

Description

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

Attachments (3)

CleanShot 2023-05-16 at 16.33.17.jpeg (192.7 KB) - added by himshekhar07 13 months ago.
Screenshot 2023-05-20 at 12.09.10 PM.png (233.6 KB) - added by nuhel 13 months ago.
Temporary fix of this issue
Screenshot 2023-05-25 at 12.44.08 PM.png (200.2 KB) - added by devtanbir 13 months ago.

Download all attachments as: .zip

Change History (10)

@nuhel
13 months ago

Temporary fix of this issue

#1 follow-up: @nuhel
13 months ago

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

#2 @dd32
13 months ago

  • Component changed from WordPress.org Site to Swag Store (mercantile.wordpress.org)

#3 in reply to: ↑ 1 @rafiahmedd
13 months ago

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

#4 follow-up: @devtanbir
13 months ago

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%;
    }
}

#5 in reply to: ↑ 4 @rafiahmedd
13 months ago

@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%;
    }
}

#6 @coffee2code
8 weeks ago

#7008 was marked as a duplicate.

#7 @coffee2code
8 weeks ago

  • Resolution set to worksforme
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.