W3.CSS - 响应式布局 - 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

Answer 1

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>

Answer 2

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".