Issues with responsiveness in Flexbox layout

My goal is to create a responsive design where both elements scale down when the screen size changes. However, I'm having trouble with alignment and can't figure out what the issue might be.

#noteUIContainer {
  display: flex;
  position: absolute;
  bottom: 0px;
  top: 55px;
  width: 100%
}
#noteList {
  width: 175px;
  flex: 1;
  /* The below change allows you to scroll the note preview */
  overflow-y: auto;
  background-color: rgb(242, 242, 242);
  border-right: 1px rgb(30, 30, 30) solid;
  /* Make changes below this line */
}
#note {
  flex: 3;
  padding-left: 20px;
  /* Make changes below this line */
}
#header {
  background-color: black;
  color: white;
  padding: 18px;
  /* Make changes below this line */
}
.notePreview {
  height: 70px;
  border-bottom: 1px rgb(30, 30, 30) solid;
  line-height: 90%;
  border-top: 15px rgb(209, 209, 209) solid;
}
.notePreview h3 {
  font-size: 12pt;
  line-height: inherit;
  font-weight: 400;
}
.notePreviewText {
  font-size: 9pt;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-bottom: 26px;
  border-bottom: 1px rgb(30, 30, 30) solid;
}
#dateModified {
  color: rgb(128, 128, 128);
  font-size: 10pt;
  padding-top: 20px;
}
body {
  margin: auto;
  font-family: sans-serif;
}
/*
    Add any relevant styles below here.
    */

#note h3 {
  font-weight: bold;
  padding-top: 20px;
  border-bottom: 1px rgb(30, 30, 30) solid;
}
<div id="header">
  Elephant - Your Notes
</div>
<div id="noteUIContainer">
  <div id="noteList">
    <div class="notePreview">
      <h3>HTML Notes</h3>
      <p class="notePreviewText">
        In HTML, you will always want to have the html, body, and head tag.
      </p>
    </div>
    <div class="notePreview">
      <h3>CSS Notes</h3>
      <p class="notePreviewText">
        CSS offers some great features in stylizing your HTML.
      </p>
    </div>
    <div class="notePreview">
      <h3>FlexBox Notes</h3>
      <p class="notePreviewText">
        With flexbox, you can create some pretty awesome layouts!
      </p>
    </div>
    <div class="notePreview">
      <h3>JavaScript Notes</h3>
      <p class="notePreviewText">
        JavaScript can really bring a web page to life.
      </p>
    </div>
    <div class="notePreview">
      <h3>PHP Notes</h3>
      <p class="notePreviewText">
        PHP is a very flexible language and easy to learn!
      </p>
    </div>
    <div class="notePreview">
      <h3>Database Notes</h3>
      <p class="notePreviewText">
        We have to be careful when creating our database schema.
      </p>
    </div>
    <div class="notePreview">
      <h3>Session State Notes</h3>
      <p class="notePreviewText">
        HTTP does not remember anything, so we have to do it with session.
      </p>
    </div>
  </div>
  <div id="note">
    <h3>HTML Notes</h3>
    <span id="dateModified">Date Modified: July 12th 2054</span>
    <br />
    <p>
      In HTML, you will always want to have the html, body, and head tag.
    </p>
    <textarea rows="15" cols="75">
    </textarea>
  </div>
</div>

csslayoutflexbox

Answer №1

If you want your layout to wrap in one column, try setting flex-wrap on the main container and using min-width instead of width for the first column:

#noteUIContainer {
  display: flex;
  flex-wrap: wrap;
}
#noteList {
  min-width: 175px;
  flex: 1;
  overflow-y: auto;
  background-color: rgb(242, 242, 242);
  border-right: 1px rgb(30, 30, 30) solid;
  /* Make changes below this line */
}
#note {
  flex: 3;
  padding-left: 20px;
  /* Make changes below this line */
}
#header {
  background-color: black;
  color: white;
  padding: 18px;
  /* Make changes below this line */
}
.notePreview {
  height: 70px;
  border-bottom: 1px rgb(30, 30, 30) solid;
  line-height: 90%;
  border-top: 15px rgb(209, 209, 209) solid;
}
.notePreview h3 {
  font-size: 12pt;
  line-height: inherit;
  font-weight: 400;
}
.notePreviewText {
  font-size: 9pt;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-bottom: 26px;
  border-bottom: 1px rgb(30, 30, 30) solid;
}
#dateModified {
  color: rgb(128, 128, 128);
  font-size: 10pt;
  padding-top: 20px;
}
body {
  margin: auto;
  font-family: sans-serif;
}
/*
    Add any relevant styles below here.
    */

