simonjvardy / alarm-clock

Alarm Clock app using HTML5, CSS3 and JavaScript. Code Institute Milestone 2 Project.

https://simonjvardy.github.io/alarm-clock/

6 stars 8 forks source link

Unit Test: Overflow-x problem on mobile displays #21

Closed simonjvardy closed 3 years ago

simonjvardy commented 3 years ago

Describe the bug Found during testing on an iPhone XS Max - content overflows a block-level element's left and right edges.

To Reproduce Steps to reproduce the behavior:

Go to https://simonjvardy.github.io/world-clock
scroll the display left and right
The displayed content moves off the left and right edges of the screen

Expected behavior The displayed content should remain within the device screen size

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

OS: OS X El Capitan
Browser Firefox

Smartphone (please complete the following information):

Device: iPhone XS Max
OS: iOS 14.1
Browser Chrome

Additional context CSS styling for the body element should normally contain overflow-x: hidden but was overlooked.

simonjvardy commented 3 years ago

24 Added `overflow-x: hidden;` to the style.css container and row bootstrap classes