stoplightio
Pages rendered are not responsive
The pages rendered are not responsive. Is it something i am missing or currently responsiveness is not supported?
This can be replicated in the demo site as well. https://elements-demo.stoplight.io/
@subalalithafl Responsiveness is not supported currently. We do have that in our back log. If you have thoughts on some quick wins, let us know! We'll be using this issue to track the progress on it.
@mnaumanali94 Unfortunately there is no quick fix i think, at least to my knowledge. We need to change the layout to 3 col responsive grid and when we are in mobile we need to hide the side panel and make it as drop down menu or something similar. The 3rd column should align to the bottom of the text. All these change is not possible without rewriting the layout i think.
Majorly dirty hack but who cares I want that mobile friendly goodness! stacked layout is responsive, and I am just switching between the two layouts.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://unpkg.com/@stoplight/elements/web-components.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@stoplight/elements/styles.min.css">
<style>
.desktop {
display: none;
}
@media screen and (min-width: 767px) {
.desktop {
display: block;
}
.mobile {
display: none;
}
}
</style>
</head>
<body>
<div class="desktop">
<elements-api
logo="/img/logo.svg"
apiDescriptionUrl="/v1/api-docs.json"
router="hash"
/>
</div>
<div class="mobile">
<elements-api
logo="/img/logo.svg"
apiDescriptionUrl="/v1/api-docs.json"
router="hash"
layout="stacked"
/>
</div>
</body>
</html>
You can also change it dynamically with js
const doc = document.getElementById('docs');
const updateLayout = () => {
doc.layout = window.innerWidth >= 1280 ? 'sidebar' : 'stacked';
}
updateLayout();
window.onresize = updateLayout;
It was announced today that Stoplight docs are now responsive: https://roadmap.stoplight.io/c/162 Are these changes already in Stoplight Elements?
