Making WordPress.org

Opened 4 years ago

Closed 2 months ago

#6882 closed defect (bug) (worksforme)

Documentation images are not responsive in small viewports

Reported by: patelhitesh Owned by:
Priority: normal Milestone:
Component: HelpHub (wordpress.org/documentation) Keywords: has-screenshots
Cc:

Description

Please check the below URL:
​https://wordpress.org/documentation/article/how-to-install-wordpress/

To Reproduce
Steps to reproduce the behavior:

Go to the above URL
Switch to responsive mode, 425 wide
Scroll down to code blocks
See something like the screenshot
Expected behavior
It should either wrap or scroll, whatever is more generally accessible.

Attachments (2)

CleanShot 2023-03-23 at 13.59.50@2x.png​ (568.4 KB ) - added by patelhitesh 4 years ago.
Image formatting issue in mobile view design
CleanShot 2023-03-24 at 15.22.14@2x.png​ (788.9 KB ) - added by viralsampat 4 years ago.
I have checked above mentioned issue and I have resolved it and added patch. Also, I have attached screenshot after resolved this issue.

Download all attachments as: .zip

Change History (5)

@patelhitesh
4 years ago

Image formatting issue in mobile view design

#1 @dd32
4 years ago

  • Component General → HelpHub
  • Summary Image formatting issue in mobile view design → Documentation images are not responsive in small viewports

#2 @viralsampat
4 years ago

Hello @patelhitesh

Here, I have added above-mentioned issue CSS, Also I have attached its screenshot for better understanding,

.thumbinner a.image img.thumbimage {
    height: auto;
    max-width: 100%;
    margin-top:10px
}

Thanks,

@viralsampat
4 years ago

I have checked above mentioned issue and I have resolved it and added patch. Also, I have attached screenshot after resolved this issue.

#3 @obenland
2 months ago

  • Keywords needs-patch needs-design-feedback removed
  • Resolution → worksforme
  • Status new → closed

It looks like this may have been fixed in a page update. The images are no longer overflowing.

Note: See TracTickets for help on using tickets.