Freecodecamp: Home Page Text Alignment Issue - Chrome

[hudsontaylor]

Challenge Name

FreeCodeCamp Home

Issue Description

I noticed today that the FreeCodeCamp's home page seems to have a bug in Chrome. In the testimonials section, the text seems to be displaying with text-align: justify. However, I opened the page in Safari, and it looked fine. Because I'm unfamiliar with FreeCodeCamp's page hierarchy, I couldn't find the stylesheet that might be affecting this.

Browser Information

• Browser Name, Version: Chrome 54.0.2840.98
• Operating System: OS X El Capitan
• Mobile, Desktop, or Tablet: Desktop

Your Code

Screenshot

[raisedadead]

@hudsontaylor thanks for reporting, mind sharing some screenshots to help us understand the difference that you are seeing in the browsers?

Also, it would be awesome if you could add your viewport sizes to the OP.

The stylesheets are available here: https://github.com/FreeCodeCamp/FreeCodeCamp/tree/staging/client/less

And maybe you will be interested in this one I guess:
https://github.com/FreeCodeCamp/FreeCodeCamp/blob/staging/client/less/main.less

[dhcodes]

I believe he's talking about this page: https://www.freecodecamp.com/stories.

I'm not sure it's a bug so much as a design choice for the captions.

[hudsontaylor]

@dhcodes No, I am not talking about that page. I provided the link in the description.

@raisedadead Yes, here is a screen shot (both at a 1075px screen size). I'm assuming the odd spaces are a result of a text-align rule. Also, I checked Safari again, and this bug appears there as well.

Hope this helps :)

[raisedadead]

Summoning the powers of @hallaathrad !

[xtatanx]

Hello, I would like to help with this issue if posible.

Regards :)

[hudsontaylor]

I looked into it, and it seems that this block of code is the trouble (in https://github.com/FreeCodeCamp/FreeCodeCamp/blob/staging/client/less/main.less):

.testimonial-copy {
    text-align: justify;
    font-size: 18px !important;
    margin-left: 15px;
    margin-right: 15px;
}

I tried decreasing the margin, and that seems to look alright. You could also use media queries to switch the alignment at certain breakpoints possibly?

[raisedadead]

@hudsontaylor thanks for the updates.
@xtatanx thanks for your interest in fixing this.

Please make a pull request, help wanted labels are open to all for fixing!

[xtatanx]

@hudsontaylor @raisedadead So the idea is to keep elements with justify alignment but trying to decrease the odd spaces on certain breakpoints?

If that is the case , wouldn't be better to justify the content to left?

[raisedadead]

Can you post some screens with both justify content to left and one for center aligned? We can have a vote. I personally would have preferred a center aligned text, but that's just me.

[hudsontaylor]

@raisedadead Here it is with text-align: center;. It looks nice to me...

[xtatanx]

This is with text-align: left, I think it looks better aligned to center.

[raisedadead]

@xtatanx thanks yes it definitely looks better with center aligned. Looks like @hudsontaylor already made a pull request! Would you be interested in helping in any of the other issues! We have plenty 😅

@hudsontaylor thanks a lot for the PR. ✨

[xtatanx]

@raisedadead off course! I am willing to start contributing to open source projects, I'll keep a look on the issues tab :)

[hudsontaylor]

@raisedadead No problem!