Ways to stop a div element from shrinking vertically completely

I am struggling with keeping a div on my website at viewport height until the children elements start colliding. I've experimented with min-height and display:table; but haven't found a solution yet. Here is how it's supposed to look: https://i.sstatic.net/GTgjW.png

However, on smaller screens, it appears like this: https://i.sstatic.net/O50zj.png

Here is the attached code snippet:

* {
  margin: 0;
}

body {
  overflow-x: hidden;
  font-size: large;
  margin: 0;
}

.welcome {
  text-align: center;
  background-image: url("https://images.unsplash.com/photo-1587831990711-23ca6441447b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8ZGVza3RvcCUyMGNvbXB1dGVyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60");
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100%;
  color: white;
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 0 auto;
}

.welcome * {
  clear: both;
}

.welcome-txt {
  position: absolute;
  top: 40%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.welcome-content {
  animation-name: fadeInLoad;
  animation-duration: 3s;
  animation-timing-function: linear;
}

#child {
  position: absolute;
  top: 0;
  color: black;
  display: inline-block;
}

.info-content {
    position: relative;
    top: 83vh;
    text-align: center;
    background-image: url("img_5.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    min-height: 105%;
    padding: 20px;
    padding-right: 20px;
    clear: both;
    overflow: hidden;
}

.info-content-blocks {
    background-color: rgba(204, 204, 204, 0.8);
    padding: 30px; 
    margin: 15px;
}

.diveder {
width: 100%;
min-height: 100px;
background-color: rgba(204, 204, 204, 0.8);
padding-top: 2%;
padding-bottom: 1%;
}
<div class="welcome">
    <div class="welcome-content">
        <h1 class="welcome-txt">Classes<br>
            The Coders Club</h1>
        <img src="/resources/Copy of The Coders Club.png" class="logo">
        <p class="tagline">Learn. Code. Create.</p>
        <div class="arrow-background">
            <div class="arrow bounce"></div>
        </div>
    </div>  
</div>
 <div class="space"></div>   
<div class="info-content">
   <div class="diveder" style="color: red;"><h2>Class Starts February 10</h2>
    <p>Signup by January 20th</p></div>
    <div class="info-content-blocks" id="classes">
    
    <h3>What Will Be Taught?</h3>
    <h4><b>Beginner Class</b></h4>
    <p>In the beginner class students will be taught the basics of HTML (Hyper Text Markup Language), CSS (Cascading Style Sheets). Students will be able to make websites like the one you are one now.</p>
    <button class="standard-button"><a href="/curriculem-beginer.html">View curriculum</a></button><br><br>
    <button class="standard-button">Enroll</button>
    
    <h4>Intermediate Class Part 1 (New!)</h4>
    <p>In the Intermediate part 1 class students will learn the basics of JS. IE: variables, function, if/else statements, object, object oriented programing. Note: The HTML and CSS is not required for the intermediate class.</p>
    <button class="standard-button">Enroll</button><br><br>
    <button class="standard-button"><a href="/curriculem-beginer.html">View curriculum</a></button><br><br>
</div>

htmlcssresponsive-design

Answer №1

If I've correctly understood your query, one approach might be to try this. Start by including min-height: 100vh in the style for .welcome, and then utilize flexbox properties on the parent container .welcome instead of using absolute positioning for the text elements.

* {
  margin: 0;
}

body {
  overflow-x: hidden;
  font-size: large;
  margin: 0;
}

.welcome {
  text-align: center;
  background-image: url("https://images.unsplash.com/photo-1587831990711-23ca6441447b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8ZGVza3RvcCUyMGNvbXB1dGVyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60");
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100vh;
  color: white;
  top: 0px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome * {
  clear: both;
}

.welcome-txt {
  white-space: nowrap;
}

.welcome-content {
  animation-name: fadeInLoad;
  animation-duration: 3s;
  animation-timing-function: linear;
  padding: 40px 0;
}

#child {
  position: absolute;
  top: 0;
  color: black;
  display: inline-block;
}

.info-content {
  position: relative;
  text-align: center;
  background-image: url("img_5.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  min-height: 105%;
  padding: 20px;
  padding-right: 20px;
  clear: both;
  overflow: hidden;
}

.info-content-blocks {
  background-color: rgba(204, 204, 204, 0.8);
  padding: 30px;
  margin: 15px;
}

.diveder {
  width: 100%;
  min-height: 100px;
  background-color: rgba(204, 204, 204, 0.8);
  padding-top: 2%;
  padding-bottom: 1%;
}
<div class="welcome">
  <div class="welcome-content">
    <h1 class="welcome-txt">Classes<br> The Coders Club</h1>
    <img src="/resources/Copy of The Coders Club.png" class="logo">
    <p class="tagline">Learn. Code. Create.</p>
    <div class="arrow-background">
      <div class="arrow bounce"></div>
    </div>
  </div>
</div>
<div class="space"></div>
<div class="info-content">
  <div class="diveder" style="color: red;">
    <h2>Class Starts February 10</h2>
    <p>Signup by January 20th</p>
  </div>
  <div class="info-content-blocks" id="classes">

    <h3>What Will Be Taught?</h3>
    <h4><b>Beginner Class</b></h4>
    <p>In the beginner class students will be taught the basics of HTML (Hyper Text Markup Language), CSS (Cascading Style Sheets). Students will be able to make websites like the one you are one now.</p>
    <button class="standard-button"><a href="/curriculum-beginner.html">View curriculum</a></button><br><br>
    <button class="standard-button">Enroll</button>

    <h4>Intermediate Class Part 1 (New!)</h4>
    <p>In the Intermediate part 1 class students will learn the basics of JS. IE: variables, function, if/else statements, object, object oriented programming. Note: HTML and CSS are not required for the intermediate class.</p>
    <button class="standard-button">Enroll</button><br><br>
    <button class="standard-button"><a href="/curriculum-beginner.html">View curriculum</a></button><br><br>
  </div>

The key takeaway is to avoid using absolute positioning and lean towards utilizing the flexbox model for better handling of height calculations.

Answer №2

While browsing the web, I stumbled upon a helpful article here that discusses using JavaScript to set a minimum width for the <meta name='viewport' />. If the device's screen size is smaller than this specified minimum, it displays a more "zoomed out" version of the webpage.

In my opinion, implementing this approach could potentially resolve the issue you are facing with elements colliding on your page.

You can find the code on this GitHub repository.

Answer №3

To adjust the height of the parent element, you can simply set the min-height to fit-content. Depending on your preference, you can then choose between setting the overflow property to either scroll or hidden.

* {
    margin: 0;
    padding: 0;
  }

.parent {
    width: 100vw;
    height: 100vh;
    min-height: fit-content;
    display: flex;
    background: lightblue;
    /* overflow: hidden; */
}

.child {
    width: 50%;
    height: 100px;
    text-align: center;
    background: lightcoral;
    border: 1px solid lightgray;
}

.parent :nth-child(3) {
    height: 300px;
}

  
<div class="parent">
  <div class="child">child1</div>
  <div class="child">child2</div>
  <div class="child">child3</div>
</div>

Answer №4

i have implemented some javascript to handle this

<script>
let screenHeight = screen.height;
document.querySelector(".welcome").style.minHeight=screenHeight+"px";
</script>

you can eliminate the min-height property from .welcome as we are utilizing javascript for it even on a small vertical screen, the layout will function flawlessly below is the entire code snippet for reference

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  margin: 0;
}

body {
  overflow-x: hidden;
  font-size: large;
  margin: 0;
}

.welcome {
  text-align: center;
  background-image: url("https://images.unsplash.com/photo-1587831990711-23ca6441447b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8ZGVza3RvcCUyMGNvbXB1dGVyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60");
  background-size: cover;
  background-repeat: no-repeat;
 
  color: white;
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 0 auto;
}

.welcome * {
  clear: both;
}

.welcome-txt {
  position: absolute;
  top: 40%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.welcome-content {
  animation-name: fadeInLoad;
  animation-duration: 3s;
  animation-timing-function: linear;
}

#child {
  position: absolute;
  top: 0;
  color: black;
  display: inline-block;
}

.info-content {
    position: relative;
    top: 83vh;
    text-align: center;
    background-image: url("img_5.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    min-height: 105%;
    padding: 20px;
    padding-right: 20px;
    clear: both;
    overflow: hidden;
}

.info-content-blocks {
    background-color: rgba(204, 204, 204, 0.8);
    padding: 30px; 
    margin: 15px;
}

.diveder {
width: 100%;
min-height: 100px;
background-color: rgba(204, 204, 204, 0.8);
padding-top: 2%;
padding-bottom: 1%;
}
</style>
</head>
<body>

<div class="welcome">
    <div class="welcome-content">
        <h1 class="welcome-txt">Classes<br>
            The Coders Club</h1>
        <img src="/resources/Copy of The Coders Club.png" class="logo">
        <p class="tagline">Learn. Code. Create.</p>
        <div class="arrow-background">
            <div class="arrow bounce"></div>
        </div>
    </div>  
</div>
 <div class="space"></div>   
<div class="info-content">
   <div class="diveder" style="color: red;"><h2>Class Starts February 10</h2>
    <p>Signup by January 20th</p></div>
    <div class="info-content-blocks" id="classes">
    
    <h3>What Will Be Taught?</h3>
    <h4><b>Beginner Class</b></h4>
    <p>In the beginner class students will be taught the basics of HTML (Hyper Text Markup Language), CSS (Cascading Style Sheets). Students will be able to make websites like the one you are one now.</p>
    <button class="standard-button"><a href="/curriculem-beginer.html">View curriculum</a></button><br><br>
    <button class="standard-button">Enroll</button>
    
    <h4>Intermediate Class Part 1 (New!)</h4>
    <p>In the Intermediate part 1 class students will learn the basics of JS. IE: variables, function, if/else statements, object, object oriented programing. Note: The HTML and CSS is not required for the intermediate class.</p>
    <button class="standard-button">Enroll</button><br><br>
    <button class="standard-button"><a href="/curriculem-beginer.html">View curriculum</a></button><br><br>
    </div></div>
</body>
<script>
let screenHeight = screen.height;
document.querySelector(".welcome").style.minHeight=screenHeight+"px";
</script></html>

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

Encountering the error message "Uncaught TypeError: Unable to assign value to property 'color' of an undefined object"

I'm facing an issue where I am trying to change the color of the button text to "white" when the button is clicked. However, upon clicking the button, I encounter an error that says "Uncaught TypeError: Cannot set property 'color' of undefin ...

javascripthtmlcss

Trouble getting CSS text alignment to function properly

I attempted to apply text-align using CSS, but it doesn't seem to be working as expected. I have set the body alignment to center as well. Could this be causing an issue? Below is my CSS: #Swell { text-align: left; } Here is the HTML code: < ...

htmlcss

Issues with button padding in Firefox and Opera

Having an issue with the alignment of my buttons in HTML. In Opera, the button appears centered vertically, but in Firefox it seems like the text is slightly lower, messing up the design of my website. Below is the HTML code for the button: <input ty ...

htmlcss

How can I make JavaScript skip over a specific portion of my HTML code?

I have a script running on all pages of my website. I would like it to continue running on the specific page, but ignore a certain section. For example: <p>process with javascript</p> <p>skip, instruct javascript function to ignore</ ...

javascripthtml

Guide to centering a button on an image using bootstrap 4

I'm having trouble getting three buttons to align vertically in the center of an image using Bootstrap 4. I've tried using position:relative on the image and position:absolute on the buttons, but it's not working as expected. <div class= ...

htmlcsstwitter-bootstrap

Having trouble aligning items within columns using Bootstrap 4?

Even after researching and attempting solutions from previous questions, I still have not been able to achieve the desired outcome. What is the best way to align items inside columns? How can I adjust image size to perfectly fit the column width? <sec ...

htmlcssbootstrap-4

Transferring scope between pages without the need for an angular service definition

Looking to open a new JSP page while passing the $scope in order to utilize an array response generated in the initial page. Example from test.js file: (function() { 'use strict'; angular .module('test', []) .control ...

javascriptangularjshtml

Consider utilizing divs in a similar manner to tables

I typically use tables to align images and text, but they don't work well on mobile devices. I'd like to switch to using CSS and DIVs instead, even though I have no experience with them. My goal is to center three pictures with text above each o ...

csshtml

Clickability issue with Bootstrap collapsible navigation button

I've been working on implementing a collapsible menu on a website, but I'm running into issues with the toggle button. The button appears fine, but it's not responding when clicked. I must be overlooking something simple. Any assistance wou ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Create HTML5 <video> tags automatically using YouTube-DL

I am currently utilizing youtube-dl to download videos that are saved on YouTube. This tool enables me to download a variety of formats, thumbnails, and subtitles. Is there a method in which I can automatically generate an HTML5 <video> code snippet ...

htmlvideoffmpegyoutube-dl

Creating a smooth entrance effect in VueJS using CSS transitions is a breeze

Even though it seems simple, I am struggling to get it to work properly. My goal is to have the existing elements in my list shift to make room for a new element added, and then have the new element appear with a smooth fade transition. I have tried to im ...

cssvue.jscss-transitionscss-animationsvuejs-transition

Personalize the landing page for your IPython notebook

Is it possible to customize the landing page of an iPython notebook server (version 2.3)? By that, I mean altering the starting page (for example: http://localhost:8888/tree) to show a message like Welcome to John Doe's i[Py] Notebook or changing the ...

htmlcssipythonjupyter-notebook

"Optimizing meta tags and adjusting text size for better

I recently made some changes to my website by adding a meta tag in order to make it responsive. <meta name="viewport" content="width=1400"> After testing it on an iPad, everything looked great - the text and graphics scaled properly. However, when ...

htmlviewportmeta

Exploring the capabilities of XPath in Selenium

I am looking to create an xpath expression for the following sequence : Navigate to au.support.tomtom.com Click on the Flag icon in the footer. Select Australia as the country So far, I have attempted the following: driver.get("http://au.support.tomt ...

javascriptjqueryhtmlseleniumxpath

Scrolling horizontally with visible vertical overflow is causing the contents of an absolutely positioned div to be hidden

Note: I have thoroughly searched related questions on stackoverflow and this is not a duplicate question. In my code, I have a `div` with `overflow-x: scroll`, but I want the content in the `div` to be visible in the `y` direction. The issue I'm faci ...

javascripthtmlcssreactjs

Adjust the background color of a specific list item when hovering over another list item

My dilemma lies in my inadequate knowledge to solve this issue: I have a dropdown menu embedded within a website. (View screenshot here: [SCREENSHOT]) The desired outcome is for the background color of an icon on the main list to change when I navigate to ...

javascriptjqueryhtmlcss

Is there a way to dynamically update a game's highscore from a database without having to refresh the page?

I developed a JS snake game using HTML5 canvas. In the event that the user loses, the score is transmitted to the database through an AJAX call in my PHP script. The PHP code then compares this score to the current highscore and updates it if needed. Howev ...

javascriptphpjqueryajaxhtml

The jQuery gallery is experiencing some functionality issues

Having an issue with the gallery on my website (currently on my computer, not yet uploaded to a server). Here is the script for the gallery (loaded from the server using PHP): $(document).ready(function() { $('.gallery').hide(); $(' ...

phpjavascriptjqueryhtml

Having trouble getting the swiping feature to function on jQuery mobile

Hey there, I'm new to this so please bear with me if I'm not getting everything right with posting... I've been trying to figure out how to swipe left and right for jquery mobile by visiting a few pages. I found this page for my script - - ...

javascriptjqueryhtmlcssjquery-mobile

How can the scrollbar functionality and grey border box/outline be removed from the canvas?

I am currently developing a Django project where I have two canvas elements stacked on top of each other. The top canvas has functionality that allows me to mouseover it and reveal an image loaded into the canvas below. While this functionality works well, ...

htmlcssdjangocanvas