W3.CSS - Responsive Layout - w3-cell-row

Question

Just started using W3.css, and yet havent found a solution for a tiny problem, that seems to appear only on mobile version.

So made a responsive container - row, with 4 different width cells in it. When I have my phone on portrait mode it is loading the site as it supposed to. But when i turn it to landscape - only this container with the 4 cells - jumps back into "large/medium" screen version - cells lined up next to each other and not verticaly... (attached image to make it clear).

Portrait mode - works alright

Landscape mode - only this container uses different width

Back to portrait from landscape - same problem

Any advice on this?

<div class="w3-cell-row" style="width: 100%; background: #2D9595; padding-left: 3%; padding-right: 3%;">
  
  <div class="w3-container w3-cell w3-mobile" style="padding: 3%">
  </div>
  
  <div class="w3-container w3-cell w3-mobile" style="padding: 3%">
  </div>
  
  <div class="w3-container w3-cell w3-mobile" style="padding: 3%">
  </div>
  
  <div class="w3-container w3-cell w3-mobile" style="padding: 3%">
  </div>
</div>

thank you

Are you saying that loading first time in portrait is fine, rotating it switches the layout in landscape, but then rotating it back to portrait messes up the layout? — Bjorn.B, Sep 16 '20 at 04:44
I guess your problem is on an upper container, not this level. More code would help us. — L. Alejandro M., Sep 18 '20 at 02:15

score 0 · Answer 1 · answered Sep 18 '20 at 14:48

After testing this, my guess is going to be that CSS display: table; may be recalculating and adjusting widths on rotation. To keep things consistent, try applying widths in percentages to each .w3-cell-row, which should only affect it on 600px and below.

.w3-cell-row {
    width: 100%;
    padding: 0 3%;
    background: #2D9595;
}
.w3-cell-row .w3-container {
    padding: 3%;
    /* table-layout: fixed; */
}
.w3-cell-row .w3-container:nth-child(1) {
    background-color: pink;
    width: 30%;
}
.w3-cell-row .w3-container:nth-child(2) {
    background-color: green;
    width: 40%;
}
.w3-cell-row .w3-container:nth-child(3) {
    background-color: blue;
    width: 15%;
}
.w3-cell-row .w3-container:nth-child(4) {
    background-color: orange;
    width: 15%;
}

<div class="w3-cell-row">

    <div class="w3-container w3-cell w3-mobile">
        adipisicing elit. Rerum
    </div>

    <div class="w3-container w3-cell w3-mobile">
        consectetur adipisicing
    </div>

    <div class="w3-container w3-cell w3-mobile">
        Lorem ipsum dolor sit amet
    </div>

    <div class="w3-container w3-cell w3-mobile">
        Eos, aut?
    </div>
</div>

Are you test the original code without modification?. What is wrong with it? — L. Alejandro M., Sep 19 '20 at 02:07
yes i tested it, it was working fine, u can check the rest of the code here: www.tfportal.hu/asd/index.html — barnusb, Sep 19 '20 at 03:48
Bjorn B. thanks i wil check it out, hopefully will work for me too! — barnusb, Sep 19 '20 at 03:51

score 0 · Accepted Answer · answered Sep 21 '20 at 00:05

According to documentation of w3.css:

Responsive Layout

The w3-mobile class adds mobile first responsiveness to any HTML element.

Used together with w3-cell it will display the layout columns vertically on small screens/mobile phones and horizontally on medium/large screens.

So this works as expected.

On the other hand, "the different width" is on both modes (portrait and landscape) and the problem seems fixed removing the paddings (3% , left and right) of the div with class "w3-cell-row".

W3.CSS - Responsive Layout - w3-cell-row

2 Answers2