Making WordPress.org

Opened 2 years ago

Last modified 4 months ago

#6153 new defect (bug)

In accessibility page, Show Welcome Box issue.

Reported by: smit08's profile smit08 Owned by:
Milestone: Priority: low
Component: Make (Get Involved) / P2 Keywords: has-testing-info has-patch
Cc:

Description

Steps to reproduce:

  1. Visit the accessibility page (URL: https://make.wordpress.org/accessibility).
  2. Then click the Show Welcome Box. And view this in responsive device below 1000px.
  3. there is an issue of margin/padding between the <p> tag and Hide Welcome Box text.

Attachments (4)

Screenshot 2022-03-02 at 3.53.16 PM.png (531.4 KB) - added by smit08 2 years ago.
As you can clearly see the padding issue between the Hide Welcome Box text and <p> tag description.
#6153.patch (632 bytes) - added by kajalgohel 2 years ago.
#6153.2.patch (530 bytes) - added by hilayt24 2 years ago.
Top spacing is added to the content on the smaller screens.
6153.3.patch (551 bytes) - added by nidhidhandhukiya 2 years ago.
After applying this solution the spacing between the show welcome box and hide welcome box is looking same so might be that will be relevant for this issue.

Download all attachments as: .zip

Change History (11)

@smit08
2 years ago

As you can clearly see the padding issue between the Hide Welcome Box text and <p> tag description.

@kajalgohel
2 years ago

#1 @kajalgohel
2 years ago

  • Keywords has-patch added; needs-patch removed

#2 @hilayt24
2 years ago

Instead of decreasing the margin and padding of the button, It is preferable to add the margin-top to teh content on teh smaller devices from 1024px.

@hilayt24
2 years ago

Top spacing is added to the content on the smaller screens.

@nidhidhandhukiya
2 years ago

After applying this solution the spacing between the show welcome box and hide welcome box is looking same so might be that will be relevant for this issue.

#3 @dd32
2 years ago

  • Component changed from General to Make (Get Involved) / P2
  • Priority changed from normal to low

#4 @hilayt24
2 years ago

#6185 was marked as a duplicate.

#5 @vijayhardaha
2 years ago

I have some quick & small points to mention for review on similar pages if they are valid.

3 columns on .make-welcome has width:30% for min-width:1024px
if that's not intentionally then can we make those columns wider and fix them to parent wrapper using

@media screen and (min-width: 1024px) {
    .make-welcome .entry-content .column {
        width: 33.3333333333%;
        padding: 1.5%;
        float: left;
    }
}

.make-welcome .entry-content has max-width:940px; currently,
can't this section has max-width: 1024px; same as other sections and look properly aligned?

New block header using 889px for responsive while rest content after that using 876px.

https://make.wordpress.org/docs/style-guide/
handbook breadcrumbs look too close to the handbook container name. Try checking 900px
top: 7rem; working perfectly on all screens so far.

handbook breadcrumbs using left: 280px; currently,
but not vertically aligned with entry content. we can try using left: 25%; margin-left: 4rem;

#6 @bhaveshdesai13
16 months ago

#6664 was marked as a duplicate.

#7 @coffee2code
4 months ago

#6632 was marked as a duplicate.

Note: See TracTickets for help on using tickets.