Half of the sections will not stack on mobile devices

UPDATE I found and fixed a typo in the code, making adjustments to both the JSFiddle and this post to show the correction. The Headline is supposed to take up 100% height but currently isn't. Still seeking feedback on this issue.

Everything looks perfect on desktop, but I'm struggling to understand why the layout doesn't stack properly with 100% height on mobile devices. Additionally, the Headline loses its color background. Check out the JSFiddle for more details.

UPDATED HTML

    <div class="about-header">
      <h2>Headline</h2>
    </div>

    <div class="about-section">

      <div class="about-text">
        <p>The first chunk of text to let users know they gotta read a little bit. If they want. It's not mandatory or anything.</p>

        <p>The second group of text, a nice chunk of descriptive text that explains some more about this website. It really hopes you can help me troubleshoot this problem that I am facing.</p>

        <p>Another grouping of text goes right in this little section here that should go on for a while.</p>
     </div><!-- END ABOUT TEXT -->

    </div> <!-- END ABOUT SECTION-->
 </section>
</div><!-- END CONTAINER -->

CSS

*{
  margin:0;
  padding:0;
}

html{
  font-size:62.5%;
}

html,
body{
  height:100%;
  background-color:#FFF;
  color:#000;
  font-family:"Arial", "Helvetica", sans-serif;
  font-size:12px;
  font-size:1.2rem;
}

.container{
  width:100%;
  height:100%;
 }

.container *{
  box-sizing:border-box;
}

.row{
  min-width:85%;
  margin:0 auto;
}

.row:before,
.row:after{
  content:"";
  display:table;
  clear:both;
}

#about{
  height:100%;
}

.about-header{
  width:100%;
  height:100%;
  background-color:lightblue;
  position:relative;
}

.about-header h2{
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  text-transform:uppercase;
}

.about-section p{
  font-size:1rem;
  padding-left:1.2rem;
  padding-right:3rem;
  padding-bottom:1.5rem;
}

.about-text{
  display:table-cell;
  vertical-align:middle;
}

.about-section{
 width:100%;
 height:100%;
 position:relative;

}

/**** MEDIA QUERY****/
@media all and (min-width:500px){

.about-section{
  width:50%;
  height:100%;
  background-color:#FFF;
  left:50%;
  display:table;
  position:absolute;
}

.about-header{
  width:50%;
  height:100%;
  background-color:lightblue;
  right:50%;
  display:table;
  position:absolute;
}

}

Answer №1

There is a small mistake in your code.

.about-head{
    width:100%;
    height:100%;
    background-color:lightblue;
    position:relative;
}

The correct syntax should be:

.about-header {
    width:100%;
    height:100%;
    background-color:lightblue;
    position:relative;
}

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

Avoiding the occurrence of extra space due to the p tag for paragraphs

