Prevent DIV from shifting upwards while resizing the window

I am in the process of creating a responsive website, and I encountered an issue with a particular DIV that spans 100% width of the body. Whenever I resize the browser window, this DIV moves upwards and covers the one above it. This problem only occurs when my responsive CSS is applied.

Here is how it's supposed to look: https://i.sstatic.net/41rxp.jpg

This is what happens when I resize the window upwards: https://i.sstatic.net/pRflN.jpg

Here is a snippet of my code:

  
// Here goes the CSS code for the header section...

<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- /Bootstrap 4 -->

<!-- HEADER -->
<header>
  <div class="row">
    <div class="header-content col-lg col-sm-12">
      <img src="img/logo-simplecash.svg" alt="Logo SimpleCash">
      <h6>text here</h6>
      <div class="col-12">
        <div class="row">
          <div class="stores">
            <div class="badges col-lg-12 col-sm-12">
              <a href="#"><img src="img/google-play-badge.svg" alt="Google Store"></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="header-device col-lg col-sm-12">
      <img src="img/screen-home.png" alt="App Simple Cash">
    </div>
  </div>
</header>
<!-- / HEADER -->

htmlcssbootstrap-4

Answer №1

Try using percentage height instead of pixels, it might solve the issue

UPDATE:

I just noticed there is a margin-top: -10% within the media query. That negative margin is causing the problem, adjust that value to improve the positioning

Answer №2

Upon closer inspection of my code, I identified the root cause of the issue.
Essentially, the problem stemmed from a modification I made to my responsive CSS:

header {
    height: auto;
}

