https://developer.wordpress.org/apis/dashboard-widgets/ designs break on mobiles devices.

[upadalavipul]

I have reviewed ​https://developer.wordpress.org/apis/dashboard-widgets/ document pages on my mobile devices and it's broken. Please check below provided attached screenshot for a better understanding.

Screenshot: ​https://share.cleanshot.com/T3wpG0MTpqbCv0Lh0DjB

[upadalavipul]

for the above issue solution, added the below CSS.

Fix:

@media screen and ( max-width: 500px ) {

.single-handbook #content{

display: unset;

}

}

[himshekhar07]

I tried to regenerate this issue and found one solution as we need to show that box we can't
display:unset;

Here is the CSS solution:

@media screen and (max-width: 876px){
    .single-handbook #content{
        width: 100%;
        display: block;
        padding: 4rem 20px;
    }
    #secondary{
        position: relative;
        left: 0;
        top: 15px;
        padding: 4rem 20px;
    }
   .single-handbook #secondary{
       width:100%;
   }
    .search-wrap .searchform{
        display: block;
    }
}

[viralsampat]

Hello Team,

I tried to regenerate this issue and found a solution to resolve this issue.

Here, I have added its CSS.

@media screen and (max-width:500px){
    .single-handbook #content{display:block}
}

Thanks,

[coffee2code]

Thanks to the report! Even though this is the earlier ticket, I am closing this as a duplicate of #6886 which was seen and fixed already.

In the future, it's best to try to file tickets into the most appropriate component. That makes it easier for others to see if something was already reported, and it's more likely to be seen and addressed when contributors are reviewing a particular component. While it's fine to use the General component, it's a miscellaneous category that can sometimes delay their handling or have a later duplicate ticket handled first.