Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • 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
Morchid Chellali
@Morched23MJ
overflow-y: scroll should be applied to which selector? :l
Christopher
@bradley1492
@AJ-Brommy how do you mean?
AJ Brommy
@AJ-Brommy
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
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
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
Ahhh, in that case, give your <ul> a height so it knows at which point it's overflowing
Morchid Chellali
@Morched23MJ
Exactly. I didn't give a height to my ul. :D Thanks.
newmoon
@newmoon
#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
@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
@newmoon Thanks m8 !
newmoon
@newmoon
Glad that helped :plus1:
Christopher
@bradley1492

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
Obviously i could se the breakpoint higher but that can't be the right way to to it :D
Bjorn van de Peut
@bjorno43
@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
@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
@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
@newmoon ohhhh thanks goodness it would have taken me a while to figure that out alone
aenkirch
@aenkirch
@newmoon Thanks a lot haha I think I'm tired for having not noticed such a mistake
newmoon
@newmoon
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
@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
@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
Ahhh, I see. I only use Bootstrap + Materialize. Need to check out others. Bootstrap breaks at 768px for Tablets. Materialize at 600px.
Christopher
@bradley1492
@newmoon oh thanks I'll also look into that
Ramon Cardenas
@Ramoncarden
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

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
@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
@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
are you adding just padding to the bottom?
newmoon
@newmoon
@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
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
@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
@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
<!-- 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
@mananshah51 What do you mean by "align"?
Manan Shah
@mananshah51
@newmoon Bring them in one row. As in like Name: "Text Field"
newmoon
@newmoon

@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.

Manan Shah
@mananshah51
@newmoon Sounds good. Thank you so much for your help.