CODEWITHSUNDEEP
htmlcss
Alex
Alex

Reputation: 65

Make table display stack on mobile

I have the following code that works fine on PC but as soon as the screen gets smaller, such as on phones, it starts to look really weird and I would like post-image and post-content to stack on smaller devices:

HTML:

<div class="post-container">
    <div class="post-entry">
        <div class="post-image"></div>
        <div class="post-content">
            <div class="post-title"><a href="#">Title</a></div>
            <div class="post-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer imperdiet ex in dolor posuere, sed congue sem bibendum. Nullam porta, diam at molestie interdum, ex diam pulvinar metus, in aliquam lacus nulla a orci.</div>
            <div class="post-date">10 November 2019</div>
        </div>
    </div>
    <div class="post-entry">
        <div class="post-image"></div>
        <div class="post-content">
            <div class="post-title"><a href="#">Title</a></div>
            <div class="post-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer imperdiet ex in dolor posuere, sed congue sem bibendum. Nullam porta, diam at molestie interdum, ex diam pulvinar metus, in aliquam lacus nulla a orci.</div>
            <div class="post-date">9 November 2019</div>
        </div>
    </div>
</div>

CSS:

.post-container { width: 100%; }

.post-entry {
    width: 100%;
    margin-bottom: 15px;
    background: #1d1d1d;
    display: table;
}

.post-image {
    width: 190px;
    height: 110px;
    background: #fff;
    display: table-cell;
    margin-right: 10px;
}
.post-content {
    display: table-cell;
    padding: 0.5rem 1rem;
}

.post-title {}

.post-description {}

.post-date { opacity: 0.5; }

.post-title a { font-size: 1.2rem; }

.post-title a:hover { color: #fff; }

Here is a link to JSFiddle. Does someone know how this can be achieved?

Upvotes: 0

Views: 228

Answers (1)

Alopwer
Alopwer

Reputation: 630

here is the solution:

.post-entry {
    //Anything that goes here
display: flex;
}

@media (max-width: 768px) {
  .post-entry {
    flex-direction: column
  }.post-image {
    width: 100%;
   }
}

I advice you to use flexboxes instead of dispaly: table. To make this code work - delete the display: table and table-cell properties.

Upvotes: 2

Related Questions