My articles about CSS

How to create an image gallery with Grid and only two CSS classes

For my latest article I wanted to create a matrix of photos and the grid layout option of CSS came into the rescue. With only two CSS classes, one for the grid itself and one for the grid cells you can create a beautiful image gallery for your website.

We are also going to see how to apply the grid on Markdown code and how to change the way the grid is presented on mobile devices.

Read the complete article

Vertically center one or more lines of text with CSS. The old and the new way.

Aligning text on the vertical center of a div element is a task we do every once in a while when we style our web applications. Moreover, we have to support more than one lines of text. With the introduction of the display: flex property this task has become a one-line case. However, there are still plenty of browsers, even newer ones, which still do not support this property. Here you can find the browser support for display: flex.

Read the complete article

Define the width of every column in a HTML-table and show only one line of text per table-row by using the ellipsis character

A very old HTML best practice suggests that we should not use tables to structure the HTML elements inside a webpage. This solution was used extensively a decade ago, and for this reason tables got a very bad reputation in the web community. However, using tables in your HTML code for structuring and presenting a set of data is still a valid option.

When you use a table with multiple columns, you often want to define the width for each of the columns of the table.

  • One reason for that could be that you want to show more context of an “important” column than the others.

  • Another reason could be the fact that if you do not define the column widths, the longest value in a column will also define the width of the column. As a result the other columns are getting shrank.

Read the complete article

How to style a scrollbar by using only CSS features and have a cross browser support

For your new web application, you might want to style the scrollbar so that it fits to the general design.

You can either use JavaScript code to achieve the styling or you could stick to CSS properties and pseudo-selectors.

In this article we pick the second variant and our main goal is to have a cross browser support for a styled scrollbar.

Read the complete article

Possible causes of the "Mobile Usability > Content wider than screen" error message in Google Webmasters page

If you use the Google Webmasters for your webpage then you most probably have seen the Mobile Usability page under the Search Traffic menu. In this subpage Google lists for you CSS, HTML or SEO errors that have to do with the mobile version of your website. One of the most common errors that is listed there is the Content wider than screen error.

The content wider than screen error in Google Webmasters

Read the complete article

How to convert a number in Less code into a valid CSS measuring unit

When working with less you most probably have to do some calculations and assign their result in a CSS property, for example into a width of a CSS class or a margin of an CSS id.

Apart from the calculated number you want to generate valid CSS code, so you also have to apply a measuring unit to this number, for example pixels or ems or percentages.

Read the complete article

How to avoid wrong values in calc() rule inside a less file when minifying your CSS files?

The CSS calc rule helps you to do mathematical calculations in your CSS files. For example you could calculate the height of a div element based on a set of less or sass variables. But what happens to the mathematical expressions inside the calc rule when your code gets minified for production? The less engine will calculate the expression inside calc(…) during the minification process and thus calc will contain a wrong value.

Read the complete article

The correct way to do word wrapping (breaking) by using CSS rules

You often have to deal with words that are too long and they possible do not fit as a whole inside an HTML element. In such cases you have to break the word and put the part that does not fit in the next line. On the other side, you do not want to always fill the lines of an HTML element with text, which means that you do not want to break every single word, but instead you only want to break the words that are wider than the width of the containing HTML element.

Read the complete article

How to correctly combine the font and the line-height CSS rules in an HTML-element?

When using the font rule together with the line-height rule, there is something that you have to pay attention to, if you want to be sure that the combination of the two rules works as intended.

To start with, the font property combines the font-family, the font-size, the font-weight and the line-height in one command. But what happens if you do not set the line-height inside the font property but use the line-height rule explicitly?

Read the complete article

How to place the elements of a list at the bottom of an absolute positioned parent element

Suppose you have a HTML-list and you want to place its elements at the bottom of a parent element which is positioned absolute in your website and also has a predefined height. Apart from that you also want the list to be scrollable, when not all elements can be shown inside the parent element.

Consider the following HTML code which solves these two problems:

Read the complete article

How to create a less function (mixin) and use it for implementing beautiful and customized CSS box-shadows

Less supports the creation of pseudo-functions that can be used as CSS-classes in your less files. Doing this way you can save multiple keystrokes, automate your stylings and avoid syntax errors.

Lets take a look at a function that automates the creation of CSS box-shadows and supports new browsers by making use of browser prefixes.

Read the complete article