I'm currently using the following <p> tag but it's creating a gap between the tick mark and the text that follows after the closing </p> <p class="tick">✓</p> Post messages to friends all over the world. CSS: .tick { ...

Move the container all the way to the left

On my page, I have a grey section with the heading 'Start Analysis' that needs to be shifted to the left along with all its contents. How can this be achieved? The HTML code for the section is as follows: <!DOCTYPE html> <html lang="en ...

PHP - Utilizing a while loop to dynamically wrap content in a

I am facing an issue with wrapping the date and all events in one day within a div called "obal_date". The current implementation is not working as expected. The number of events can vary, but I need to group them by date. Can someone help me achieve this? ...

Adjust font size using jQuery to its maximum and minimum limits

My jQuery script enables me to adjust the font-size and line-height of my website's CSS. However, I want to restrict the increase size to three clicks and allow the decrease size only after the increase size link has been clicked - ensuring that the d ...

Is it possible to rearrange the order of rows and columns based on the viewport size?

Is it possible to achieve two different layouts with Bootstrap 5 based on the viewport size? I want to avoid using display:none and JS/Jquery tricks if possible. I attempted to accomplish this by utilizing Bootstrap 5 tools, but encountered issues on lar ...

Do overlay elements have to be positioned at the bottom of the HTML body every time?

As I delve into the world of JavaScript frameworks, one common trend I've noticed is that elements like dialogs, tooltips, and alerts usually appear at the end of the body tag. With my own implementation of these UI elements, I am determined to make ...

Retrieve HTML elements from a string using PHP

Possible Matches: crawling a html page using php? Best methods to parse HTML I am trying to extract DOM elements from a string variable in my PHP script that contains an HTML page. How can I achieve this? For instance, if the string is something ...

Using JavaScript to implement CSS3 with multiple background images

Is there a way to programmatically define multiple background images in CSS3 using JavaScript? While the common approach would be: var element = document.createElement( 'div' ); element.style.backgroundImage = "url('a.png') 0 100%, ur ...

Experiencing challenges during the creation of a NUXT build

Trying to build a Nuxt SSR app, but encountering an error related to the css-loader during the build command execution. The issue seems to be with Invalid options object. ERROR in ./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue (./no ...

Could Safari 7.1 be causing issues with outline-color and overflow?

After upgrading to Safari 7.1, I noticed that a couple of my css lines have stopped working. These lines were functioning fine with Safari 7.0.x and are still working in browsers like Chrome. overflow: hidden; and outline-color: [color]; Specifically, ...

Container Based Absolute Positioning in Bootstrap

I am struggling with aligning text properly within a container. I want it to look like the image, but the text keeps ending up at the far right side of the page. https://i.sstatic.net/aSsrC.png Could you assist me in achieving this? Thank you! HTML: &l ...

What is the best way to showcase data from input fields within a bootstrap modal dialog?

After the user has entered their details and clicks submit, I would like to present the information in a Bootstrap modal with a confirmation button below. This serves as a preview of the data before it is saved to the database. Here's what I have so ...

Troubleshooting z-index problem with background image and parent tag of image

I seem to be facing an issue with the z-index property. Here is the code snippet in question: <div id="sidebarCont"> <div id="avatarCont" class="mask"> <img id="" class="" src="img.jpg" alt=""/> </div> And here is the correspo ...

Switch effortlessly between one animation and another with Angular.js

I have two animations named "prev" and "next". Upon clicking the prev button, the "prev" animation should play. Similarly, when you click on the "next" button, the "next" animation should be triggered. I am using ng-class to achieve this behavior. How can ...

Configuring various options on numerous dropdowns using AngularJS

I am looking for a solution to customize dropdowns created through ng-repeat in AngularJS. The number of dropdowns displayed is determined by the data fetched from the database. I want to be able to set an initial option value for each dropdown based on th ...

Is add1 missing from the DOM? Learn how to include it

Having an issue with Java-Script and an HTML form. The scenario is that there's a main form with an "Add" button, which when clicked should display a second form. Next to the second form is another button labeled "Add1," which ideally should trigger ...

What is causing the button to prevent file selection?

What's causing the button to not allow file selection when clicked on? Interestingly, placing a span or div in the label enables file selection upon clicking them, but not with the button. <html> <body> <label> <input t ...

The border-color feature in Bootstrap 5 does not function properly when applying responsive border-start/end/top/bottom styles

My Objective: For mobile: I want to have borders only at the top and bottom. For desktop: I want borders only at the start and end, in a border-dark color. My Attempts: I have added custom responsive borders to my main.scss file // responsive borders @ ...

The issue with importing fonts in CSS causing an error is encountered when utilizing an exported Angular library

I have a components library for Angular that relies on line-awesome icons. To include the necessary fonts and styles, I am using a CDN in the main SCSS file as shown below: @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400; ...

What is the process for assigning default values to dynamically generated form elements?

I have been working on building a single-page application (SPA) using JavaScript and jQuery. During the process, I encountered an issue with a dynamic form. The user is able to add specific fields as needed, but if they don't generate and utilize all ...