Every time I adjust the browser height on my landing page, the elements start to overlap each other

Something strange is happening - as I shorten the height of the browser, elements on the page start to overlap. I've tried using Firebug to troubleshoot, but haven't had any luck so far. Maybe someone here can help me out!

EDIT:

It seems that ever since I added the video, this issue started occurring.

HTML

<section id="video">
    <video width="745px" height="414px" controls="controls" poster="video/video-poster.png">
        <source src="video/intro-video.mp4">
        <source src="video/intro-video.ogv">
        <source src="video/intro-video.webm">
        <iframe width="745" height="414" src="//www.youtube.com/embed/Dhqnn3bA7LU" frameborder="0" allowfullscreen></iframe>
    </video>
</section>

CSS

#video {
    position: relative;
    margin: 0 auto;
    margin-bottom: 15px;
    text-align: center;
    max-width: 745px;
    width: 100%    !important;
    height: auto   !important;

}

video {
    max-width: 745px;
    width: 100%    !important;
    height: auto   !important;
}

Link:

Huge thanks in advance!

This is how it looks normally

And this is what happens when you shorten the browser height

htmlcssresponsive-design

Answer №1

If you're looking to make your footer stay at the bottom of the page all the time, you'll want to make it 'sticky'. You can check out this article on CSS-Tricks for detailed instructions. One important step is to ensure that your <footer> is placed outside of your <div id='#container'>, and then apply the CSS code provided:

#container {
  min-height: 100%;
  /* set equal to height of footer */
  margin-bottom: -32px; 
}
#container:after {
  content: "";
  display: block;
}
footer, #container:after {
  height: 32px; 
}

Additionally, if you're noticing distortion in your background, it could be due to applying box-shadow directly to the body element. Consider adding the shadow to your #container instead.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Styling with CSS: How to Show an Absolutely Positioned Element in Google Chrome

I'm currently working on a CSS design that involves positioning an image within a span tag. Here's the CSS code I have: .dc-mega-icon { background-image: url(...); display: inline-block; position: absolute; top: 18px; width: ...

htmlcssimagepositionabsolute

How can I retrieve all values from an input number field that is created using *ngFor in Angular?

In my table, I have a list of cart products displayed with a quantity field. Users can increase or decrease the quantity using options provided. Currently, if I place an update button inside a loop, it creates separate buttons for each product. However, I ...

htmlangularngfor

Leveraging the capabilities of the Freshdesk API

Has anyone had any experience utilizing the FRESHDESK API specifically for creating tickets? The documentation states the following: Request URL: domain_URL/helpdesk/tickets.xml Request method: POST <helpdesk_ticket> <description>Disk fai ...

javascripthtmlxmlapifreshdesk

Difficulty Clicking Links with CSS 3D Transformation

I'm currently working on implementing a CSS 3D transform effect on my website. However, I am encountering some issues with clicking the links once the card has been flipped over. Question Why is this happening? How can I resolve this so that I can ...

csscss-transforms

The pagination feature for Swiper is experiencing issues across both desktop and mobile platforms

I am having an issue with the pagination display in the text. I would like it to appear below the text as a standalone item for better visibility. Another problem arises when viewing the page on mobile devices - the hamburger menu displays behind the slid ...

javascripthtmlcssswiper.js

What is the best way to modify the background color of a whole div when hovering over it

Recently, I encountered a challenge while working on my website. I want to set up a link inside a div that changes color when hovered over. However, the desired effect is not quite coming out as expected. Before hovering, I aim to have a border around the ...

htmlcss

Learn the method of centering flexbox vertically by using the flex-wrap property with the value

enter image description here I am currently working on a to-do list project. Whenever I add a folder, it appears vertically aligned. (click the /Bottom bar/ button -> it will display a folder in the /Homecomponent/) Each new folder I add goes further ...

cssreactjsflexbox

The CSS @media query is failing to function properly

I'm currently developing a web application similar to Spotify for my personal use, but I'm running into some issues with the @media query as it doesn't seem to be working correctly. Here is the CSS code: /* Screen Adapting */ @media (height ...

htmlcssweb-applicationsmedia-queries

Is there a way to access the chat source code without relying on selenium for assistance?

My dilemma lies in wanting to extract the user's id information from the chat interface. The specific section I am interested in within the chat area appears as follows... <div id="chat_area" class="chat_area" style="will- ...

pythonhtmlseleniumpython-requests

What steps can be taken to ensure that a box is the exact same size

Is it possible to make two of my main buttons the same size? I'm just starting out in web development and could use some guidance. Below is the HTML and CSS code I currently have for my index.html: <body> <div> <img src="img/projec ...

htmlcss

Maintain the div height as the image loads

Is there a way to prevent the collapse of the .img-container while an image is loading? Currently, when the image takes a few seconds to load, the container collapses and only expands to full height once the image has loaded. I would like the container to ...

cssimagetwitter-bootstraptwitter-bootstrap-3

Prevent the appearance of a scrollbar on a fixed-position popup element

Whenever I click on a button, a Sidebar opens up and fills the entire screen due to its position being set to fixed. Here's how it looks with TailwindCSS: return ( <div className="fixed z-40 flex left-0 top-0 h-screen w-screen"> ...

cssreactjstailwind-css

Why is ui-view failing to display the associated template in angular-ui-tab?

Can someone help me troubleshoot why ui-view is not working for ui-tab in my code? Here is what I am experiencing: On the customers page, I have a link that redirects to the update customer page when clicked. The link looks like this: http://localhost:300 ...

javascripthtmlangularjs

The change() function in jQuery appears to have a glitch where it does not properly execute during the initial onclick event, but functions correctly for

Here is the button code snippet: <li class="cnt-li"> <button class="btn-container" title="Add Container" data-toggle="modal" data-target=".add-ctn-modal"> <img src="images/add.png" alt="Add Container"> </button> </li> ...

javascriptjqueryhtmlcsstwitter-bootstrap

Unexpected issue on AngularJS application

Encountering issues with incorporating a controller into my page - each time I add it to a DOM element, an error is thrown. Here's the structure of my HTML page: <html data-ng-app="sportsStore"> <head> <title>Sports Sto ...

javascripthtmlangularjsangularjs-directive

Extract Hyperlink from a Specific Class using Python's Selenium

Currently, I am faced with the challenge of extracting the href from the HTML snippet below. However, my method requires the identification of the second data class in order to retrieve the href: <tr> <td class="data"> <a targe ...

pythonhtmlseleniumhref

Move the width from left to right with animation

Currently, I am exploring ways to use jQuery to create an animation effect on a div where the width shrinks from left to right. My first step is to have the element animate as follows: Slide in from left to right Then continue moving to the right off th ...

jquerycss

"Placing drop-down animations in just the right spot

I'm currently working on adjusting the dropdown behavior for thumbnails when hovering over them. I want the drop-down to appear beneath the 'Caption Title' instead of above the image, but so far my CSS adjustments haven't been successfu ...

javascriptjqueryhtmlcss

Updating values using jQuery when tags in a single table row are changed

In my current setup, I have a table structured as follows: <table> <tbody> <tr> <td> <input type="text" class="identifier" /> </td> <td class="name"> Some value < ...

jqueryhtml

Sleek Navigation in CSS and HTML

Hello, as I work on my website with multiple pages, I am looking to implement smooth scrolling on a specific page without using the html tag for the entire site. Below is the code snippet I am working with: {% if section.settings.display_product_detail_des ...

htmlcssshopifyliquid