Jump to content
aswiseman

W3.CSS Layout - gutters work in v3, but broken in v4?

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

  • Thanks 1

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×