Html - How to Stack DIVs on top of each based on screen width

reddy_boi34
July 30, 2023
264 views
0 votes
2 Answers

I have these two div classes next to each other. The one on the left is text and the one on the right is a grid. Now, I implemented code using the media queries between 1050px and 1280px to change the rows and columns of the grid when the screen width is lowered. However, below 1049px, there isn’t enough space anymore, and so I want the divs to be stacked on top of each other, the text on the top and the div on the bottom, and I want to make both of the divs be at the center of the screen, no matter what the screen width is below 1049px.

.item {
        text-align: center;
        background-color: #fff;
        padding: 15px;
        width: 160px;
        height: 100px;
        border-radius: 5px;
        cursor: pointer;
        box-shadow: 0 1px 1px black;
      }

      .item p {
        margin-top: 20px;
      }

      .index-third-grid {
        display: grid;
        grid-template-rows: 100px;
        grid-template-columns: repeat(3, 100px);
        row-gap: 2em;
        column-gap: 5em;
        color: #704a1b;
        font-size: 20px;
        margin: 100px;
        margin-right: 170px;
        margin-top: -10px;
        float: right;
      }

      .index-third-text {
        margin-top: 70px;
      }

      .index-third-text p {
        font-size: 25px;
        color: #704a1b;
        margin-left: 100px;
        position: absolute;
      }

      .index-third-text h4 {
        font-size: 35px;
        color: #614124;
        margin-left: 100px;
        margin-top: 40px;
        position: absolute;
      }

      .index-third-text h5 {
        font-size: 15px;
        color: #614124;
        margin-left: 130px;
        margin-top: 120px;
        position: absolute;
      }

      .index-third-text hr {
        font-size: 35px;
        border: 0.5px solid #614124;
        width: 0px;
        height: 120px;
        margin-left: 100px;
        margin-top: 110px;
        position: absolute;
      }

      @media screen and (min-width: 1050px) and (max-width: 1280px) {
        .index-third-grid {
          grid-template-rows: 100px;
          grid-template-columns: repeat(2, 100px);
          margin-top: -100px;
        }

        .index-third-text {
          margin-top: 150px;
        }

        body {
          overflow-x: hidden;
        }
      }

      @media screen and (max-width: 1049px) {
        /* Part I'm Confused About */
      }

<div class="index-third">
  <div class="index-third-text">
    <p id="heading">How We Can Help You</p>
    <h4 id="subheading">Our Services</h4>
    <hr>
    <h5 id="body">The services we offer are to ensure seamless consultation <br> processes. These features intend to provide necessary <br> and effective remote medical support to those in need. <br> <br> Click on the buttons to learn more!</h5>
  </div>
  <div class="index-third-grid">
    <div class="item item-1">
      <i class="fa-solid fa-magnifying-glass"></i>
      <p>Search</p>
    </div>
    <div class="item item-2">
      <i class="fa-solid fa-check-to-slot"></i>
      <p>Consult</p>
    </div>
    <div class="item item-3">
      <i class="fa-solid fa-comment"></i>
      <p>Chat</p>
    </div>
    <div class="item item-4">
      <i class="fa-solid fa-list"></i>
      <p>Diagnose</p>
    </div>
    <div class="item item-5">
      <i class="fa-solid fa-bars-progress"></i>
      <p>Manage</p>
    </div>
    <div class="item item-6">
      <i class="fa-solid fa-star"></i>
      <p>Review</p>
    </div>
  </div>
</div>

Tags: css html

Answers

This isn’t perfect, but it should get you started. The issue is that you’re using position: absolute; on everything in the left column. By doing that you take it out of the flow and it has 0 height, so thing things overlap.

Instead put the whole section in an outer grid and as the correct size, change it from one column to 2.

UPDATED: This is a more bulletproof set of styles and it will handle all of the scaling. Plus I fixed a few of the markup issues around headings.

Take a look into semantic markup. It will help you understand how to write better and more accessible HTML.

Also, look into grid auto-fit and auto-fill. That would give you a better and even more fluid version of the grid you have on the right.

*,
*::before,
*::after {
  box-sizing: border-box;
}
.index-third {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin: 0 auto;
  max-width: 1200px;
  padding: 70px 20px;
  width: 100%;
}

.item {
  align-items: center;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 1px black;
  cursor: pointer;
  display: flex;
  justify-content: center;
  height: 100%;
  padding: 15px;
  width: 100%;
}

.item p {
  margin-top: 20px;
}

.index-third-grid {
  display: grid;
  grid-auto-rows: 100px;
  grid-template-columns: repeat(2, minmax(100px, 1fr));
  gap: 1rem;
  color: #704a1b;
  font-size: 20px;
}

.index-third-text h1 {
  font-size: 25px;
  color: #704a1b;
}

.index-third-text h2 {
  font-size: 35px;
  color: #614124;
}

.index-third-text p {
  border-left: 1px solid #614124;
  font-size: 15px;
  color: #614124;
  padding-left: 25px;
}

@media screen and (min-width: 530px) and (max-width: 1050px) {
  .index-third-grid {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
  }
}

@media screen and (min-width: 1280px) {
  .index-third-grid {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
  }
}

