Make website reponsive for mobile devices

Semantic-Org / Semantic-UI-React

The official Semantic-UI-React integration

https://react.semantic-ui.com

MIT License

13.22k stars 4.05k forks source link

Make website reponsive for mobile devices #4150

Open ritik307 opened 3 years ago

ritik307 commented 3 years ago

Feature Request

Add responsiveness for mobile devices.

Problem description

When a user accesses the website via a mobile device, it becomes very difficult for them to even access the content as the side menubar cover up the whole screen.

Proposed solution

Allowing the side menu bar to hide automatically when the screen size reduces to a certain dimension.

Screenshot (Mobile view)

semanticuiissue

welcome[bot] commented 3 years ago

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

I-keep-trying commented 3 years ago

Actually, this would be nice for desktop also. Maybe make it close-able? Or resizeable?

layershifter commented 3 years ago

This would be great 🔥

jonatanYanovsky commented 3 years ago

It looks like the page starts being cut at screen sizes less than ~730px

if we hide the left menu (display:none) and remove the 250px of margin-left on the middle column, we get something like this:

Is this UI acceptable? It should work until we get down to ~500px, at which point the right-side bar gets cut off