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.

illegibile layout for interactive example

See original GitHub issue

`portrait` screenshot 👎

Sample URL https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search

`landscape` screenshot 🤏 (pretty usable)

Issue Analytics

State:
Created 3 years ago
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

escattonecommented, Jan 7, 2021

@schalkneethling What do you think of moving the Output section of all interactive examples below the tabbed code section, for all cases, mobile (vertical or horizontal), tablet and desktop? It seems like a win/win. We’re not trying to cram too much into the horizontal space (which hurts us on mobile devices), and it feels (at least to me) more natural to have the “Output” section below even when using the desktop.

It seems that we already do that for the JavaScript examples (see below)?

Mobile (simulated using the `Responsive Design Mode`)

Desktop

It seems to me that would make the HTML interactive examples usable even when in the “vertical” mode on a mobile device.

0reactions

schalkneethlingcommented, Jan 11, 2021

Turns out this is actually a duplicate of https://github.com/mdn/yari/issues/1720

Top Results From Across the Web

6 Interactive Content Examples You Can Easily Build in Vev

Tired of boring, static experiences? Use these popular interactive content examples in your next web design without touching your CMS or ...

Examples of Interactive Interiors: (Left) Light-Form [Daniele ...

In our research we wanted to explore these design directions where discoverable and illegible systems could be perceived as mysterious and magical. ......

60 Best Examples of Brutalism in Web Design - Qode Interactive

Brutalism in web design is creative, experimental, and unique, and we've singled out the best examples that illustrate the unparalleled beauty of this ......

ExploreModelMatrix: Interactive exploration for improved ...

Here, we present an R/Bioconductor package, ExploreModelMatrix, which enables interactive exploration of design matrices and linear model diagnostics.

13 College Websites For Interactive User Experience

Is your educational college website intuitive enough? Check out 13 college websites that have an interactive user experience.