Question 43007 in Html Question posted in
Some basic documentation can be found here.

I want to make these table columns stack when on mobile view – Html

I have 5 columns, I have them as table as it was the easiest way for me to code it.

I want to make them stack on mobile view. How do I go about doing this?

The format I have is:

#container {
  display: table;
  width: 100%;
  table-layout: fixed;
  padding: 10px;
}

.content {
  display: table-cell;
  text-align: center;
  border: 5px solid black;
  word-wrap: break-word;
}

.content img {
  width: 100%;
  height: 100%;
  display: table-header-group;
}
<div id="container">
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
</div>

Any help would be appreciated. I’ve tried setting the content class to width of 100% using the media query. I want them to stack if that is possible. I’m not sure where I am going wrong.

I tried using flexbox before the table method but ran into issues regarding the height when the screen size changed and this was easier for me to do, I just don’t know how to make it mobile responsive. Because it is not an actual table I am getting a little confused.

Tags:

2

Answers


  1. 0

    The absolute easiest way to do this, if you like your setup for desktop currently, is to wrap all your CSS above in a @media query for larger screens. Like @media (min-width: 768px) { ... all your CSS } – this way, nothing on mobile will be affected by those styles. And by default, div are block-level elements and will be 100% and stack.

    /* COMMON STYLES THAT WILL AFFECT ALL SCREENS - just for presentation and can be removed */

.content {
  border: 5px solid black;
  background: blue;
  height: 20px;
  margin-bottom: 10px;
}


/* now this will only apply to larger screens */

@media (min-width: 768px) {
  #container {
    display: table;
    width: 100%;
    table-layout: fixed;
    padding: 10px;
  }
  .content {
    display: table-cell;
    text-align: center;
    word-wrap: break-word;
    /* REMOVE THIS from your real code, just a reset from the global above */
    margin-bottom: 0;
    background: transparent;
    height: auto;
  }
  .content img {
    width: 100%;
    height: 100%;
    display: table-header-group;
  }
}
    <div id="container">
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
</div>
    Login or Signup to reply.
  2. 0

    I made using grid, but I think it’s possible to use flex too:

    #container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    width: 100%;
    padding: 0px;
    gap: 10px;
    height: 50vh;
}

.content {
    border: 5px solid black;
}

@media only screen and (max-width: 500px) {
    #container {
        grid-template-columns: 1fr;
    } 
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search