I am having trouble with horizontal overflow as soon as my webpage goes below the height of the browser. I am unsure where I am having trouble in my css code. Any help would be grateful. Thank you!
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css");
@import url('https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/inter.css');
#fixed-header {
height: 0.5in; /* Adjust height as needed (0.5in is approx. 12px) */
position: fixed; /* Sticks to the top of the viewport */
top: 0;
left: 0;
width: 100%; /* Expands to full viewport width */
background-color: #e6e2e8; /* Customize background color */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
border-bottom: 1px solid #ddd; /* Add a 1px light gray border at the bottom */
display: flex;
justify-content: space-between; /* Distributes elements evenly */
align-items: center; /* Vertically aligns elements in the center */
}
.logo-container {
padding: 0.5em;
}
.logo-container a {
text-decoration: none;
color: black;
}
.right-mission {
padding: 0.5em;
text-align: right;
font-style: italic; /* Optional styling for "Honesty is our mission" */
}
.right-mission h1 {
text-decoration: none;
color: #333;
font-weight: bold;
font-size: larger;
}
.overlapping-image {
position: absolute;
top: 280%; /* Adjust the vertical position as needed */
left: 50%; /* Adjust the horizontal position as needed */
transform: translate(-50%, -50%); /* Center the image */
width: 2in;
height: 2in;
z-index: -1; /* Ensure the image overlaps the content below */
border-radius: 50%;
}
nav {
display: flex;
align-items: center;
}
nav a {
padding: 0.5rem 1rem;
text-decoration: none;
color: #333;
}
.dropdown-toggle {
display: flex;
align-items: center;
padding: 0.5rem 1rem;
background-color: transparent;
border: transparent;
}
.dropdown-menu {
display: none;
position: absolute;
top: 100%; /* Adjust position based on your design */
left: 0;
background-color: transparent; /* Set to transparent instead of #fff */
box-shadow: none; /* Remove box-shadow completely */
padding: 0.5rem;
}
.dropdown-menu li a {
display: block;
padding: 0.5rem;
background-color: #fff;
}
.dropdown:hover .dropdown-menu {
display: block;
}
/* Media queries for responsive adjustments */
@media (max-width: 768px) {
.header-image {
width: 100%; /* Make image full width for mobile */
}
}
.carousel {
max-width: 500px; /* Maximum width for larger screens */
min-height: 300px; /* Minimum height for all screens */
width: 100vw; /* Fill remaining viewport width while respecting min-height */
overflow: hidden;
position: relative;
margin: 0 auto; /* Center horizontally */
margin-top: 20em; /* Maintain top margin */
z-index: 2; /* Place behind header when scrolled down */
}
.carousel.hidden {
z-index: 1; /* Hide carousel behind header when scrolled */
display: none; /* Optionally hide carousel completely */
}
.carousel img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.5s ease-in-out;
margin-bottom: 5em;
}
.carousel img.active {
opacity: 1;
}
/* Smaller screens adjustments */
@media only screen and (max-width: 768px) {
.carousel {
max-width: 70%; /* Adjust maximum width for medium screens */
}
}
@media only screen and (max-width: 480px) {
.carousel {
max-width: 90%; /* Adjust maximum width for small screens */
}
}
.grid {
display: grid;
grid-template-columns: 1fr; /* One column, full width */
width: 100vw; /* Span the viewport width */
margin: 0 auto; /* Center horizontally */
}
/* Optional responsive styles */
@media only screen and (max-width: 768px) {
.grid {
padding: 0 15px; /* Add some padding on smaller screens */
}
}
@media only screen and (max-width: 480px) {
.grid {
font-size: 0.8rem; /* Adjust font size for smaller screens */
}
}
.subheading {
font-family: "Brush Script MT", Brush Script Std, cursive;
text-align: center;
/* Additional styles like font-size, color, etc. */
}
.centered-text {
text-align: center; /* Center the text horizontally */
word-wrap: break-word; /* Enable word wrap for long lines */
max-width: 100%; /* Stretch to full container width */
@media (max-width: 768px) { /* Adjust styles for smaller screens */
font-size: 16px; /* Reduce font size for better mobile readability */
}
}
.centered-icon {
display: block; /* Ensure the icon element acts as a block-level element */
margin: 0 auto; /* Center the icon horizontally */
max-width: 100%; /* Stretch the icon to full container width while remaining responsive */
@media (max-width: 768px) { /* Adjust styles for smaller screens (adjust breakpoint as needed) */
max-width: 50%; /* Adjust maximum width for better mobile viewing */
}
}
.empty-section {
height: 7em;
width: 100vw;
overflow: hidden;
}