As soon as I shrink the browser window, the HTML content becomes restricted and the div elements elegantly slide across the

Question

As soon as I shrink the browser window, the HTML content becomes restricted and the div elements elegantly slide across the

Encountering this issue for the second time has been quite perplexing. Initially, I attributed it to my lack of experience in the field as a rookie intern when seeking assistance from colleagues at work with no luck in resolving it. The problem arises when adjusting the height, causing the HTML page's layout to shift while the content within the divs attempts to overflow. Describing the issue proves challenging, but visual aids through images would provide better clarity.

View of the normal page without any issues:

https://i.sstatic.net/CPdeS.png

The problematic scenario:

https://i.sstatic.net/EfpYU.png

A continuation of the issue:

https://i.sstatic.net/SrwSw.png

As seen in the images, understanding how this anomaly occurs or finding a solution remains puzzling.

let weather = {
  // Weather API code snippet
};

// CSS styles for the search functionality and weather display

javascript html css

Answer 1

Answer №1

To address the overflow issue in both #search-main and #Days divs, you can include overflow: hidden as suggested by Wiktor. Additionally, to solve the problem of overflowed data not being visible, consider these suggestions.

The presence of white space below after reducing the width is due to setting the visibility of the right div #Days to hidden in media queries.

Even though the right div remains present while reducing the height, it becomes invisible causing the items inside to overflow.

Instead of using visibility:hidden in media queries, use display:none.

#Days {
    position: absolute;
    display: none;
}

By utilizing display: none;, the respective div will be completely removed instead of just hidden.

https://i.sstatic.net/XSopz.png

As you continue to decrease the window's height, observable overflow will persist due to insufficient spacing between elements within the #search-main and #Days divs.
The apparent empty spaces are occupied by images sized at 100px x 100px.

https://i.sstatic.net/B7hjs.png

To prevent this, replace height: 100% with min-height: 100% in both the divs' styling:

#search-main {
  width: 70%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border-radius: 30px;
  color: white;
  background-color: black;
  opacity: 0.7;
}

#Days {
  width: 30%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-color: black;
  color: white;
  opacity: 0.8;
  border-radius: 30px;
}

Applying min-height: 100% ensures that items within the div do not overflow its parent container.

To prevent divs from overflowing their parent or body, remember to set the child divs' heights lower than or equal to their respective parent divs.

Answer 2

To address the overflow issue in both #search-main and #Days divs, you can include overflow: hidden as suggested by Wiktor. Additionally, to solve the problem of overflowed data not being visible, consider these suggestions.

The presence of white space below after reducing the width is due to setting the visibility of the right div #Days to hidden in media queries.

Even though the right div remains present while reducing the height, it becomes invisible causing the items inside to overflow.

Instead of using visibility:hidden in media queries, use display:none.

#Days {
    position: absolute;
    display: none;
}

By utilizing display: none;, the respective div will be completely removed instead of just hidden.

https://i.sstatic.net/XSopz.png

As you continue to decrease the window's height, observable overflow will persist due to insufficient spacing between elements within the #search-main and #Days divs.
The apparent empty spaces are occupied by images sized at 100px x 100px.

https://i.sstatic.net/B7hjs.png

To prevent this, replace height: 100% with min-height: 100% in both the divs' styling:

#search-main {
  width: 70%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border-radius: 30px;
  color: white;
  background-color: black;
  opacity: 0.7;
}

#Days {
  width: 30%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-color: black;
  color: white;
  opacity: 0.8;
  border-radius: 30px;
}

Applying min-height: 100% ensures that items within the div do not overflow its parent container.

To prevent divs from overflowing their parent or body, remember to set the child divs' heights lower than or equal to their respective parent divs.

Answer 3

Answer №2

It seems like the issue is caused by the oversized #Day element compared to the rest of the page. Due to absolute positioning, it exceeds the html tag but lacks a true height to overflow #document and create a scrollbar. Adding overflow: hidden to #Day resolved the problem. The same fix applies to #search-main

let weather = {
        .
        . (Code content remains unchanged)
        .
    };
    
    document.querySelector(".button").addEventListener("click", function(){
        weather.search();
    });
    
    document.querySelector(".search-item").addEventListener("keyup",function (event){
        if( event.key == "Enter")
        {
            weather.search();
        }
    });
    
    weather.fetchWeather("Istanbul");

*{
        .
        . (CSS styling code remains unchanged)
        .
    }

    <div id="main">
        .
        . (HTML structure code remains unchanged)
        .
    </div>

Answer 4

It seems like the issue is caused by the oversized #Day element compared to the rest of the page. Due to absolute positioning, it exceeds the html tag but lacks a true height to overflow #document and create a scrollbar. Adding overflow: hidden to #Day resolved the problem. The same fix applies to #search-main

let weather = {
        .
        . (Code content remains unchanged)
        .
    };
    
    document.querySelector(".button").addEventListener("click", function(){
        weather.search();
    });
    
    document.querySelector(".search-item").addEventListener("keyup",function (event){
        if( event.key == "Enter")
        {
            weather.search();
        }
    });
    
    weather.fetchWeather("Istanbul");

*{
        .
        . (CSS styling code remains unchanged)
        .
    }

    <div id="main">
        .
        . (HTML structure code remains unchanged)
        .
    </div>

As soon as I shrink the browser window, the HTML content becomes restricted and the div elements elegantly slide across the

Answer №1

Answer №2

Similar questions

While attempting to deploy my project on Vercel by pulling in my code from GitHub, I ran into this error

Add a dynamic "printthis" button to a specific class on the webpage

One column in HTML table row is functional, while the other is not functioning as intended

Having trouble getting the align-items-end property in Bootstrap 4 to function

Display dynamic form with database value on click event

Challenges Encountered with Random Image Generator in JavaScript

What is the best way to use CSS in conjunction with a Master Page and a new content page, ensuring that the new CSS does not interfere with

Converting table rows into an array that consists of arrays of table data using jQuery

Change the color of specific elements in an SVG using React

Is it true that the react setState function does not function properly with stream data?

Guide on uploading a file to Pinata directly from a React application

When working with the async setup() method in Vue3 with router-view, I encountered a perplexing issue

What are some effective strategies for bypassing CORS requirements in Vue client-side and server-side applications?

Is it necessary to capitalize the first letter only when it's not at the beginning of a sentence?

Uncertainty surrounding the handling of children/props rendering - at what point are expressions actually assessed?

Arrow pointing right with a see-through appearance beside the image

Battle of the Browsers: Firefox vs Chrome/IE Design

Perform a sequence of test functions to display as individual tests on BrowserStack

Splitting data using Jquery and PHP

Necessary CSS selector input equivalent in Reactive Forms