#note h3 {
  font-weight: bold;
  padding-top: 20px;
  border-bottom: 1px rgb(30, 30, 30) solid;
}
<div id="header">
  Elephant - Your Notes
</div>
<div id="noteUIContainer">
  <div id="noteList">
    <div class="notePreview">
      <h3>HTML Notes</h3>
      <p class="notePreviewText">
        In HTML, you will always want to have the html, body, and head tag.
      </p>
    </div>
    <div class="notePreview">
      <h3>CSS Notes</h3>
      <p class="notePreviewText">
        CSS offers some great features in stylizing your HTML.
      </p>
    </div>
    <div class="notePreview">
      <h3>FlexBox Notes</h3>
      <p class="notePreviewText">
        With flexbox, you can create some pretty awesome layouts!
      </p>
    </div>
    <div class="notePreview">
      <h3>JavaScript Notes</h3>
      <p class="notePreviewText">
        JavaScript can really bring a web page to life.
      </p>
    </div>
    <div class="notePreview">
      <h3>PHP Notes</h3>
      <p class="notePreviewText">
        PHP is a very flexible language and easy to learn!
      </p>
    </div>
    <div class="notePreview">
      <h3>Database Notes</h3>
      <p class="notePreviewText">
        We have to be careful when creating our database schema.
      </p>
    </div>
    <div class="notePreview">
      <h3>Session State Notes</h3>
      <p class="notePreviewText">
        HTTP does not remember anything, so we have to do it with session.
      </p>
    </div>
  </div>
  <div id="note">
    <h3>HTML Notes</h3>
    <span id="dateModified">Date Modified: July 12th 2054</span>
    <br />
    <p>
      In HTML, you will always want to have the html, body, and head tag.
    </p>
    <textarea rows="15" cols="75">
    </textarea>
  </div>
</div>

If you prefer the notelist to be the last item when wrapping in one column, consider using flex-direction and order:

#noteUIContainer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}
#noteList {
  min-width: 175px;
  flex: 1;
  overflow-y: auto;
  background-color: rgb(242, 242, 242);
  border-right: 1px rgb(30, 30, 30) solid;
  /* Make changes below this line */
}
#note {
  order: -1;
  flex: 3;
  padding-left: 20px;
  /* Make changes below this line */
}
#header {
  background-color: black;
  color: white;
  padding: 18px;
  /* Make changes below this line */
}
.notePreview {
  height: 70px;
  border-bottom: 1px rgb(30, 30, 30) solid;
  line-height: 90%;
  border-top: 15px rgb(209, 209, 209) solid;
}
.notePreview h3 {
  font-size: 12pt;
  line-height: inherit;
  font-weight: 400;
}
.notePreviewText {
  font-size: 9pt;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-bottom: 26px;
  border-bottom: 1px rgb(30, 30, 30) solid;
}
#dateModified {
  color: rgb(128, 128, 128);
  font-size: 10pt;
  padding-top: 20px;
}
body {
  margin: auto;
  font-family: sans-serif;
}
/*
    Add any relevant styles below here.
    */

#note h3 {
  font-weight: bold;
  padding-top: 20px;
  border-bottom: 1px rgb(30, 30, 30) solid;
}
<div id="header">
  Elephant - Your Notes
</div>

... (content continues)

To see the effect, run both snippets in full page view and resize your browser window to observe the transition from one column to two columns.

p.s. I removed the absolute positioning as it seemed unnecessary here, but feel free to add it back if needed

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

Tips for including an additional class in an element

I have an image tag with the "kiwi" class, and another class that makes it spin. I want to toggle this second class (called 'elem') when clicking on the play button of my music player. Here is the image tag with the class: <img src="./im ...

javascripthtmlcss

Implementing a Vue.js Scrollable Table

