Hello!
Today I wanted to share a little CSS Trick with you Many other people have done this before, awesome people like Ikue, nichtgraveyet or GinkgoWerkstatt, and now it's me too
This first trick is very simple in execution, but I want to spend some time explaining why you should do it. That's why this journal has become a bit long

All about improving Readability!

When it comes to designing long copy texts, there are quite some challenges in order to create something easy to read and enjoyable to look at. One of the issues that may occur is text, that is running too long. The longer a line of text gets, the hard it is for the reader to follow the flow of text.
In some case you may have to even move your head from the beginning of a line to its end. And once you move your head, it becomes a lot harder to find the next line of text.
You may not even notice this while reading. But you will notice that your eyes get tired and you may even get a little headache after reading for while. This is a sign of bad design and has to be avoided at all costs! Always, seriously always consider the readability of your design! I see many people completely ignoring this point and that is a shame. If you take the time to write a journal entry, you do want people to enjoy reading it, right? So don't make it too hard for them

Anyway, here's what I want to talk about today:

Studies have shown that online 100 characters per line is an acceptable standard for layouts. This number does not tire the eye and makes it easy to catch the next line after a break.
Since different typefaces have different character lentghs, this of course makes it hard to find a pixel size that makes up for this. I came to the conclusion that 600 px text width is a fair balance between different typefaces.

In the following I will show you a easy and simple trick to apply this to your journal skins. What I want to achieve is a left-aligned text-field that runs no longer than 600px and is centered inside the whole journal. (Not centered text!)

So, what’s the challenge?

Journals on dA are "liquid" boagworld.com/design/liquid-vs… . Their width varies depending on where you look at the journal (e.g. user profile, journal tab or journal deviation page) and your and other people’s browser resolution.
This means, you cannot position the text-field per se, you have to find a different way of positioning the element relative to its surrounding element.

Center & limit!

We are going to change 2 things in order to center the textfield of our journal and give it a limited width.

.text {

margin: auto;

max-width: 600px;

}

So, how does this work?

The margin describes how far away an element is from what surrounds it. By setting this to auto, the .text element gains equal distance on all sides to the surrounding element.

The max-width simply limits the size of the .text element. It can now never be wider than  600px.

You with me, so far? Yes? Cool. Let’s have a look at custom elements!

Creating a custom box!

If you want to create a box, that has a limited width inside your text field, you will have to create a new class:

.custom-box {

margin: auto;

max-width: 400px;

background:#664d80;

color:#ffffff;

padding:20px;

}

This requires you to enter additional HTML in your text:

<div class="custom-box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.</div>

And results in this element:


This is a simple and easy to remember technique to center elements of which you do not know the width! Two lines of code that make your life a lot easier

Now, I don't have much to say anymore. Guess I said enough anyway

I hope you enjoyed this little trick and maybe even learned something