aswiseman Posted August 29, 2017 Share Posted August 29, 2017 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? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 30, 2017 Share Posted August 30, 2017 w3-cell-row has additional w3-cell-row:before and w3-cell-row:after which applies content:""; with display: table, this it seems, is causing the difference. 1 Link to comment Share on other sites More sharing options...
aswiseman Posted August 30, 2017 Author Share Posted August 30, 2017 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! Link to comment Share on other sites More sharing options...
dsonesuk Posted August 30, 2017 Share Posted August 30, 2017 Its, definitely not a bug, and I wouldn't call it a feature? its just they in their wisdom thought it was necessary. I would write it in your own custom css file, place it below w3css link, and maybe consider adding your own class, just in case you needed original after all, then it just a matter of removing or adding your custom class. Link to comment Share on other sites More sharing options...
Ingolme Posted September 1, 2017 Share Posted September 1, 2017 Adding the table display to the :before and :after pseudo-elements is a way to allow the container to wrap around floated elements and prevent vertical margins from collapsing. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now