In my original CSS implementation, I had configured it like this (to fill 100% of the window's height):

header {
    height: calc(100vh - 60px);
}

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

Issue with transition or animation not functioning when the element is positioned prior to the toggle

Why are only the elements after the toggle working in this code snippet that animates visibility? The ones before don't seem to be affected. Any ideas on why this behavior is occurring? I'm testing this code in the latest version of Chrome. ...

htmlcsscss-animationscss-transitionscss-transforms

Utilizing Selenium to automatically scroll through a Flickr page in order to capture and retrieve all the

Hey there! I'm currently working on a project to retrieve Flickr public images from a specific group. So far, I've been able to successfully parse the HTML and extract the image hrefs. However, I'm facing a challenge when it comes to retriev ...

pythonhtmlselenium-webdriverpython-requests-html

Using React Native to create a concise text component that fits perfectly within a flexbox with a

Within a row, there are two views with flex: 1 containing text. <View style={{ flexDirection: "row", padding: 5 }}> <View style={{ flex: 1 }}> <Text>Just a reallyyyyyyyy longgggg text</Text> </View> ...

javascriptcssreactjsreact-native

Access rights for subdirectories in HTML

My website is up and running with separate folders for ico, img, css, and js within the html directory. However, I've noticed that when a user navigates to mydomain.com/img, they are able to see a list of all the images in that folder. This doesn&apos ...

phphtmlpermissionsdirectory

The Facebook Like button and Twitter Follow button are not displaying in line on iOS browsers such as Chrome and Safari

When you go to: and resize your viewport to around 400px, click the down arrow next to O&O&O&O. The Twitter and Facebook buttons will be seen on the same line. However, if you repeat the same process on Safari or Chrome for iOS, you'll n ...

ioscssfacebook

Transform HTML Response into PHP Array

When I make a web call in PHP, the response I am receiving is unlike anything I have encountered before. Despite trying both the json_decode function and the parse_str method, I am unable to extract the values into an array. My goal is to create an array ...

phphtmldecode

Error encountered while generating PDF using xhtml2pdf Pisa.CreatePDF() due to CSS parsing issue

Currently, I am referencing the xhtml2pdf instructions. I opted to utilize one of the provided sample html files and saved it as test.html: <html> <head> <style> @page { size: a4 portrait; @frame header_frame { ...

pythonhtmlcsspdfxhtml2pdf

The lack of vertical alignment in the table

Trying to do something really simple here and I'm a bit stuck. Currently working on a forum project, and surprisingly the backend is error-free (thanks to some questionable magic tricks), However, my current task is to display all subcategories using ...

phphtmlcss

Learn the process of inserting buttons for editing and deleting in individual rows of a datatable

After creating a datatable, the next step is to enable editing and deleting records within the table. To achieve this, I need to add delete and edit buttons next to the "Year" column, which should be labeled as the action column. The action column should ...

javascriptphphtmljsondatatable

I'm feeling a bit lost on how to pull out HTML tag elements using Python

I have been attempting to extract the html tags for alternative purposes, but due to the structure of the html file, I am facing challenges using conventional methods to locate the elements. The section containing the elements is quite long (consisting of ...

pythonhtmlselenium-webdriverweb-scraping

Discover how to execute a function depending on a specific button in Node.js using Express

How can I trigger a function based on which button is clicked? I am working with an EJS file named test.ejs <form> <input type="submit" value="Click here 1"></input> <input type="submit" value="Click here 2">&l ...

htmlnode.jsexpress

Issue with the MUI Autocomplete display in my form

Recently, I started using Material UI and Tailwind CSS for my project. However, I encountered an issue with the Autocomplete component where the input overlaps with the following DatePicker when there is multiple data in the Autocomplete. I have attached a ...

csstypescriptnext.jsmaterial-uitailwind-css

My goal is to center items within a layout that uses either inline-flex or inline-block positioning

https://i.sstatic.net/F7dXv.png My goal is to align the left and right margins equally. I have a set of nft cards that I want to display in a grid format, similar to the image provided. However, I am having trouble centering them on the page. I simply wan ...

htmlcssbootstrap-4tailwind-css

Connect the scroll wheel and then proceed to scroll in the usual way

There are two div elements with a height and width of 100%. One has the CSS property top:0px, while the other has top 100%. I have implemented an animation that triggers when the mousewheel is used to scroll from one div to the other. The animation functi ...

javascriptjquerycssgsap

Can you apply transparency to a hex color variable in SCSS and then use that variable again?

In my app, I have a set of scss variables that represent colors used throughout the interface. For example: $primary-color: #00755E There are also colors that are variations of this primary color with different opacities. For instance, $primary-color with ...

javascripthtmlcsstypescriptsass

Transitioning smoothly between different backgrounds will be like changing the cursor color

As I work on my website, I encounter the need for a cursor that smoothly changes its color. Specifically, I want the cursor to appear blue (#0059ff) when hovering over a white background and white when over a blue background, with a seamless transition lik ...

csssassmix-blend-mode

Is it possible to integrate a PDF file into a webpage while also preventing users from downloading it?

I need help with a website that has various PDFs available for users to view. However, we want to prevent users from downloading these PDFs. Ideally, I'm looking for a solution using JavaScript/HTML. We've attempted different methods to disable ...

javascripthtmlreactjs

ajax and codeigniter combination for selecting options

Is it possible to implement a set_select option within an AJAX component for a dynamic dependent dropdown list that is being cleared after validation errors? I am looking to incorporate the set_select functionality in the code snippet below: <script ty ...

phpajaxhtmlcodeigniter

Unsure why my ReactJS tables are not displaying Bootstrap styling correctly

I'm facing an issue while trying to implement bootstrap tables in my Reactjs project Below is the code snippet: <div> <h1>Games List</h1> <div class="table-responsive"> <table class="table table-bord ...

reactjsbootstrap-4

Marking table entries to prevent their display once that row of entries has been chosen/utilized

Being new to programming, I'm unsure if the title of my issue is appropriate, but here's what I'm facing: I've created a basic inventory program that allows me to add, modify, and delete entries successfully. Now, for my next task, I w ...

phphtmlmysqlsql