Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Aug 17 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 17:13
    @mstellaluna banned @cmal
  • Jan 08 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
  • Jul 03 2018 12:28
    @bjorno43 banned @vbvmatta
  • Jun 29 2018 13:54
    @bjorno43 banned @OGTechnoBoy
newmoon
@newmoon
Yeah, no problem @bradley1492 add that word-break property to your code CSS and it should stop overflowing. Or, perhaps you can put an overflow on your <code> elements instead.
Christopher
@bradley1492
@newmoon what is code?
or code css?
newmoon
@newmoon
@bradley1492 CSS for the <code> element, is what I meant to say. Sorry about that ;)
<code></code>
Christopher
@bradley1492
@newmoon I never use that
newmoon
@newmoon
@bradley1492 Line 34 of your CSS
and in lots of places in your HTML
Christopher
@bradley1492
@newmoon ahhhh
@newmoon hahahah yesss sorry you're right
newmoon
@newmoon
No problem :)
Christopher
@bradley1492
@newmoon hm but it still doesn't work
https://codepen.io/bradley1492/pen/aabLzY?editors=0100
newmoon
@newmoon
@bradley1492 That's because you have word-break: normal for your code element further down in your CSS(line 76), so it gets overwritten.
Christopher
@bradley1492
@newmoon hm it's still not working here altough I deleted the one on line 76
https://codepen.io/bradley1492/pen/aabLzY?editors=0100
newmoon
@newmoon
Hmm, a lot of code changed. Remove white-space: pre from your code element's CSS too. That makes it better, but still overflows under 600px. @bradley1492
Christopher
@bradley1492
@newmoon Are other people able to write into my pen?
newmoon
@newmoon
No, not without your password and email used to log in to codepen @bradley1492
Christopher
@bradley1492
@newmoon alright
@newmoon I'll delete white-space: pre
newmoon
@newmoon
I think the remaining issue for it underflowing under 570px has something to do with all the absolute and relative positioning you added.
display: inline-block is a great way to get two elements side by side rather than using margins and absolute positioning.
Christopher
@bradley1492
@newmoon ahh ok so thats what I'll do in the future then I guess, but where am I having two things showing up side by side?
In general is there a way to prevent overflow issues from happening?
newmoon
@newmoon
Your navbar and your main-doc are side by side until you switch to mobile.
In general, try to avoid specific widths in pixels, large margins, and watch for word wrapping properties, but most of the time, overflow issues are kind of unique depending on the code.
Christopher
@bradley1492

@newmoon ooh yes thats right I thought I was smart using grid to line up those too :D

okok so I guess I'll have to learn to deal with them

@newmoon thanks for the help
newmoon
@newmoon
Any time @bradley1492 This is an alternate approach with inline-block elements. No grid, flex, or absolute + relative positioning: https://codepen.io/anon/pen/JaYRqb?editors=1100
Christopher
@bradley1492
@newmoon oh very interesting
@newmoon so it's not always the best to use grid or flexbox, but as least as possible?!
newmoon
@newmoon
They're great tools, nothing wrong with using them, but they do add more stuff to learn and know how to use on top of the basics. Sometimes the basics are all that's needed. @bradley1492
Christopher
@bradley1492
@newmoon Alright makes sense
@newmoon Would you consider the example to be more advanced than a flexbox grid method?
AJ Brommy
@AJ-Brommy
I just added Normalize to my pen thinking it would help me space things as I want... nope.. still getting problems with these collapsing margins. I just don't get it. nor why others don't seem to be having this problem!? lol
AJ Brommy
@AJ-Brommy
So it turns out Normalize doesn't default heading margins to 0px; because as soon as I put margin :0; on my h3 poof the problem has gone. tho also i need to do it on hr to get things exact. but i think i've no come up with a better page layout which will remove hr so lets see how that goes.
Bharath Kumar Reddy
@reddy-bharathkumar
guys, can someone please check my code and help me. I am not able to select the radio buttons properly, not sure what I'm missing
https://codepen.io/reddy-bharathkumar/full/xawxbJ
Thorbjørn Bruarøy
@The2rB
I'm able to select them (as in click on them - and they get selected)
Bharath Kumar Reddy
@reddy-bharathkumar
in correct order?
like, if I select the first radio button it's highlighting the 3rd one in my case
Michael
@Jumbledwords
Hi. I'm working on the Product Landing Page Project, and I was wondering if anybody could give me any ideas about a product that has plenty of not copyrighted material to work with
nevermind, I've got an idea
newmoon
@newmoon
@bradley1492 There may be more CSS depending on the layout required, but not necessarily more advanced. Knowing how to work with inline vs block elements is important whether you use flexbox/grid or not.
AJ Brommy
@AJ-Brommy
@reddy-bharathkumar I can't see the problem :/
Bharath Kumar Reddy
@reddy-bharathkumar
Hi, it's working fine now..
thanks
Gianpaolo
@gianpaolodatu
Guys I have a question about the Survey Project. one of the test suit's requirements is "13. Inside the form element, I can select a field from one or more groups of radio buttons. Each group should be grouped using the name attribute." so I wrote this piece of HTML
<label for="definitely">
<input id="definitely" type="radio" name="recommend"> Definitely
</label>
<label for="maybe">
<input id="maybe" type="radio" name="recommend">Maybe
</label>
<label for="not-sure">
<input id="not-sure" type="radio" name="recommend">Not sure
</label>
Yet it still doesn't pass as right, any idea why?
Christopher McCormack
@cmccormack
@gianpaolodatu you can usually click on the failed test and get a more specific reason why it failed
@gianpaolodatu also don't wrap your inputs in a label
the text should go within the label element but the input does not