Horizontal Overflow |
Horizontal Overflow |
ElConejo |
Dec 15 2023, 01:25 PM
Post
#1
|
Group: Members Posts: 1 Joined: 15-December 23 Member No.: 29,099 |
Hello. I am creating a website and I have looked over my CSS. I have found that Horizontal Overflow is being applied whenever any element exceeds the height of a browser window. I can't find anything in my code that would cause that. I was hoping a second pair of eyes would help me. Thank you.
CODE @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; } Thank you in advance for any help that you can provide. |
Lo-Fi Version | Time is now: 27th September 2024 - 03:03 AM |