aswiseman

I have found a workaround - putting a max-width on the cell's div seems to get the shrinking of the image working in IE11... style="width:41.66667%;background-color: #efe;max-width: 240px;"> https://jsbin.com/xaxiberesi/1/edit?html,output This sort of tracks the image shrinking with the w3-row-padding dummy image. But once you reach single-column / mobile mode, the image is then too small. I can fix this with some CSS. I also tried a max-width using vh units. Anyone got any better ways? Is this a bug or a feature? 🙂

I've been using w3-cell-row and w3-cell to layout a web page and have noticed that when I put an image in a cell and use the w3-image class to make it responsive, the image size appears fixed in IE11. (However, it works fine Firefox, Chrome and Edge.) Whereas if I switch to w3-row with w3-col to do the layout, IE11 starts working. Is there anything I can do to get responsive images working in w3-cell for IE11? Demo here... https://jsbin.com/cekegohodu/edit?html,output Code snippet... <div class="w3-container"> <div class="w3-row-padding"> <div class="w3-col m5" style="background-color: #fee"> <img class="w3-image" src="https://www.dummyimage.co.uk/320x180/cbcbcb/959595/Dummy Image/32" width="320" height="180" alt=""> </div> <div class="w3-col m7" style="background-color: #eef"> <p>Using w3-row-padding, left-hand column is m5 and right-hand column is m7. The image gets smaller as the window width collapses.</p> </div> </div> <div class="w3-cell-row"> <div class="w3-container w3-cell w3-mobile" style="width:41.66667%;background-color: #efe"> <img class="w3-image" src="https://www.dummyimage.co.uk/320x180/cbcbcb/959595/Dummy Image/32" width="320" height="180" alt=""> </div> <div class="w3-container w3-cell w3-mobile" style="width:59.33333%;background-color: #ffe"> <p>But using w3-cell-row with w3-cell and 41.66667% and 59.33333% cell widths doesn't squeeze the image size as the browser window narrows on IE11?</p> </div> </div> </div>

I have been playing around with layouts and have used w3-cell-row / w3-cell. I have two columns, with text on the left and an image on the right. Sometimes, though, I want the image on the left and the text on the right, BUT for single-column display on mobiles, I want the text to still come first, above the image. So I tried this... the text comes first in the code, but I apply w3-right to its containing div and w3-left to the div of the image, so that on wider screens the text is on the right and the image is on the left... <div class="w3-cell-row" > <div class="w3-container w3-cell w3-mobile w3-purple w3-right" style="width: 60%"> <p>Text</p> </div> <div class="w3-container w3-cell w3-mobile w3-green w3-left w3-center w3-grey w3-cell-middle" style="width: 40%;"> <img class="w3-image" src="https://dummyimage.com/320x180/000/fff" width="320" height="180"> </div> </div> This works after a fashion, but I lose the cells being the same height. Is there an official / neater / cleverer way of achieving what I want?

Thanks @dsonesuk for that. Interestingly, that works perfectly in the codepen, but doesn't work in my full page full of messy code. (But that's my problem to look at!) I also found another solution using box-shadow, with fewer lines of CSS... .w3-cell-row { margin: auto; width: 78%; } .w3-cell { background-color: #fff; box-shadow: 0px 0px 0px 5px #00c; } .w3-cell-row:before, .w3-cell-row:after { content: none; } https://jsbin.com/kemizek/edit?html,output But because it's a shadow the left-hand cell is slightly different in size from the right-hand cell, and that bothered me once I'd spotted it. (The % width also means it doesn't track the size of the table either.)

If I add negative margins to the .w3-cell and .w3-cell-row, this seems to fix the doubling of borders for when the table is collapsed into a single column and when it is displayed with multiple columns... https://jsbin.com/modimuj/edit?html,output It's a bit of a bodge job, so if anyone has a neat / clean / better / more compatible / less sucky way of doing this, I'd still be interested to know :-)

I've tried to put together a grid with a same width border all round. I thought I'd cracked it with border-collapse, but it still doubles up the border between rows. There's a code snippet here of a horrible nested table and underneath my W3CSS version of that table that's nearly the same, save for the doubled up row. https://jsbin.com/dugozav/edit?html,output It would be great if W3CSS had some easy way of dealing with gutters and borders (or even some documentation on w3schools). But any tips on reproducing the table layout in W3CSS without the borders doubling up between rows would be gratefully received :-)

Ah! Thank you for this! Is this a feature or a bug, would you say? :-) I've now added this into the <style> section of the <head> of my HTML document to override the behaviour and it seems to work... .w3-cell-row:before, .w3-cell-row:after { content: none; } Thanks again for the help - this has been driving me crazy!

I've been using w3-layout in w3css v3 to get a table-like layout with equal-height rows. I want my design to include spacing or gutters between the rows and columns. This isn't shown in the example pages on W3Schools, but I've managed to get them working... Here's a cut-down example on jsbin showing w3css v3 with w3-layout-container / w3-layout-col, a centred table with 95% width and border-spacing specified (with apologies for the pink!): https://jsbin.com/vujecuy/2/edit?html,output When I try to implement this in w3css v4, I come unstuck. This time the 95% width specified gives a much slimmer width on screen, and if you use a narrow-screen to force single-column mode, it's clear the left and right margins are different sizes. Also when you jump from multi-column to single-column mode, the space between rows gets bigger, whereas with v3 it stays the same size. Here's my v4 example: https://jsbin.com/venevim/2/edit?html,output Have I missed something in my conversion from v3 to v4 or have I got something fundamentally wrong? Or is there a bug in v4? Anyone else using Layouts with gutters?