I got this code online, please advise:
/* Step 1: Ensure the page respects the viewport */
- {
box-sizing: border-box;
}
/* Step 2: Make the body flexible /
body {
margin: 0;
padding: 15px;
min-width: 0; / Allows shrinking below content width /
overflow-x: hidden; / Prevents horizontal scroll */
}
/* Step 3: Fix your header/navigation /
header, .header, nav, .navigation {
display: flex;
flex-wrap: wrap; / Allows items to wrap to next line /
gap: 10px 20px; / Spacing between items */
align-items: center;
}
/* Step 4: Fix the search bar */
.search-container, .search-box {
display: flex;
flex-wrap: wrap;
gap: 10px;
width: 100%;
max-width: 100%;
}
.search-container input[type="text"] {
flex: 1;
min-width: 150px; /* Prevents it from getting too small */
padding: 8px 12px;
}
.search-container button {
padding: 8px 20px;
}
/* Step 5: Make text and containers wrap naturally */
h1, h2, p, .container, .main-content {
max-width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Step 6: Add a media query for very small screens */
@media (max-width: 600px) {
body {
padding: 10px;
}
/* Stack navigation items vertically */
nav, .navigation, .menu {
flex-direction: column;
align-items: flex-start;
}
/* Make the search bar full width and stack */
.search-container {
flex-direction: column;
}
.search-container input[type="text"] {
width: 100%;
min-width: unset;
}
.search-container button {
width: 100%;
}
}
