How to implement inheritance in the adaptive layout of the joomla template?

Question

css

Hello.
I encountered a problem with displaying the site rent-crimea.com/beta on mobile devices. I would not really like to make up a mobile version of the site, but to bring adaptability to mind.
So, we have 2 blocks: sidebar (menuha) with a width of 20% of the entire page and main (content) - 80%, respectively. When the screen size is reduced, the fields are compressed accordingly, but after a certain mark, div.main will fit on div.sidebar. I haven’t slept for several days and now I can’t understand ... it either shrinks so crookedly, or still the main content div fits on the menu. I would like everything to be reduced according to the classics.
Please point out any obvious errors or maybe implicit ones, I'm already bad at thinking =( Thank you.

Answer 1

The solution is on the surface.
You need to specify the min-width parameter for #sidebar and .main so that it does not shrink to zero, but to some reasonable limits.
After that, at least it will be watchable on mobile phones.
Well, if you really bring the mobile version to mind, then you need to take media queries and, after a certain width, cancel the float for both classes indicated above.
For more coolness, you can customize the menu for mobile using superfish.js