I am currently working on a table that is populated using the vue.js v-for method: <table> <tr><th>Name</th><th>Surname</th></tr> <tr v-for="user in users"><td>@{{user.name}}</td><td>@{ ...

javascriptjqueryhtmlcssvue.js

How can you adjust the dimensions of a child div?

Hey there! I've got a div called bat. #bat{ width:50%; height:50%; } Here's the HTML: <div id="bat">dynamic div will appear here</div> When dynamic content is placed inside the div and it's larger than #bat, th ...

jquerycss

Tips for displaying an absolute div component on top of a table with a scroll bar visible

I am trying to work with an HTML table that has a scroll feature. When a cell is clicked, a custom component opens. However, I am having trouble getting the custom component to scroll as well. Take a look at my jsfiddle here:: https://jsfiddle.net/rujz69n ...

htmlcss

AngularJS allows a function to return an array value, which can be displayed in separate blocks on

Building a program that involves working with an AngularJS array. I need to showcase the elements of the AngularJS array, returned by a function, in an organized manner. Each element should be displayed correspondingly - for example, 'first' cont ...

javascripthtmlcssangularjs

The formatting of the list is not being correctly displayed in the Ajax Jquery list

Trying to dynamically generate an unordered list from XML onto a jQuery mobile page has been a bit of a challenge for me. While I can display the items on the page, the styling never seems to work properly, only showing up as plain text with blue links. Is ...

jquerycssajax

Automatically close the multiselect dropdown when the user interacts outside of it (varied scenario)

For those interested, check out this jsfiddle link: http://jsfiddle.net/jaredwilli/vUSPu/ This specific code snippet focuses on creating a multi-select dropdown feature. When a user chooses options from the dropdown and then clicks outside of the menu are ...

javascriptjquerycssangularjs

Struggling with CSS to display images

Struggling to align my images within the designated red lines in the CSS sections I created. Can't seem to get it right. Here's my HTML: <!-- Your code goes here --> <div class="container"> <section class="left"> <h1& ...

htmlcss

Tips for integrating a unique font into your PhoneGap project

I've been attempting to incorporate a custom font into my PhoneGap application, trying out two different methods I came across online. Unfortunately, neither of them seem to be effective when using PhoneGap 3 and Xcode 5. First method involves using ...

htmlcssxcodecordova

One-click process succeeds where two clicks fail

The code below is intended to go through a two-click process as follows: First click on .imagenes decreases opacity and makes .logo visible. Second click on .imagenes returns the opacity to 1 and hides .logo again. However, during this cycle of two ...

javascripthtmlcss

Expanding content to cover the entire width using CSS Bootstrap 5

As a newcomer to Bootstrap, I am working on customizing an existing Bootstrap example. My objective is to expand the width of the div tag (with id "inner") to fill the entire screen. I have experimented with various approaches, such as resetting the margi ...

htmlcsstwitter-bootstrapbootstrap-5

What's the best way to correct a word that is positioned at the bottom of a banner image?

https://i.sstatic.net/3gSoi.pngI am a newcomer to all of this. I have a banner image and I want to position a word at the bottom center of the banner. I've tried using padding, position, and text-align, but it's not responsive - when I widen the ...

cssbootstrap-5

In PHP, the use of ul, li, class, and

I have searched high and low, but unfortunately the answers provided by others did not alleviate my problem. Instead, they caused even more confusion. I am currently working on a small project for my website and attempting to convert it to PHP in order to ...

phphtmlcsshtml-lists

Accelerate website loading

After testing the speed of my site's loading, I discovered that the reason for its slow speed is... Some proxy caching servers do not cache resources with a "?" in the URL. To address this issue, it is recommended to remove the query string and enc ...

htmlcssweb-development-server

What is the process for validating the CSS background-image URL using Javascript?

The concept here is to verify the URL of the CSS element's id (.boot). If the URL matches, which it does, then it should display "hello world." However, despite everything seeming correct, the expected behavior is not occurring, and the reason behind ...

javascriptcssif-statementbackground-image

Trying to reduce the cursor box area within an A link containing a div box

My communication skills are lacking, so I have included an image to better illustrate my issue. Here is the problem .body { text-align: center; display: flex; flex-direction: column; align-items: center; } .flex-container { display: flex; ...

htmlcss

Why does the width/height of an input and a select appear differently on every browser I've tested?

I am puzzled by the fact that, despite resetting their properties, the width and height of both the input and select boxes are different (you can see for yourself on this fiddle): HTML <div class="myDiv"> <input class="myInput&q ...

htmlcss

perfecting the styling of a tab management system

For reference, please check out the following link: http://jsfiddle.net/XEbKy/3/ In my design, I have organized two layers of tabs. The top layer consists of two tabs while the bottom layer has three tabs. My goal is to have all these tabs neatly enclosed ...

css

The Tailwind preset is generating CSS code, but the webpage is not displaying the intended styles

Can anyone explain why the preset is generating CSS in the output file, but the styles are not displaying in the browser? When I manually write CSS in newstyle.css, it gets outputted to output.css and renders correctly in the browser. I attempted adding t ...

javascripthtmlcsstailwind-csspreset

Stylish Zigzag Border with a Patterned Background

Recently, I've been experimenting with creating a header that features a unique zigzag border. Traditionally, this effect is achieved using images to achieve the desired look. (1) I am curious if there is a way to implement a cross-browser compatible ...

htmlcsscss-shapeszigzag