@media screen and (min-width: 1049px) {
  .index-third {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

<div class="index-third">
  <div class="index-third-text">
    <h1 id="heading">How We Can Help You</h1>
    <h2 id="subheading">Our Services</h2>
    <p id="body">The services we offer are to ensure seamless consultation <br> processes. These features intend to provide necessary <br> and effective remote medical support to those in need. <br> <br> Click on the buttons to learn more!</p>
  </div>
  <div class="index-third-grid">
    <div class="item item-1">
      <i class="fa-solid fa-magnifying-glass"></i>
      <p>Search</p>
    </div>
    <div class="item item-2">
      <i class="fa-solid fa-check-to-slot"></i>
      <p>Consult</p>
    </div>
    <div class="item item-3">
      <i class="fa-solid fa-comment"></i>
      <p>Chat</p>
    </div>
    <div class="item item-4">
      <i class="fa-solid fa-list"></i>
      <p>Diagnose</p>
    </div>
    <div class="item item-5">
      <i class="fa-solid fa-bars-progress"></i>
      <p>Manage</p>
    </div>
    <div class="item item-6">
      <i class="fa-solid fa-star"></i>
      <p>Review</p>
    </div>
  </div>
</div>

My approach to the problem presented is below, with explanatory comments in the code to try and explain how that code works:

/* setting CSS custom properties on the root element, in most contexts
   this will be the <html> element: */
:root {
  /* used to indicate the number of columns within a given element: */
  --columnCount: 2;
  /* used to assign the inline-size of an element, this is - in ltr
     and rtl languages - equivalent to "width," but will also apply
     to the inline-axis of other languages, such as top-to-bottom: */
  --inlineSize: 80%;
}

/* using a media query along with the range syntax, to update the
   --columnCount property for situations where the viewport is
   less than 1050px: */
@media screen and (width < 1050px) {
   :root {
    --columnCount: 1;
  }
}

/* simple reset to remove all default margin and padding,
   setting the box-sizing algorithm to 'border-box' in
   order that the assigned element-size includes both
   the border-widths and the padding: */
*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* rather than setting margins on the child elements of
   the <body> I'm using padding-block-start, and padding
   inline; these set the padding on the leading edge of
   the block-axis (the top, for ltr and rtl top-to-bottom
   languages), and on both edges of the horizontal axis
   for those languages: */
body {
  padding-block-start: 70px;
  padding-inline: 2rem;
}

.index-third {
  display: grid;
  gap: 2rem;
  /* using the repeat() function to set the desired
     number of columns, each of the (approximate)
     same size: */
  grid-template-columns: repeat(var(--columnCount), 1fr);
  inline-size: var(--inlineSize);
  margin-inline: auto;
}

#heading,
#subheading {
  /* your demo had the text very close together, I don't
     know if that was a feature or a bug, so I replicated
     it (though I do feel it's a little visually crowded),
     if it was a bug, however, just remove this declaration: */
  line-height: 1;
}

/* using rems to define the font-sizes, to allow for a user's
   changes of zoom levels, or base font-size, to cause all
   fonts to proportionally scale with that choice: */
#heading {
  font-size: 1.5rem;
}

#subheading {
  font-size: 3rem;
  /* using padding to push the following sibling element
     further away from the content of this element: */
  padding-block-end: 1em;
}

#body {
  /* using a border instead of an unnecessary <hr>, which is
     semantically used to separate content, whereas this
     (seems) purely visual, so a border seemed more appropriate,
     although a background-image would be equally valid in
     context: */
  border-inline-start: 3px solid #000;
  padding-block: 1rem;
  padding-inline-start: 3rem;
}

#body p:not(:first-child) {
  margin-block-start: 0.5em;
}

.index-third-grid {
  display: grid;
  gap: 1rem;
  /* setting each row of the grid to 6.25rem, which sizes the elements
     in each row to that size and - again - using rems to size the
     rows in order that when/if the user zooms, or adjusts font-size,
     the "buttons" will adjust in size to contain the text (though this
     is somewhat undermined by the strict requirement of three columns: */
  grid-auto-rows: 6.25rem;
  grid-template-columns: repeat(3, minmax(10rem, 1fr));
}

/* the biggest change I've made here, really, is the removal of explict
   widths, offsets, margins...all of which can be handled better by
   the grid-layout system; and again I'm using grid layout here to
   center the content.
   I've also chosen to use display: grid, in order to use
   place-items to center the elements (though you may prefer to use
   place-content: center): */
.item {
  border-radius: 0.5rem;
  box-shadow: 0 1px 1px #000;
  display: grid;
  font-size: 1.5rem;
  padding: 0.5em;
  place-items: center;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<div class="index-third">
  <div class="index-third-text">
    <p id="heading">How We Can Help You</p>
    <h4 id="subheading">Our Services</h4>
    <div id="body">
      <!-- here I've removed the <hr> and all the <br> elements, replaced the <h5> with a <div>
           keeping the same id, and enforced content breaks by wrapping each separated part of the
           text in individual paragraphs: -->
      <p>The services we offer are to ensure seamless consultation processes.</p>
      <p>These features intend to provide necessary and effective remote medical support to those in need.</p>
      <p>Click on the buttons to learn more!</p>
    </div>
  </div>
  <div class="index-third-grid">
    <div class="item item-1">
      <i class="fa-solid fa-magnifying-glass"></i>
      <p>Search</p>
    </div>
    <div class="item item-2">
      <i class="fa-solid fa-check-to-slot"></i>
      <p>Consult</p>
    </div>
    <div class="item item-3">
      <i class="fa-solid fa-comment"></i>
      <p>Chat</p>
    </div>
    <div class="item item-4">
      <i class="fa-solid fa-list"></i>
      <p>Diagnose</p>
    </div>
    <div class="item item-5">
      <i class="fa-solid fa-bars-progress"></i>
      <p>Manage</p>
    </div>
    <div class="item item-6">
      <i class="fa-solid fa-star"></i>
      <p>Review</p>
    </div>
  </div>
</div>

JS Fiddle demo.

References:

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to Stack DIVs on top of each based on screen width

Answers