These are chat archives for FreeCodeCamp/HelpFrontEnd

21st
Aug 2018
newmoon
@newmoon
Aug 21 2018 00:07
Happy to take a look! @AJ-Brommy
newmoon
@newmoon
Aug 21 2018 00:12
If it's the one about content getting covered up by the fixed position navbar, I think the standard trick is to use padding and a negative margin on the section the navbar links to. Something like:
  padding-top: 50px;
  margin-top: -50px;
There's a good discussion in the bootstrap issues on it - but it isn't bootstrap-specific: twbs/bootstrap#1768
AJ Brommy
@AJ-Brommy
Aug 21 2018 00:15
I think we tried that on target:before{} but didn't seem to work
newmoon
@newmoon
Aug 21 2018 00:36

Yeah, I just do this where #section is the section the navbar links to:

#section {
  padding-top: 50px;
  margin-top: -50px;
}

depending on the content for that section and the size of the navbar, those numbers may need to be modified - not a one-size-fits-all approach

glitz20
@glitz20
Aug 21 2018 01:41
anybody who can help me with react and importing components?
Donnie
@Donnie-D
Aug 21 2018 02:38
Just playing :smile: Why does the margin-right and margin-bottom not work?
https://jsfiddle.net/jv1z25L4/10/
I mean if you change the wording from margin left to margin right or margin bottom, they dont seem to have an effect
William
@waruiz
Aug 21 2018 05:29
Anyone know a free spirit that generates a random hex color? I'm making an example Codepen to test redux-saga async calls and I can't find a simple API that just does this.
*free API, my bad....Auto correct
Claudio Restifo
@Marmiz
Aug 21 2018 05:35
@waruiz you can make one yourself :) it won't take much! :)
otherwise the one That I know to simulate API calls returns some data (either images, fake JSON, or even a Pokemon API)
I never seen a color one
William
@waruiz
Aug 21 2018 05:38
Thanks @Marmiz I just found http://thecolorapi.com/random. They didn't advertise that endpoint in their docs but it works!
Claudio Restifo
@Marmiz
Aug 21 2018 05:44
have fun with those sagas :smile: :+1:
Rogério Dalot
@Dalot
Aug 21 2018 07:46
You can simply have a randomcolor function
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; }
Hello friends this is my Landing Pafe
Supra01
@Supra01
Aug 21 2018 08:42
@rubendmatos1985 Looks great!
@rubendmatos1985 the video is cut off on the side when I view from my phone
Morchid Chellali
@Morched23MJ
Aug 21 2018 12:57
Is there a proper way to make a vertical side navbar with the documentation on the right side other than setting width values with percentages?
Here is how I did it: https://codepen.io/Morched23MJ/pen/QVwWNa?editors=1100
AJ Brommy
@AJ-Brommy
Aug 21 2018 13:01
@Donnie-D its because you have set a width on the paragraph. the margin is there, you just can't see it.
newmoon
@newmoon
Aug 21 2018 16:26
@Morched23MJ There are probably a few proper ways to do it. You may want to consider using vw and vh instead of percentages. Flexbox is a great approach too: https://codepen.io/anon/pen/bxNeZK?editors=1100

I'm seeing a lot of these projects lately - and just about everyone does:

 <a href="#" class="nav-link"><li>Link</li></a>

Instead of:

 <li><a href="#" class="nav-link">Link</a></li>

I'm not positive, but think <li> is the only allowed direct child of a <ul>

AJ Brommy
@AJ-Brommy
Aug 21 2018 16:46
I'm with you on that newmoon, It is a list item with a link, not a link with a list item :)
Morchid Chellali
@Morched23MJ
Aug 21 2018 17:12
@newmoon, good point. :)
Christopher
@bradley1492
Aug 21 2018 17:17

Hello,

I can't figure out why in mobile-view the links in my menu are reaching over the end altough I have set ovrflow to scroll.

