Using react.js, I'm currently developing a website that appears like this before resizing:
pre-resize_screenshot_website
However, upon vertical or diagonal resizing, the layout becomes distorted especially in the 'availability search bar' and navbar options as depicted here:
post-resize_screenshot_website
The screenshots shared are from the homepage of my project. Below is the code for the homepage:
// React component code for homepage...Here's an insight into the CSS code:
:root {
/* CSS variables... */
}
/* Various styling rules... */
Additionally, here's the code for the navigation bar:
// React component code for the navbar...If I set a min-width: 1000px for the availability-search-container, the elements remain intact when minimizing horizontally. How can I ensure consistent layout stability regardless of vertical, horizontal, or diagonal resizing? Any suggestions on achieving this?
For those interested in exploring the project interactively, feel free to visit it on codesandbox: https://codesandbox.io/s/clr-website-xyogn.