question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Small screen laptop fails to render phone frame HTML/CSS Waypoints

See original GitHub issue

Challenge Name

Every HTML/CSS waypoint

Issue Description

Look at the screenshots provided below. It has something to do with the screen resolution, it’s 1024x600. This is a 11" laptop, i got it almost only to do the FCC curriculum on the go, but i found i cant use it using its native resolution. If i go into developer mode and simulate a bigger screen resolution, i can do my coding with ease, but it’s a lot of work to browse the site in such mode using the touchpad.

Browser Information

  • Browser Name, Version: Firefox 47.0
  • Operating System: Windows 7 X86
  • Mobile, Desktop, or Tablet: It’s a netbook.

Your Code


Screenshot

1st part of the site, Challenge description and stuff 2nd part of the site, code itself 3rd part of the site, where the phone frame should be rendered Developer mode / Mobile mode

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
caravincicommented, Oct 4, 2016

Gopher! 😃 I’ll QA for you 😃

0reactions
codetweetiecommented, Oct 3, 2016

I would like to work on this if nobody has taken it already.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Simulate mobile devices with Device Mode
With Device Mode you don't actually run your code on a mobile device. You simulate the mobile user experience from your laptop or...
Read more >
Screen width Property
The width property returns the total width of the user's screen. The width property returns width in pixels. The width property is read-only....
Read more >
Responsive SVG with fitting image in HTML/CSS/JS
In my case, due to the SVG overflow being hidden, smaller screens leave the frame too small. Any ideas on that? – Evreux...
Read more >
Media Queries Level 4
CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc.
Read more >
How To Make A Responsive Image With Clickable Areas ...
Your clickable areas can be displaced because of two reasons as far as I can think of: 1. You specified the coordinates of...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found