Adjusting text width in article

[BinaryResearch]

Hello, this is just a quick question.

The width of the text in the articles is a bit narrow, is there a way that I can adjust this to make each line longer? For example, if we say that currently we can fit about 100 characters on 1 line before a new line is written, how can we increase this?

Demonstration of what I mean by "line length" and "text width":

e.g. current maximum line witdth:

• The lines are rather short, and quickly
  continue on to a new line after a few
  characters.

I would like this:

• This line is a bit longer and fills up more of the screen, leaving less white space. I think this
  looks nicer, but I cannot figure out how to do it.

[sylhare]

Hi @BinaryResearch

You sure can do that, basically by modifying the css.
It's basically using the %padding-regular which is in globals.
I think I can consolidate this all part. However in the end it will basically be in variables.css to control that.

In the mean time, you can just delete from %padding-regular so the text is widder:

  @media (max-width: 1000px) {
    padding: $padding-small * 1.5 $padding-large / 1.6;
  }

What is the size of your screen? (I may need to add a layer of responsiveness)

[BinaryResearch]

Thank you for the very fast response! I am still having some difficulty understanding what to do, unfortunately.

Right now I am just using a regular laptop, I think the screen size is around 1360 x 768 (16:9).

• I was not able to find a file called globals
  • there is a file called _global.css, but this file does not contain %padding-regular
• _variables.css also does not contain %padding-regular
• I was able to find the code snippet you provided in the _utility.scss file, but I am not sure if I am supposed to make changes here. It looks like %padding-regular is defined in _utility.scss:

%padding-regular {
  padding: $padding-small $padding-x-large;
  @media (max-width: 1000px) {
    padding: $padding-small * 1.5 $padding-large / 1.6;
  }
  @media (max-width: 576px) {
    padding: $padding-small;
  }
}

In _variables.scss I do indeed see the Padding variables.

// Padding
$padding-x-large: 23%;
$padding-large: 20%;
$padding-medium: 6%;
$padding-small: 4%;
$padding-x-small: 3%;
$title-padding: 0.5em;

I am still not sure what changes to make, however.

[BinaryResearch]

I think I figured it out, thanks for the help!

My solution:

in file _utility.css, I changed

%padding-regular {
  padding: $padding-small $padding-x-large;
  @media (max-width: 1000px) {
    padding: $padding-small * 1.5 $padding-large / 1.6;
  }
  @media (max-width: 576px) {
    padding: $padding-small;
  }
}

to

%padding-regular {
  padding: $padding-medium;          <-------------------------------------
  @media (max-width: 1000px) {
    padding: $padding-small * 1.5 $padding-large / 1.6;
  }
  @media (max-width: 576px) {
    padding: $padding-small;
  }
}

Then in _variables.scss I changed $padding-medium: 6% to $padding-medium: 12%.

[sylhare]

Allo, perfect I am glad you found an answer.
While looking at it I also found it confusing, I am going to push something to make it clearer.