Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
  • Feb 01 00:27
    @bjorno43 banned @Ndoua
  • Jan 07 03:10
    @bjorno43 banned @doctor-sam
  • Aug 17 2019 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 2019 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 2019 17:13
    @mstellaluna banned @cmal
  • Jan 08 2019 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
  • Jul 29 2018 01:00
    @bjorno43 banned @jkyereh
  • Jul 10 2018 22:09
    @bjorno43 banned @manafn
  • Jul 06 2018 15:20
    @texas2010 banned @imlegend19
AJ Brommy
yeah html5
alright I'll be gone for now thanks for your help!! :)
@br3ntor The functionality is part of emmet, with VS Code by default. Go to preferences -> keyboard shortcuts and search for increment and decrement to map the commands to ctrl+ :arrow_up: / :arrow_down: https://github.com/Microsoft/vscode/issues/3776#issuecomment-372664006
If it's the issue with the scroll bar appearing, it's because of your <code> content not wrapping.
The word-break property on your <code> elements will fix it: https://www.w3schools.com/cssref/css3_pr_word-break.asp
@bradley1492 @AJ-Brommy :arrow_up: :arrow_up: :arrow_up:
To debug overflow issues, I do:
* {
  border: 1px solid black;
AJ Brommy
lol - I literally just found it!! I saw newmoon talking and stayed away as I wanted to solve it. Gutted we didn't solve it first haha. Well done newmoon I knew you would have the answer. I did check for such a thing earlier but must have missed it. I literally took out all the content putting it back in one tag at a time and then found it. Feels good that I found it tho.
Uncanny I do the same, but i use a red border #f00; :D
how do you include a pic like that?
you have to upload it somewhere first?
yeah i see now that because there is no spaces it makes it one long word and the default doesn't break words so it breaks out the box so to speak
I still haven't finished my tribute page lol.. I should finish up!
@AJ-Brommy I think :point_up: this comment got lost yesterday :)
To add the image, I use a screen clip tool - select a portion of your screen and it goes to your clipboard. Paste in chat after that
AJ Brommy
Just paste :O wow
Opera Snapshot_2018-08-23_003725_codepen.io.png
I tried drag and drop instead - worked! coolness
Hahahahaha oh dear... you already solved yesterday!! Oh well - all good fun. I definitely learned!
I now need to go back and find the help you gave me!! lol
By the way @newmoon on the FCC version of that project they did <a><li></li></a> and apparently throws the test out if its <li><a></a></li>!!!!
@AJ-Brommy That should be bug in their HTML :) but the tests seem to pass for me with <li> as the direct child: https://codepen.io/anon/pen/rZVGWj?editors=1010
That's a fork of https://codepen.io/freeCodeCamp/pen/NdrKKL?editors=1000 with the <a><li> switched around
AJ Brommy
Seems you are right :D
So going back to my Tribute issue with the padding/margin thing. Should I use *{}?

I used to do that and default things to 0. But when I read:

"// PLEASE NOTE: Adding global style rules using the selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: { color: red }, for a quick example!"

I avoided doing so. However, reading it again, I think I miss read and panic'd lol, it's just a warning to be careful with the testing.

I don't think that will help out with the collapsing margins
AJ Brommy
no? oh
I thought it would default all browsers to use the same. 0, or what I state it to be.
Collapsing margins are consistent across all browsers - it's a controversial design in CSS
You may be thinking of something like normalize.css or reset.css - those are options to add in codepen Settings -> CSS
They normalize the default size of all elements across browsers - but unfortunately, margins will still collapse
Morchid Chellali
Is it mandatory to keep the test suite in my pens? Or it's a pain to the folks who are gonna check my projects for the certificate to add this test suites later on? And thus, I could remove them once I would get my certificate?
AJ Brommy
Ok, I see. Yes I just read the link you sent me. But most if it went over my head lol. I'm gunna have to disect it slowly me thinks. Thanks tho. I think this could involve one of the things that has bugged me for years, I may finally come to understand it!!
I think you only need to add it for yourself, to make sure you have passed the criteria. If you are not using it, take it out. I can't see it being a problem. I didn't use it last year with my old tribute you page and portfolio.
Morchid Chellali
I thought perhaps it would help the developers who are gonna check my projects for the certification, it ease their work.
@AJ-Brommy This is another good example of margins collapsing. The <h3> elements have a margin on top that makes this white space appear between sections. Add padding: 1px to the sections and it all goes away: https://codepen.io/anon/pen/qMdPXo?editors=1100
@newmoon thank you
AJ Brommy
Ok - but I still don't understand why the white disappears, but the word "section" doesn't move up!? You only add 1px, techinically 2, top and bottom, so why the big space. It's as if the grey box suddenly grows
@Morched23MJ if that's the case I think they would just add it themselves :)
It appears that the gray space grows, but actually the margin above the <h3> elements collapses
AJ Brommy
i dont get it lol
Hard to explain lol ¯\_(ツ)_/¯
I don't fully get it either
AJ Brommy
to be if it collapses - disappears - then surely everything should just move up. its as if it swaps it for padding
So how does one ever get a 1 pixel padding
This does the same thing:
section h3 {
  margin: 0;