WordPress: How to make tables responsive

Many of the WordPress themes (even some really good ones from Envato Market) do not have the necessary styles to make the tables responsive. I often see clients coming with a purchased theme complaining that the pages are not behaving as they should for smaller screens. And most of the times I find that the problem is caused by the presence of a table that lacks the responsive styles. The following two snippets are the CSS fixes I use to solve this problem. If you just want to add responsive capability for the tables inside your WordPress page editor, then use the Basic one. But if you want to make those tables look more modern and eye-catching, then use the Stylized one.Read More »

Advertisements

CSS3: How to vertically center align HTML elements for variable heights

Let me put it this way, it is just a nightmare for front-end developers who have faced the situation for the first time without knowing a proper way to do it. For fixed height elements, vertically center aligning is really easy with some calculation and adding some padding in the parent element or some margin in the child element. But when the heights of those elements are not fixed (a regular case in responsive front-ends), that margin-padding method does no good rather than complicating the situation even more. You can use JavaScript, but who wants to use unnecessary scripting, especially if you are like me who cannot tolerate unnecessary scripting and is a fan of elegance and performance. display: table-cell; ? No, it will not work as you expect in cases where absolute positioning is involved.

Actually, there is a very easy way to vertically center align elements and once you see how easy it is, you’ll never use anything else for this task. CSS3 transform property will do the job for us. Here is a pen I made for you to demonstrate the vertical center aligning with CSS3 transform.Read More »