[UI] Small screen resizing issues on Home Page for any country

[Rubinstd]

Severity

Low

Environment

Windows 10 Desktop
Chrome

Steps to reproduce:

Run the application
Choose a country ex. Canada (navigating to the Canada/products route)
Right-click and select inspect
Re-size the window or enter mobile mode (width should be <1180px)

Expected:

All items should resize and remain in a clean and usable format.

Actual:

The top bar including the search bar, title, and navigation links (ex. Home, About, Contact, Signin, Register, Cart) will awkwardly resize, overlapping items / spilling off of the pink background.

Screenshot:

Navigation button's spilling past the pink background:

Searchbar spilling past the pink background:

Notes:

It's important to ensure that these elements have minimum width values in their styling in order to accommodate devices of all screen sizes.