Doesn't overflow:scrollautomatically prevent the elements from going outside the box?

Here`s the code:
https://codepen.io/bradley1492/pen/pZrXQz?editors=1100

Morchid Chellali
@Morched23MJ
Aug 21 2018 17:18
@bradley1492, I'm facing the same issue, lol.
Christopher
@bradley1492
Aug 21 2018 17:19
@Morched23MJ hahahahaha first time this happens to me on fcc hahhahaha
@Morched23MJ :)
Morchid Chellali
@Morched23MJ
Aug 21 2018 17:19
:D
Christopher
@bradley1492
Aug 21 2018 17:20
So at least the answer will be helpful for two persons which is quite nice!
:)
Morchid Chellali
@Morched23MJ
Aug 21 2018 17:20
Yup. :D
Christopher
@bradley1492
Aug 21 2018 17:21
Are you working on codepen, can I see how your issue looks?
Ahhhh on top
Morchid Chellali
@Morched23MJ
Aug 21 2018 17:21
https://codepen.io/Morched23MJ/pen/QVwWNa
We're on the same project. :D
Christopher
@bradley1492
Aug 21 2018 17:22
Are you having the exact same problem?
I can't see the same issue in your pen?
Morchid Chellali
@Morched23MJ
Aug 21 2018 17:23
The side nav has more nav links than those who are visible.
I can't scroll. :D overflow-y: scroll isn't working.
AJ Brommy
@AJ-Brommy
Aug 21 2018 17:29
@bradley1492 I believe your css is in the wrong place
Morchid Chellali
@Morched23MJ
Aug 21 2018 17:30
overflow-y: scroll should be applied to which selector? :l
Christopher
@bradley1492
Aug 21 2018 17:30
@AJ-Brommy how do you mean?
AJ Brommy
@AJ-Brommy
Aug 21 2018 17:30
sorry gotta look through code properly
The main container for that box that contains the UL I would think needs to scroll. but i best look through code properly as I dont know your set up. all ive done is look at css
yes i think id="navbar"
#navbar {  
  background-color: cadetblue;
  border-right: 2px solid black;  
  height: 12em;
  overflow: scroll;
}
newmoon
@newmoon
Aug 21 2018 17:35
Right, remove the overflow setting from #navbar > ul and apply it to #navbar, but I think overflow: auto may be better there.
Morchid Chellali
@Morched23MJ
Aug 21 2018 17:36
I want the overflow only on the ul elements
I want the title of my Doc to stay at the top? I nest my ul into a div?
newmoon
@newmoon
Aug 21 2018 17:38
Ahhh, in that case, give your <ul> a height so it knows at which point it's overflowing
Morchid Chellali
@Morched23MJ
Aug 21 2018 17:38
Exactly. I didn't give a height to my ul. :D Thanks.
newmoon
@newmoon
Aug 21 2018 17:39
#navbar {  
  background-color: cadetblue;
  border-right: 2px solid black;  
}
.nav-link {
  color: black;  
  text-decoration: none;  
}
#navbar > ul {
  max-height: 12em;
  overflow: auto; 
}
@bradley1492 :arrow_up: in case you also want your navbar title to remain fixed at the top
Christopher
@bradley1492
Aug 21 2018 17:49
@newmoon thanks I have to look into this!
@AJ-Brommy ahhh thanks now I understand, I removed overflow scroll from the #navbar element in order to keep the header on top when scrolling, I should have mentioned that, I sort of got confused myself.
aenkirch
@aenkirch
Aug 21 2018 18:44
@newmoon Thanks m8 !
newmoon
@newmoon
Aug 21 2018 18:58
Glad that helped :plus1:
Christopher
@bradley1492
Aug 21 2018 19:28

Hey I have another problem now concerning the switch between sort of tablet and mobile screen sizes I think.

Shortly before my media query breakpoint the content starts to flow outside of the viewport.
Do I have to change some viewport settings here or so?
https://codepen.io/bradley1492/pen/pZrXQz/?editors=0100

Is this caused because an element is wider than my document?

Hm if so how would I find which element it is in the dev tools?

Christopher
@bradley1492
Aug 21 2018 19:44
Obviously i could se the breakpoint higher but that can't be the right way to to it :D
Bjorn van de Peut
@bjorno43
Aug 21 2018 20:09
@bradley1492 First think I noticed is that the issue triggers at 667px width. So obviously changing your media query to 667px will solve it. Tracking it further down I've noticed that it's being caused by <main id="main-doc"> and more precise the CSS grid. If you remove those (it will kill your design) the issue will no longer trigger untill your shrink the browser very small. I know for a fact that 667px is the default with for tablet screens, but tbh I have no idea if CSS grid applies this by default somehow.
aenkirch
@aenkirch
Aug 21 2018 20:19
@newmoon Do you have a solution for this problem, I'd like to extract the name of the pressed button to put it in my #display element but the thing displayed is "Object object" ? https://codepen.io/aenkirch/pen/bjyvwP?editors=0010
newmoon
@newmoon
Aug 21 2018 20:21
@aenkirch I think that's because you put displayText in curly braces. Do this instead: display.innerHTML = displayText;
@bradley1492 Part of the issue is that your <header> elements aren't allowed to wrap. You have white-space: nowrap; so they stay full width.
Christopher
@bradley1492
Aug 21 2018 20:27
@newmoon ohhhh thanks goodness it would have taken me a while to figure that out alone
aenkirch
@aenkirch
Aug 21 2018 20:29
@newmoon Thanks a lot haha I think I'm tired for having not noticed such a mistake
newmoon
@newmoon
Aug 21 2018 20:29
No problem :) glad to help point it out!
@bradley1492 The other issue is with <code> elements not wrapping text. When there is no space in a text string, wrapping isn't possible by default. You can fix it with:
code {
  word-break: break-all;
}
newmoon
@newmoon
Aug 21 2018 20:34
@bjorno43 Default width for tablets should be larger than 667px. The Grid is applied incorrectly though, you're right. Probably should be: grid-template-columns: 250px 1fr; rather than grid-template-columns: 250px 3fr;.
Bjorn van de Peut
@bjorno43
Aug 21 2018 20:38
@newmoon I know, but I mean that I've seen frameworks trigger tablet designs on 667px. Though now I'm starting to doubt myself
newmoon
@newmoon
Aug 21 2018 20:40
Ahhh, I see. I only use Bootstrap + Materialize. Need to check out others. Bootstrap breaks at 768px for Tablets. Materialize at 600px.
Christopher
@bradley1492
Aug 21 2018 20:52
@newmoon oh thanks I'll also look into that
Ramon Cardenas
@Ramoncarden
Aug 21 2018 21:42
Hello there can anyone help me with a couple of things on my tribute page?
  • the John Mayer name moves out of position when i resize the page. what i would like for it to do is to stay in position but resize to scale with the photo.
  • the second thing is when i resize the window a huge space is created between the content and the photo. I suspect this has something to do with the div containing the "John Mayer" title. It works fine when the title is not present
    https://codepen.io/Ramoncarden/pen/KxwvEp
thank you in advance for any help. im currently passing all tests, but i want to learn how to fix these bugs
AJ Brommy
@AJ-Brommy
Aug 21 2018 22:35

My turn to ask for help lol...

Can anybody tell me why if I add 5px of padding to my #tribute-info box I get much more than that. And if I take it away the margin/padding appears to change for the footer!?

https://codepen.io/AJ-Brommy/pen/YOKvxz

I wanted to keep this one simple, minimal code. And yet I've stumbled up something that seems to not make sense to me. Not a good sign for me hahaha
Ramon Cardenas
@Ramoncarden
Aug 21 2018 22:47
@AJ-Brommy are you trying to get your tribute info box to not be so close to the footer/copyright text?
AJ Brommy
@AJ-Brommy
Aug 21 2018 22:47
@Ramoncarden 1st point, is that it is set to absolute. Which is to the window. So it will always be 250px from the right of the window and 450px from the top. I'm entirely sure how to achieve your request. Perhaps a percentage figure will aid, or an em number. And the same for the font-size. Again font size is set to 60px which won't change size. If you don't know, pixels are dots that make up a screen. So for example if a screen size is 1024x768 that means there are 1024 pixels across and 768 pixels down. So if you shrink the browser width wise and it is set to pixels the viewport gets smaller the font size will stay at 60 pixels, which is why it does not change size. This is why you will need percentages or similar.
Ramon Cardenas
@Ramoncarden
Aug 21 2018 22:47
are you adding just padding to the bottom?
newmoon
@newmoon
Aug 21 2018 22:47
@Ramoncarden The huge space is because of how you have set up your grid. I'd suggest removing it for now and addressing your layout requirements in a separate question if needed. To keep the title from moving off screen, you can use media queries to reduce the right value in your CSS based on screen size, or use a smaller value like 20px;. To get it to move with the image resize, you'll need to put the title inside your image div and give your image div position: relative. Example: https://codepen.io/anon/pen/yxyPaj?editors=1100
AJ Brommy
@AJ-Brommy
Aug 21 2018 22:48
No. At this point im not doing anything with the footer. I just wanted to white space around my tribute info
to add*
Ramon Cardenas
@Ramoncarden
Aug 21 2018 22:51
@AJ-Brommy yea i think i just noticed that i had a px value for the font. That was my bad. thanks for catching that.
@newmoon i think this is what i was looking for. thank you. i forgot to put the name in the image div. Ill mess around with that. Thanks for the help.
newmoon
@newmoon
Aug 21 2018 22:56
@AJ-Brommy The <p> element has a default margin based on which browser you're using. This margin will collapse in some complicated scenarios: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
So, when you add padding, the margin collapses, and your footer touches the box around your tribute info. When you remove that padding, the margin around the <p> element is restored
Manan Shah
@mananshah51
Aug 21 2018 23:31
<!-- Header Outside the Form -->
<h1 id="title"> Survey Form</h1>

<!-- Inside the white area but outside the form area -->

<div id="outer-form">
  <p id="description"> Let us know how we can improve freeCodeCamp </p>
</div>

<!-- All the details of the Survey Form Starts from here -->
<form id="survey-form" method="GET" action="">
  <div class="row">
    <div class="left-column">
      <label id="name-label" for="name">* Name:     </label>
    </div>

    <div class="right-column-content">
      <input type="text" name="name" id="name" placeholder="Enter your name" class="input" required autofocus>
    </div>
  </div>
#title {
  text-align: center;
  font-size: 35px;
  font-family: Monospace;
}
body {
  background-color: #add8e6;
}

#outer-form {
  background-color: white;
  margin: auto;
  width: 70%;
  padding: 5px;
}
#description {
  text-align: center;
  font-family: Monospace;
  font-size: 25px;
}
.left-column {
  text-align: center;
  background-color: white;
  margin: auto;
  width: 70.8%;
}
.right-column-content {
  text-align: center;
  padding-left: 300px;
  vertical-align: bottom;
}
I need to align the "left-column" with the "right-column-contents" . How do I do it ?
newmoon
@newmoon
Aug 21 2018 23:55
@mananshah51 What do you mean by "align"?
Manan Shah
@mananshah51
Aug 21 2018 23:57
@newmoon Bring them in one row. As in like Name: "Text Field"
newmoon
@newmoon
Aug 21 2018 23:58

@mananshah51 Ahh, just put them next to each other in HTML:

      <label id="name-label" for="name">* Name:</label>
      <input type="text" name="name" id="name" placeholder="Enter your name" class="input" required autofocus>

Apply text-align: center to the parent div and use margin-right on the label to adjust distance from the input field.