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
d wilder
@alhazen1

@TimHandy What I'm seeing is that your header is fixed at 900px

#header {
    clear: both;
    width: 900px;
}

and that your project preview images get really thin at 80% width.

You can do responsive from scratch but I would suggest using a responsive framework like Bootstrap

Tim Handy
@TimHandy
@alhazen1 where are you seeing fixed #header id of 900px? I don't have that as far as I can tell
@alhazen1 my header uses a .header with position: fixed and 92% width
@alhazen1 even if that were the case, that doesn't answer the question about the font increase/decrease in size. Are you seeing what i mean in the mobile view?
Atdhe Kurteshi
@atdheekurteshi
d wilder
@alhazen1
@TimHandy I'm not sure - I see it in dev tools (I copied that snippet from dev tools). Maybe you have a naming conflict with 'header'. I also don't see an h2 tag in your pen. Possibly I opened it before you had saved it? Just guessing.
Tim Handy
@TimHandy
Ahh... @alhazen1 my bad
try now
grantknaver
@grantknaver
im trying right now to offset the inputs at the end of my page but it wont allow me to. The inputs I am targeting have the class .contactFields
Baraka Mahili
@gbmahili
I have a question about user experience. Can some one check my page and tell me what is the best user experience? http://codepen.io/GBMahili/full/xEXqKV/
Thanks
Tim Handy
@TimHandy
@gbmahili I would like to see the button on the right end of the input field.. it looks massive below
grantknaver
@grantknaver
@gbmahili hide it.
Baraka Mahili
@gbmahili
Thanks @TimHandy I was afraid the amount of info in the button will make the input huge too...let me try that
CamperBot
@camperbot
gbmahili sends brownie points to @timhandy :sparkles: :thumbsup: :sparkles:
:cookie: 200 | @timhandy |http://www.freecodecamp.com/timhandy
Baraka Mahili
@gbmahili
Thanks for the input @grantknaver
CamperBot
@camperbot
gbmahili sends brownie points to @grantknaver :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for grantknaver
Tim Handy
@TimHandy
@gbmahili You don't often see the text on a button change like that... Is it standard to do that or does it violate some rule of UX?
Baraka Mahili
@gbmahili
@TimHandy I was making some payment on a website today, and when I scrolled down, the input field was hidden, so I had to scroll back up to see and confirm that I am paying the right amount...so I figured what if I just add the amount so that the user see what they are actually paying...so I coded it
but it is not usual to have more info on a submit button
Tim Handy
@TimHandy
cool, why not then!
d wilder
@alhazen1
@TimHandy OK - very different now. Are asking why your h2 runs width of the page but your name does not? I think that is because your title class is floated left
grantknaver
@grantknaver
tnaks @jdtdesigns
Tim Handy
@TimHandy
@alhazen1 Nope, I am not asking that. I can't figure out why when I put my very basic portfolio into dev tools mobile view in chrome (attempting to do mobile first dev) and then resize the window narrower, the top h1 (my name) gets smaller, yet the h2 below the image and the text below that grows?
@alhazen1 I don't understand why one gets bigger whilst the other gets smaller, nor do i understand why they change size at all!
grantknaver
@grantknaver
im trying right now to offset the inputs at the end of my page but it wont allow me to. The inputs I am targeting have the class .contactFields
d wilder
@alhazen1
@TimHandy Hmmm... I'm not seeing that. I've tried it with and without a refresh of the screen and your name and h2 both seem to be same size as on large screen
Tim Handy
@TimHandy
@alhazen1 hmm, and you're on mobile view in dev tools?
and then you make the viewport window narrow?
d wilder
@alhazen1
@TimHandy Yes. Not sure what to tell you but that is a head scratcher
Tim Handy
@TimHandy
@alhazen1 OK, thanks for looking
CamperBot
@camperbot
timhandy sends brownie points to @alhazen1 :sparkles: :thumbsup: :sparkles:
:cookie: 396 | @alhazen1 |http://www.freecodecamp.com/alhazen1
d wilder
@alhazen1
@TimHandy you're welcome. I looked in Firefox too and looked good there also. Just as a precaution maybe you should try restarting the browser - maybe??
Tim Handy
@TimHandy
Yeah, I'll give that a go, and try it on another machine also. cheers
JD Tadlock
@jdtdesigns
@TimHandy what are you trying to achieve? centering inputs and submit button?
Tim Handy
@TimHandy
@jdtdesigns it was @grantknaver , not me :-)
JD Tadlock
@jdtdesigns
ah, sorry :P
JD Tadlock
@jdtdesigns
@grantknaver This is how you can center a group of inputs http://jsbin.com/juriziravu/edit?html,css,output
Ashish Acharya
@anarchyrucks
var Leaderboard = React.createClass({
  getInitialState: function(){
    return{
      type: "recent"
    }
  },
  showAllTime:function(){
    this.setState({type: "alltime"})
  },
  render: function() {
    return(
      <div>
        <div id="title">Leaderboard</div>
        <div className="container">
          <table className="table table-responsive">
            <thead>
              <tr>
                <th>#</th>
                <th>Camper's Name</th>
                <th className="recent" onClick={this.showRecent}>Points in last 30 days</th>
                <th className="alltime" onClick={this.showAllTime}>All time points</th>
              </tr>
            </thead>
            <Table url={this.props.url + this.state.type}/>
          </table>
        </div>
      </div>
    )
  }
});
why doesn't it update the table ??
Stephen James
@sjames1958gm
@anarchyrucks Are you getting an error that showRecent is not defined?
Ashish Acharya
@anarchyrucks
no
i forgot to type that
var Table = React.createClass({
  getInitialState: function(){
    return{
      data: []
    }
  },
  componentDidMount: function(){
     $.ajax({
      url: this.props.url,
      dataType: 'json', 
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  render: function(){
    return(
      <tbody className="table-striped">
        {
          this.state.data.map(function(value, index){
            return(
              <tr>
                <th>{index + 1}</th>
                <th><img src={value.img} />{value.username}</th>
                <th>{value.recent}</th>
                <th>{value.alltime}</th>
              </tr>
            )
          })
        }
      </tbody>
    )
  }
});

var Leaderboard = React.createClass({
  getInitialState: function(){
    return{
      type: "recent"
    }
  },
  showAllTime:function(){
    this.setState({type: "alltime"})
  },
  showRecent: function(){
    this.setState({type: "recent"})
  },
  render: function() {
    return(
      <div>
        <div id="title">Leaderboard</div>
        <div className="container">
          <table className="table table-responsive">
            <thead>
              <tr>
                <th>#</th>
                <th>Camper's Name</th>
                <th className="recent" onClick={this.showRecent}>Points in last 30 days</th>
                <th className="alltime" onClick={this.showAllTime}>All time points</th>
              </tr>
            </thead>
            <Table url={this.props.url + this.state.type}/>
          </table>
        </div>
      </div>
    )
  }
});
Ananay
@ananaymital
does anybody know how can I test if my github code works or not locally?
Stephen James
@sjames1958gm
@anarchyrucks I am not sure componentDidMount will get called if only props have changed?