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

Expanding Issue with Bootstrap Navigation

Hello! I am experiencing an issue with my navbar. The menu collapses, but it does not expand. I have used an example from Bootstrap and made some tweaks, but for some reason, it still doesn't expand properly. Below is the code that I have been workin ...

htmlcsstwitter-bootstrap

The JavaScript date picker is malfunctioning in the HTML editor, but it functions properly in Fiddle

I have a working format available in a JS fiddle. Here is the code I have used on my demo site: I created a new folder named "js" and placed datepicker.js inside it, then linked it in my HTML like this: <script type="text/javascript" src="js/datepicke ...

javascriptjqueryhtmlcss

When a table cell is hovered over, a left border will be added

I've been working on adding a left border to the text in a way that highlights the first cell's border when hovering over a row, providing a clear indication of the current row for users. Feel free to check out my progress so far on this fiddle: ...

htmlcss

The elements on the webpage are spilling over with content

I encountered an issue while creating a dashboard with a sidebar on the left side. When adding content to the page, some of it ended up hidden behind the sidebar. I tried using overflow-x:auto and this was the result: https://i.stack.imgur.com/5qHJY.jpg Be ...

htmlcssangularflexbox

Issue with HTML form not updating MySQL database with PHP

Oh no, this PHP situation is really confusing me! I've been at it for a month now and this is the kind of challenge I thought I would face four weeks ago. Sigh! I keep getting an "Undefined index" warning, and the database is updating with a date of ...

phpmysqlhtmlcss

What exactly defines a progressive mobile website?

Currently, I am involved in a project that focuses on creating a responsive website that can be accessed across different platforms and browsers, including Mobile, Desktop, and Tablet. While browsing through a blog, I came across the term "Progressive Mo ...

jqueryhtmlwebresponsive-design

In the Opera browser, the closing script tags seem to mysteriously vanish

I recently built a website using bootstrap and implemented the JQuery load function to merge separate HTML files into one for better organization. The site is currently live on github pages. However, I've encountered an issue specifically with Opera ...

javascriptjqueryhtmltwitter-bootstrapopera

Why are the UI components (`Card Number`, `MM/YY`, `CVC`) not being displayed in the React app when using Card

Having an issue where the CardElement Ui component is not visible in the image provided. It should appear above the Order Total: $0 next to the payment method. I've attempted various debugging methods without success. I'm still working on resolv ...

javascriptcssreactjsexpress

Tips on aligning a span element at the center of an image without losing its mouseover

<div class="pic"> <img src="image.jpg" height="250"/> <span class="text" style="display:none">text here</span> </div> <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </scrip ...

javascriptjqueryhtmlcss

When trying to load a php page2 into page1 via ajax, the Javascript code fails to execute

Currently, I am in the process of learning PHP and JavaScript. I have encountered a particular issue with a webpage setup. Let's say I have a page called page1 which consists of two input fields and a button labeled 'Go'. Upon clicking the & ...

javascriptphpjqueryhtmlajax

How can a borderless text field be created using Material UI?

Today, I delved into using Material UI for my React project. My goal is to create a registration form similar to this one. Essentially, I want 5 input text fields without any borders and with a simple background color effect when active. However, I'm ...

cssreactjsmaterial-ui

Experiencing difficulty aligning the Material UI grid to float on the right side

I'm currently in the learning phase of material-ui and encountering an issue with floating the grid content to the right side. Despite trying alignItems="flex-start" justify="flex-end" direction="row" in the container grid, as well as using the css p ...

cssreactjsmaterial-ui

Discover the magic of using Polymer core-animated-pages transitions to create a stunning tile-cascade effect for your custom elements!

Trying to recreate the slide-up and tile-cascade transitions from this example using a snippet with the polymer designer tool. This time, custom elements are preferred over regular HTML tags. Custom elements have been created for each page and placed with ...

htmlpolymermaterial-designshadow-domcustom-element

Using Four Different Colour Borders in CSS

Is it possible to create a CSS border with 4 different colors on one side? Currently, I have the following: #header { border-color:#88a9eb; } I aim to achieve a border featuring four solid colors split equally at 25% each. Can this be done? I am looking ...

htmlcssborder

Is the container in semantic ui being breached by a segment overflow?

I've recently started learning Semantic UI. One issue I'm facing is that the width of the "segment" overflows the "container." Check this JSFiddle for more clarity. Are there any alternative solutions? In addition to the grid system, I'm ...

htmlcssuser-interfacesemantic-uisegment

What is the best way to transform this into an HTML readable code?

While browsing through a template, I came across this code and I'm unsure of how to get it functioning. I've tried removing the comments, but unfortunately it doesn't seem to be working as expected. li.dropdown.navbar-cart ...

javascriptphpjqueryhtmlcss

What steps can I take to ensure that the upper and left sections of a modal dialog remain accessible even when the size is reduced to the point of overflow?

One issue I'm facing is with a fixed-size modal dialog where part of the content gets cut off and becomes inaccessible when the window shrinks to cause an overflow. More specifically, when the window is narrowed horizontally, the left side is cut off ...

htmlcsstypescript

The background image fails to load the specified image

I am encountering an issue with utilizing background-image in the style of my HTML page. I am currently developing a login page for my Django application, and when I preview the page, the background image does not appear. Strangely, this code was functioni ...

htmlcssbackgroundbackground-image

Retrieve the total count of tables within a specific div element

If I have an unspecified amount of tables within a div, how can I determine the total number of tables using either plain JavaScript or jQuery? ...

javascriptjqueryhtml

Implementing a feature to insert a horizontal rule button in React Draft Wysiwyg

I am currently working on implementing a custom button in React Draft Wysiwyg that will allow me to add an <hr> tag to my content. Although I have followed the demos and documentation, I have encountered an issue where the custom button successfully ...

javascripthtmlreactjsdraftjsdraft-js-plugins