Making WordPress.org

Opened 10 months ago

Last modified 9 months ago

#6992 new defect (bug)

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 10 months ago.
Screenshot 2023-05-20 at 12.09.10 PM.png (233.6 KB) - added by nuhel 10 months ago.
Temporary fix of this issue
Screenshot 2023-05-25 at 12.44.08 PM.png (200.2 KB) - added by devtanbir 9 months ago.

Download all attachments as: .zip

Change History (8)

@nuhel
10 months ago

Temporary fix of this issue

#1 follow-up: @nuhel
10 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
9 months ago

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

#3 in reply to: ↑ 1 @rafiahmedd
9 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
9 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
9 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%;
    }
}
Note: See TracTickets for help on using tickets.