Hello,
I have developed a web application using ReactJs+Redux.
I have used % values for the CSS of components or divs. But when I resize the window, application does not look clean.
Here is the screenshot of the web app before resize:
And after resize:
What is the best way to achieve such responsiveness?
Thank you in advance!
Responsiveness is usually done in CSS rather than JS.
Are you using media queries?
No. I am not using media queries. I do not know at what extent user can resize the window.
So, I do not know min-width and max-width of the resized window in advance.
But you do know at what widths your design looks squashed!
You need to add the media query at the width that your design starts to look awkward and breaks.
If three columns is too squashed then you need to go to 2 columns or a 1 column layout for smaller devices
With a few well chosen media queries that match your design requirements you can cater for all devices.
In some cases that will be an easy task but others may require a lot of thought and forward planning. Generally thinking responsively is the first thing you do and not the last 
You’ll also need to add
<meta name="viewport" content="width=device-width, initial-scale=1">
in the head of your document.
OK, thank you for all your suggestions.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.