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
Daniel Slatkin
@DSlatkin
That's one thing that block-level elements do as a result of how they behave
KatECN11
@KatECN11
I have so much to learn!
Daniel Slatkin
@DSlatkin
It's better to think as block-level elements as elements that "expand" left and right to fit the entire width of their "parent" block level element
KatECN11
@KatECN11
hmm... that helps give more perspective
Pink, blue, green are block-level elements (pink I've set the width to 600px). Blue and green expand to fit the width of the parent element since they're block-level. Purple is an inline element.
Sorry I'm sharing so much! Just spent forever not knowing the difference between block and inline elements haha, and wish someone explained sooner to me.
KatECN11
@KatECN11
NO! I super appreciate it!!!
abraham anak agung
@padunk
Yes FCC should explain it @DSlatkin i didn't know it too after someone told me about that. Nice explanation. Thanks.
CamperBot
@camperbot
padunk sends brownie points to @dslatkin :sparkles: :thumbsup: :sparkles:
:cookie: 116 | @dslatkin |http://www.freecodecamp.org/dslatkin
Daniel Slatkin
@DSlatkin
Yeah - it had me curious and I'm trying to find a good picture online of block vs inline elements, and can't find anything (except this: https://goo.gl/5TC4dG) haha.
I don't find that image helpful at all, though I like the effort (if anything adds to the confusion since a block-level element can expand to fit its parent block-level element)
abraham anak agung
@padunk
:laughing:
geoffrymichael
@geoffrymichael
I am doing twitch api app and ran into a styling problem. I cannot for the life of me figure out how to adjust the anchor tags to vertically center them in their divs via css, or really how to move them vertically at all. Padding is working horizontally, but when I try padding top or bottom, the anchor tag won't move. I see the padding when I use inspector in chrome, but it does not actually do anything. Any help would be greatly appreciated. This is the github pages to the actual app(very bare bones at the moment) https://geoffrymichael.github.io/twitch-api-app/. And here is the repository. In the styles.css I am trying to manipulate the anchor tags that I have given a class of .links. https://github.com/geoffrymichael/twitch-api-app/tree/master/docs
Ken Haduch
@khaduch
@KatECN11 - one site that you'll probably want to bookmark is the css-tricks website. For example, you'll find pages like this one: https://css-tricks.com/almanac/properties/d/display/ that if you take the time to study them will show you a lot of detail about HTML and CSS.
Phuc Le
@phuchle
@geoffrymichael you can add display: flex to your .stream class and then on img and .link add align-self: center
get rid of your padding-bottom on .link if you do that method
flexbox solves a lot of problems with vertical-alignment
but took me a while to wrap my head around it
Ken Haduch
@khaduch
@geoffrymichael - I agree with @phuchle about going with flexbox. I think that prior to the implementation of flex, using tables was the only HTML structure that supported vertical centering. Another CSS-tricks page for everything about centering: https://css-tricks.com/centering-css-complete-guide/
geoffrymichael
@geoffrymichael
@phuchle @khaduch. Okay, good to know this is something finicky and wasn't just me. Of course now that I've enabled flex, my text under the streamer icon got thrown from under icon, but at least I can start toying around now. I've done a little flex box before.
Ken Haduch
@khaduch
@geoffrymichael - you can selectively use flex on the portions where you need it. If part of your page was good as it was, keep it without flex.
geoffrymichael
@geoffrymichael
@khaduch both the anchor tag and text were in the same div with a little logo icon. I was looking to have text under the logo and then an anchor tag to the right of the logo. I think with flex box I can start tinkering hopefully, or maybe I will separate the content into different divs.
German Gamboa Gonzalez
@germangamboa95
Ravi Kishore Thella
@ravikishorethella
@germangamboa95 cool :smile: :smile:
DarkxPunk
@DarkxPunk
Who is up at this time of night?
Ravi Kishore Thella
@ravikishorethella
:raised_hand:
DarkxPunk
@DarkxPunk
Hey I'm not alone for once on here, yay. @ravikishorethella How you doing tonight?
Ravi Kishore Thella
@ravikishorethella
@DarkxPunk I am doing good. How about you?
DarkxPunk
@DarkxPunk
Livin life.
Ravi Kishore Thella
@ravikishorethella
:smile:
DarkxPunk
@DarkxPunk
I jumped on here in the hope of putting forth an issue I am having and wondering if anyone has an interesting solution.
Ravi Kishore Thella
@ravikishorethella
What is the issue?
DarkxPunk
@DarkxPunk
However since @ravikishorethella you are the only one that is on, wanna help XD
Ravi Kishore Thella
@ravikishorethella
@DarkxPunk I will try :smile:
DarkxPunk
@DarkxPunk
Well I am trying to come up with a clean, pure css way to hide and show info. The specific case here is flipping between contact forms by clicking a button. Now I have successfully built the hide show function in two ways, one by using radio buttons and :checked and another by using :target, but I always end up with styling limitations, and need to specifically address the ids of each element which isn't ideal. Let me quickly throw up my example on code pen and you can have a look.
piratecoder
@jvondarke
anyone try drunk coding? lol can't imagine why my code isn't working
DarkxPunk
@DarkxPunk
@jvondarke Only sleep deprived coding
piratecoder
@jvondarke
aye thats just as bad
Ravi Kishore Thella
@ravikishorethella

that's worth trying, ig

anyone try drunk coding? lol can't imagine why my code isn't working

DarkxPunk
@DarkxPunk
Trying to find where you forgot to add a ";" when you are running on 1h sleep is always fun
piratecoder
@jvondarke
oh man i can only imagine @DarkxPunk
@ravikishorethella hell yea dude it really clears your mind when your trying to figure something out
Ravi Kishore Thella
@ravikishorethella
@jvondarke are you trying that now?
piratecoder
@jvondarke
maybe.....my code is not working....
DarkxPunk
@DarkxPunk
What isn't working
piratecoder
@jvondarke
my code, trying to make my portfolio lol
Ravi Kishore Thella
@ravikishorethella
can you share your codepen link?