Changing the global text alignment

[mcgregorian1]

Checks

• I have searched the docs, existing issues, and existing discussions for answers first.

Link to your website repo

https://deadlabcary.github.io/lab-website/media/

Version of Lab Website Template you are using

1.2.1

Description

I'm trying to figure out how to make the text of different items (e.g. cards, home page) be something other than justified alignment (e.g. left, right, etc). I found in the card.scss file there are parameters for align-items and justify-content, but I'm not sure what the acceptable inputs are nor how they affect the site. I checked the documentation but couldn't find any specifics.

I would ultimately like to change this for the whole website, but the card example is emblematic of the issue.

[vincerubinetti]

There's not really a way to change the alignment of everything on the site, nor would that be advisable.

You'll need to have some CSS knowledge to edit the _styles files. For example, justify-content can be set to flex-start/center/flex-end and more. That property is how you set horizontal alignment in flex layouts, unless flex-direction is column, in which case it'd be align-items instead.

Then text-align can be used to set text alignment within a block context. If you change this in body.scss, many (but not all) things will inherit from that (it can still be overridden, and flex layouts will still be whatever they're set to).

If you want help making a particular element look the way you want, please post a screenshot.

[mcgregorian1]

There's not really a way to change the alignment of everything on the site, nor would that be advisable.

Right! My bad for the lack of clarity, I was mainly referring to wanting to change the text to not be as spaced or stretched out as it currently is on the repo page link I shared in the post (i.e. not justified alignment as in Microsoft Word).

With regard to text-align vs justify-content, which of those changes the inter-text spacing? Based on this text explainer and this justify-content explainer, it appears that it should be the former, but the text-align variable in body.scss is already set to center (not justify) and it is set to left in card.scss. However, I see the same justify behavior when the site is rendered. Do you know why?

[vincerubinetti]

You would be looking for anywhere in the code that text-align: justify;. Just ctrl+f your repo for that string and replace it with text-align: left;. In particular, you are probably noticing the one on p (paragraph) elements, which appear all over the template, including the card component:

[mcgregorian1]

Perfect that's the parameter I was looking for, thank you!