Responsive columns in wp without plugin
![responsive columns in wp without plugin responsive columns in wp without plugin](https://i.pinimg.com/originals/77/30/5c/77305c04618440db81406811427332dd.jpg)
Nothing fancy, just adding some space so they look better. Those lines give the columns an overall styling. That looks rather odd, so I bring back the left margin to 0 for the first column (the first child wp-block-column of wp-block-columns). Since the previous rule added a 2% left margin to all columns, meaning the left column also had has a 2% left margin.
![responsive columns in wp without plugin responsive columns in wp without plugin](https://roadtoblogging.com/wp-content/uploads/2020/04/TablePress-1-768x700.png)
Next, I add a 2% left margin between the columns ( wp-block-column) so these don’t touch each other.Without it, the column block is not stuck right on top of the next block. First I am adding some whitespace below the overall block ( wp-block-column) with a bottom margin.My bare-bones solution for styling the columns blockĪs you can see below, I have kept the styling to a minimum. But for now I use my home-grown bare-bones solution. Styling columns will mostly become part of the themes. Three columns next to each other on a phone screen is not user-friendly, so I needed to find a quick solution.Īt this moment, the big 5.0 launch is due to come out soon, and themes are scrambling to become Gutenberg-friendly. And I quickly found out the columns a) touched each other (no spacing in between and b) were not responsive. Since there is is a columns block, why not use it? So I did. Sometimes more, but three is the number of columns many business websites choose to display their main services in. One of the most requested features on a new website nowadays is a three-column section on the frontpage. Why set up a site using the old – TinyMCE – editor when I had to haul over their sites a few months later to get them into the Gutenberg way of editing content (err… did I just talk myself out of a paycheck)? I was convinced that, despite the backlash in the community, this new editor was here to stay. I installed the plugin on a couple of my own sites and on some new customer’s sites. One of the consequences of this is – for now – that you have to style the block’s look and responsiveness yourself. When the Gutenberg editor came out as a plugin, the columns block was – and still is, at this moment (version 4.1) – in beta development.