I'm working on a Node-RED dashboard and struggling to make the layout responsive across different screen sizes and devices. I want the dashboard to adapt seamlessly whether it's viewed on a smartphone, tablet, or desktop.
I've tried adjusting the grid settings and group widths, but the layout still doesn’t scale as I’d like. Does anyone have suggestions or best practices for ensuring that a Node-RED dashboard is fully responsive?
Thanks in advance for any help!
see the image. It is not showing any responsiveness at all.
tried this also:
<style>
#Home_soil_sensor {
position: relative;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
@media (min-width: 768px) {
#Home_soil_sensor {
width: 75%;
margin: 0 auto;
}
}
@media (min-width: 992px) {
#Home_soil_sensor {
width: 50%;
margin: 0 auto;
}
}
@media (min-width: 1200px) {
#Home_soil_sensor {
width: 40%;
margin: 0 auto;
}
}
</style>
<div id="Home_soil_sensor" class="visible">
<!-- Your content here -->
</div>