These are chat archives for FreeCodeCamp/HelpFrontEnd

2nd
Dec 2016
dybbuk
@izanagichan
Dec 02 2016 00:02
any advice on how to tackle the personal portfolio webpage?
like has anyone done it without looking at the example. lol
Nate Wilson
@nwilson314
Dec 02 2016 00:06
for me it was a lot of manual typing out the information
the rest of it was stuff that you learned in the lessons leading up
sneshka90
@sneshka90
Dec 02 2016 00:20
How should I create portfolio page? I am stuck... help pls..
i think it's too soon for this, because at this stage i can't have knowledge for that
Tyler Moeller
@TylerMoeller
Dec 02 2016 00:22
@francorufo As a hint, you will need to find a way to make that code run after the user enters text in the textbox.
dybbuk
@izanagichan
Dec 02 2016 00:23
@sneshka90 i feel the same way...
sneshka90
@sneshka90
Dec 02 2016 00:23
@izanagichan we need help for real :D
someone??
Tyler Moeller
@TylerMoeller
Dec 02 2016 00:24
The portfolio project is a big jump in difficulty. If you have both done all the freeCodeCamp challenges leading up to this project, then you have the vocabulary and basic understanding of how to do research now. Expect the project to take a good 20-30hrs. It is a big one that will require a lot of reading and web searching.
sneshka90
@sneshka90
Dec 02 2016 00:25
well that's why other camper can help, right? :worried:
*campers
dybbuk
@izanagichan
Dec 02 2016 00:26
@TylerMoeller I am confident in my webpage skills up to this point, but only as far as the last project. I guess my biggest question is how do you build a page by just looking at the full page?
by just looking at the full page as an example that is
Tyler Moeller
@TylerMoeller
Dec 02 2016 00:27
@izanagichan Break it down into pieces - start at the top and build your navbar. Then build each <section>
Finish with a <form> and a <footer> below that. Then fill in each section with images, buttons, etc...
sneshka90
@sneshka90
Dec 02 2016 00:27
@izanagichan let's google little and than come back here
Jeremy Barbe
@eemebarbe
Dec 02 2016 00:28
any react people here?
Tyler Moeller
@TylerMoeller
Dec 02 2016 00:28
It helps to look at everything one piece at a time, or it can get overwhelming.
dybbuk
@izanagichan
Dec 02 2016 00:28
@TylerMoeller cool, that is at least something to start with
sneshka90
@sneshka90
Dec 02 2016 00:29
@TylerMoeller tnx anyway..
Tyler Moeller
@TylerMoeller
Dec 02 2016 00:29
Good luck, lots of people here willing to help out when you get stuck
@eemebarbe React people hang out in https://gitter.im/FreeCodeCamp/HelpDataViz
Jeremy Barbe
@eemebarbe
Dec 02 2016 00:32
thanks @TylerMoeller
CamperBot
@camperbot
Dec 02 2016 00:32
eemebarbe sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1051 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
dybbuk
@izanagichan
Dec 02 2016 00:36
@TylerMoeller so bootstrap is already in codepen right, no need to add it to the header?
Tyler Moeller
@TylerMoeller
Dec 02 2016 00:37
@izanagichan No, not already in codepen. You will need to click the Settings button and then CSS. You can add it in one of those fields.
This is a good tour to show you how to set everything up: https://codepen.io/pen/tour/welcome/start
dybbuk
@izanagichan
Dec 02 2016 00:51
@TylerMoeller is it better to build a navbar with <div class="navbar"> ?
don't think the navbar was covered in the previous lessons
Tyler Moeller
@TylerMoeller
Dec 02 2016 00:52
@izanagichan Check out the bootstrap docs, they show you how to build all the different navbar styles: http://getbootstrap.com/components/#navbar
Jesus Hilario H.
@jesushilarioh
Dec 02 2016 00:52
Hello all. What is the difference between a <div> and a <section> and when should they best be used?
Tyler Moeller
@TylerMoeller
Dec 02 2016 00:55
@jesushilariohernandez It's hard to explain in a few words. a <section> is usually made up of <div> elements. You can read about it in detail in the HTML 5 Spec:
https://www.w3.org/TR/html5/grouping-content.html#the-div-element
https://www.w3.org/TR/html5/sections.html#the-section-element
Jesus Hilario H.
@jesushilarioh
Dec 02 2016 01:05
@TylerMoeller Thanks Tyler
CamperBot
@camperbot
Dec 02 2016 01:05
:star2: 1052 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
jesushilariohernandez sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Twitchy-Cake
@Twitchy-Cake
Dec 02 2016 01:11
I cant seem to center my bootstrap buttons, i've tried everything. What am i doing wrong? http://codepen.io/TwitchyCake/pen/yVppBL
Zaurbek Zhakupov
@zzhakupov
Dec 02 2016 01:19
Guys hello, can you please check my zipline simon game. I'll appreciate any feedback http://codepen.io/Zooll/pen/jVGozK
Tyler Moeller
@TylerMoeller
Dec 02 2016 01:23
@Twitchy-Cake They aren't centered because they are in 2 md-2 columns. There are 12 columns in a row, so they are taking up the first four columns on the left if that makes sense. Use grid offsets to put them in the center: https://getbootstrap.com/css/#grid-offsetting
Twitchy-Cake
@Twitchy-Cake
Dec 02 2016 01:32
@TylerMoeller Thanks bud, you're a lifesaver lol
CamperBot
@camperbot
Dec 02 2016 01:32
:star2: 1053 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
twitchy-cake sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
C
@engineerwithoutfear
Dec 02 2016 02:03
For the Twitch TV channel project, is there a preferred way to handle requesting information for multiple channels at once? Is there some way to request info from all the channels with a single request instead of multiple $.getJSON()s? http://codepen.io/engineerwithoutfear/pen/PbmKrR <---this for loop did not work as expected, lol
Mike Boardley
@Boardley
Dec 02 2016 02:45
I think it's cool your IDE in the lessons works like Sublime. Multiple cursors, highlighting and such.
dybbuk
@izanagichan
Dec 02 2016 03:08
I'm going to make the portfolio page. Just how are we 'graded' on this? I had a look at the example page and saw so much I didn't go over yet. What is expected, just that we follow the user stories?
Ellias
@Tron2097
Dec 02 2016 03:10
Hey guys i just finished my tribute page' i was hoping someone could take a look and give me any suggestions thanks. http://codepen.io/Tron2097/pen/QGMJML
Mike Boardley
@Boardley
Dec 02 2016 03:59
Are there any Senior Front End Devs in here?
juniorjb
@juniorjb
Dec 02 2016 04:05
how do i give my text input in my form a class
dybbuk
@izanagichan
Dec 02 2016 04:07
hey @Twitchy-Cake where did you find those awesome fonts?
Ken Haduch
@khaduch
Dec 02 2016 04:16
@juniorjb - depending on the exercise you're doing - <input type="text" class="className"> would do it?
@Boardley - what do you mean by "Senior Front End Devs"?
Ian Lee
@asparism
Dec 02 2016 04:34
http://codepen.io/Asparism/pen/ENNxBP?editors=0010 hey, does anyone know why the yellow bars in this codepen will shrink the first time the timer counts down, but won't shrink after the timer has been reset?
Ken Haduch
@khaduch
Dec 02 2016 05:01
@asparism - I'm just trying to sort out what your code is doing - I like the slider setting for the timers, that's cool! (Although it seems that you wouldn't want to make it go to zero?)
You might find it a little simpler to deal with the time values if you just store the countdown times in seconds, and just output to mm:ss as needed, it eliminates the complication of tracking minutes and seconds and the manipulation of them.
I think that you might not be resetting the whichBlock variable after you count down, although from what I see when I run the clock, only the first bar shrinks, and then nothing else happens with the bars? I set the timer to 1 minute for each phase. It seems to stop after the first bar. I haven't tried to debug what's going on there?
I hope that gives you a little something to go on? I'm going to be checking out for the night, good luck with your project!
Ian Lee
@asparism
Dec 02 2016 05:02
thanks @khaduch !
CamperBot
@camperbot
Dec 02 2016 05:02
asparism sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2022 | @khaduch |http://www.freecodecamp.com/khaduch
Frank Joseph
@frankmaayn
Dec 02 2016 06:19
hello guys
can i get some help
Sorin Ruse
@sorinr
Dec 02 2016 06:21
@frankmaayn hi. whats the problem?
Frank Joseph
@frankmaayn
Dec 02 2016 06:21
http://codepen.io/frankmaayn/pen/rWwEXJ?editors=1100 I'm working on this page, and I am having some trouble. What do you put so that the pictures, fonts, and characters will adjust to any screen size? I already included <head> <meta name="viewport" content="width=device-width, initial-scale=1></head>
When i click the page link on a phone.. all of the contents are smudge together; they don't adjust..
Coy Sanders
@coymeetsworld
Dec 02 2016 06:22
@frankmaayn try looking into media queries
or flexbox
Sorin Ruse
@sorinr
Dec 02 2016 06:24
@frankmaayn for the imgs use class="img-responsive" . for the fonts as @coymeetsworld said i would use media queries and make the font-size in em
Frank Joseph
@frankmaayn
Dec 02 2016 06:27
em?
Frank Joseph
@frankmaayn
Dec 02 2016 06:28
oh so it will adjust itself?
instead of a fixed size?
Frank Joseph
@frankmaayn
Dec 02 2016 06:36
nvm i know what it means now lol
Sorin Ruse
@sorinr
Dec 02 2016 06:37
@frankmaayn :+1:
@frankmaayn and try to move all the inline styling in the css panel of codepen. its much easier to read the styling for all page
Frank Joseph
@frankmaayn
Dec 02 2016 06:41
oh btw would i use "id" if i want one of the words to go directly to the content?
For example if i click on the word characters it will scroll down to the character section
because for the phone it might take a couple of scrolls just to get to one of the section
Sorin Ruse
@sorinr
Dec 02 2016 06:43
@frankmaayn yes. you can use in page links like: <a href="#characters"> and a <div id="characters"> to scroll to the section you want
Frank Joseph
@frankmaayn
Dec 02 2016 06:46
@sorinr thank you so much!! :D
CamperBot
@camperbot
Dec 02 2016 06:46
frankmaayn sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 877 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Dec 02 2016 06:47
@frankmaayn welcome
r u lol fan?
Frank Joseph
@frankmaayn
Dec 02 2016 06:51
@sorinr yes lol but i haven't been playing since my current laptop is a toaster and I'm waiting for an upgrade
Sorin Ruse
@sorinr
Dec 02 2016 06:51
@frankmaayn lol
Frank Joseph
@frankmaayn
Dec 02 2016 06:52
@sorinr i was making toast each game.. i couldn't handle lol
Sorin Ruse
@sorinr
Dec 02 2016 06:54
@frankmaayn my older son is a lol team coach
Frank Joseph
@frankmaayn
Dec 02 2016 06:58
@sorinr like professional? NA team?
Sorin Ruse
@sorinr
Dec 02 2016 07:02
@frankmaayn semi pro. they represented romania this year in jakarta
Frank Joseph
@frankmaayn
Dec 02 2016 07:06
@sorinr wait are you from europe?
Kirby James
@kirbygit
Dec 02 2016 07:26
anybody?
/giphy hi
Sorin Ruse
@sorinr
Dec 02 2016 07:29
@frankmaayn yep
Frank Joseph
@frankmaayn
Dec 02 2016 07:32
@sorinr thats so cool! i thought everyone here is from the US
Sorin Ruse
@sorinr
Dec 02 2016 07:33
@frankmaayn nope. there r fellows here from everywhere
Kirby James
@kirbygit
Dec 02 2016 07:36
I need help on updating
anybody use heroku/
Sorin Ruse
@sorinr
Dec 02 2016 07:36
@kboygit i can't help u with that
Kirby James
@kirbygit
Dec 02 2016 07:40
ok
Frank Joseph
@frankmaayn
Dec 02 2016 07:56
@sorinr hey sorin how would i change the background of a heading
like instead of a plain color i want to use an img as a background
Kirby James
@kirbygit
Dec 02 2016 08:06
hiy guys
question here
I figured out a problem instead of putting down background inside a class
i put it inside the element that I wanted to
and worked
but inside the class it wont work
Sorin Ruse
@sorinr
Dec 02 2016 08:10
@frankmaayn in css add the appropriate selector and and use background-image property
Kirby James
@kirbygit
Dec 02 2016 08:14
but it will not respond or update when I deploy it to heroku
Frank Joseph
@frankmaayn
Dec 02 2016 08:15
@sorinr what do you mean by selector?
Sorin Ruse
@sorinr
Dec 02 2016 08:15
@frankmaayn the html element for witch you want to apply that background-image
Kirby James
@kirbygit
Dec 02 2016 08:17
ok
heres my app
Frank Joseph
@frankmaayn
Dec 02 2016 08:17
@sorinr the element is h1
Kirby James
@kirbygit
Dec 02 2016 08:18
the image above rapollo events
@frankmaayn
h1 {
background-image: url ( path to your images you download the image );
}
@sorinr anyways the image above rapollo events thats the image I unput the background
Frank Joseph
@frankmaayn
Dec 02 2016 08:20
i did that but it still wont show
Kirby James
@kirbygit
Dec 02 2016 08:21
post your code here
Kirby James
@kirbygit
Dec 02 2016 08:22
or just add <h1><img src=" http://na.leagueoflegends.com/sites/default/files/upload/art/akali_vs_baron_3.jpg" alt="LOL"></h1>
Sorin Ruse
@sorinr
Dec 02 2016 08:24
@frankmaayn take a look: example
Frank Joseph
@frankmaayn
Dec 02 2016 08:25
ohh so that's what i was missing lol
Kirby James
@kirbygit
Dec 02 2016 08:25
@frankmaayn what did you miss
RakeshNerkar
@Rakesh18754
Dec 02 2016 08:26
I am triggerring an ajax call...which is getting executed successfully the chrome
dev tools show's status code 200
but the no response is recieved...any help on this?
Frank Joseph
@frankmaayn
Dec 02 2016 08:26
the url()
Sorin Ruse
@sorinr
Dec 02 2016 08:27
@frankmaayn move all your inline style to codepen css panel
Frank Joseph
@frankmaayn
Dec 02 2016 08:27
i just included the url and forgot about the "url()"
Kirby James
@kirbygit
Dec 02 2016 08:28
ok
so am I right?
Frank Joseph
@frankmaayn
Dec 02 2016 08:31
yea
Kirby James
@kirbygit
Dec 02 2016 08:32
awesome
Frank Joseph
@frankmaayn
Dec 02 2016 08:32
thanks
guys
Kirby James
@kirbygit
Dec 02 2016 08:33
question where are you studying at now for computer science
Frank Joseph
@frankmaayn
Dec 02 2016 08:34
im barely starting
sorry im new at this
Kirby James
@kirbygit
Dec 02 2016 08:35
where you studying at now in LA
Frank Joseph
@frankmaayn
Dec 02 2016 08:35
COC
Kirby James
@kirbygit
Dec 02 2016 08:39
college of canyons?
are you fil-am?
Aleksey
@Xaz16
Dec 02 2016 08:43

Hello, mates!
I just trying initialize some odometer here http://codepen.io/Xaz16/pen/oYpaqr

http://github.hubspot.com/odometer/ -- docs

From my function InitDepos
And from copy-paste code from docs.
But nothing is work.
On my project have error :
"Uncaught TypeError: Cannot read property 'odometer' of null(…)"

Frank Joseph
@frankmaayn
Dec 02 2016 08:44
@kboygit yes lol is this like an interrogation xD
Aleksey
@Xaz16
Dec 02 2016 08:44
i think i can't call constructor function "Odometer" in function InitDepos
Kirby James
@kirbygit
Dec 02 2016 08:47
@frankmaayn no man :D i wanted to network to filams
Frank Joseph
@frankmaayn
Dec 02 2016 08:53
@kboygit oh LOl r u filam?
Sorin Ruse
@sorinr
Dec 02 2016 08:53
@Xaz16 you have this in js: document.querySelector('#odometer'.... where is that element with the id="odometer" ?
Kirby James
@kirbygit
Dec 02 2016 08:55
yea
@frankmaayn I messaged you
lets not make this room a chat room
Aleksey
@Xaz16
Dec 02 2016 08:55
@sorinr on html <div id="odometer50"></div>. In js #odometer + odometer.id
Sorin Ruse
@sorinr
Dec 02 2016 08:56
@Xaz16 then odometer50 not #odometer
Frank Joseph
@frankmaayn
Dec 02 2016 08:57
@kboygit im new to this.. how do i check the message
Sorin Ruse
@sorinr
Dec 02 2016 08:58
@Xaz16 sorry. didn't see you r adding also the id
Frank Joseph
@frankmaayn
Dec 02 2016 08:59
@kboygit how do you open one to one convo lol I'm clicking on the message but it wont open up
Sorin Ruse
@sorinr
Dec 02 2016 09:02
@Xaz16 in the console you get an error that odometer is not defined. its something wrong within your function initDepos
Kirby James
@kirbygit
Dec 02 2016 09:02
double click it
@frankmaayn
Aleksey
@Xaz16
Dec 02 2016 09:13
i have done this, thanks all
Sorin Ruse
@sorinr
Dec 02 2016 09:18
@Xaz16 :+1:
shameem fairooz
@sfshameem5
Dec 02 2016 09:59
Hey guys, I'm having a problem.
I'm unable to edit the last part of the code in the editor.
This is the page line-up-form-elements-responsively-with-bootstrap
Coy Sanders
@coymeetsworld
Dec 02 2016 10:12
try expanding the browser window to whole screen @sfshameem5
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 02 2016 10:18
Uhm..... just wanted to ask how this is turning out ?? is it good enough ?? https://mr-kumar-abhishek.github.io/my-portfolio/
kirbyedy
@kirbyedy
Dec 02 2016 10:20
@Mr-Kumar-Abhishek :thumbsup:
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 02 2016 10:21
thanks ! :D @kirbyedy
CamperBot
@camperbot
Dec 02 2016 10:21
mr-kumar-abhishek sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1609 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
shameem fairooz
@sfshameem5
Dec 02 2016 10:24
@coymeetsworld I did expand to the whole screen, but the same problem persists.
Coy Sanders
@coymeetsworld
Dec 02 2016 10:25
try refreshing your browser too @sfshameem5, if that doesn't work you should still be able to type into the editor it'll just look weird where the cursor is placed i believe, ive seen this happen before
shameem fairooz
@sfshameem5
Dec 02 2016 10:25
@coymeetsworld I tried refreshing, signing out, and in two browsers. It didn't work.
Coy Sanders
@coymeetsworld
Dec 02 2016 10:27
try clicking at the end, then hitting space
my cursor went to the end
shameem fairooz
@sfshameem5
Dec 02 2016 10:28
2
Bogdan Paliy
@bpalij
Dec 02 2016 10:28
Can i load own json file to codepen?
shameem fairooz
@sfshameem5
Dec 02 2016 10:28
@coymeetsworld WIll try and let you know. Thanks.
CamperBot
@camperbot
Dec 02 2016 10:28
sfshameem5 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1569 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Coy Sanders
@coymeetsworld
Dec 02 2016 10:28
np @sfshameem5 i see what youre seeing, but im able to get to the end
i will be logging off though its 2am here
@bpalij yes as long as you host the json file somewhere
or maybe embed it into the JS file, never tried that before
Sorin Ruse
@sorinr
Dec 02 2016 11:45
@bpalij you can just make a var myjson = {your json data in here} and work on it
Ivo Tsolov
@ivoTsolov
Dec 02 2016 11:55
hello guys
i need help for something i am stuck with
so basicly i have this website ldmalta.com and the main gallery is working fine on google Chrome
but it doesnt in fire fox
the strage thing is it runs on my pc fine on fire fox
but it doesnt when put in wordpress theme
Bogdan Paliy
@bpalij
Dec 02 2016 13:43
How to add twitter button to random quote machine?
Jhony Alberto Grillet Medina
@ChinuxParibus
Dec 02 2016 13:55
@ivoTsolov you checked the version?
therightlayne
@therightlayne
Dec 02 2016 14:15
@Byzgig Yes, I tried it several times.
Amy Walters
@codecampamy
Dec 02 2016 14:21
Hey all, I am coding my Personal Portfolio webpage. I have used a bootstrap template and plan to switch out different parts of the format/arrangement to suit my needs. The problem I am currently having is putting an image in the timeline. The image I'm importing from cloudinary doesn't take up the whole circle? Any ideas why that might be? After I've got what I want laid out I plan to build it again using only html no bootstrap. I appreciate that's maybe not how some of you would go about it but it makes sense to me and the way that I learn. Anyway here's the pen, any ideas, I'd be very grateful if you could take a look. Thanks http://codepen.io/codecampamy/pen/gLRqGv
Jerry Purvis
@MessiaHack
Dec 02 2016 14:22
@ivoTsolov what's the issue?
@codecampamy are you referring to the water picture?
Jerry Purvis
@MessiaHack
Dec 02 2016 14:29
@codecampamy try manipulating the img-circle class in css
Ken Haduch
@khaduch
Dec 02 2016 14:31
@codecampamy - the img-circle class gives a 50% border-radius. That image is rectangular, so it becomes elliptical in shape.
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 02 2016 14:36
@codecampamy keep the height and width of the image same either via css or by editing the image ~
@codecampamy also.... a better way would be to add css class with img tag rather than div tags for cutting it off ... and also to give borders etc...
Amy Walters
@codecampamy
Dec 02 2016 14:45
@MessiaHack @khaduch @Mr-Kumar-Abhishek I am trying all of this out now - will let you know how I get on... thank you!
CamperBot
@camperbot
Dec 02 2016 14:45
codecampamy sends brownie points to @messiahack and @khaduch and @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
:cookie: 126 | @messiahack |http://www.freecodecamp.com/messiahack
:cookie: 408 | @mr-kumar-abhishek |http://www.freecodecamp.com/mr-kumar-abhishek
:star2: 2023 | @khaduch |http://www.freecodecamp.com/khaduch
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 02 2016 14:46
@codecampamy you could also look at my portfolio for getting an example of cutting of images ~ https://mr-kumar-abhishek.github.io/my-portfolio/
Gniewoszu
@Gniewoszu
Dec 02 2016 15:18
any ideas how to make better flash animation ???
http://s.codepen.io/Magiczny/debug/pNpWbw
Ken Haduch
@khaduch
Dec 02 2016 15:33
@codecampamy - if you aren't familiar with the css-tricks website - that's a good one to use for all kinds of CSS "tricks" - https://css-tricks.com/ - like this article https://css-tricks.com/clipping-masking-css/ - good luck with the project!
Griffith09
@Griffith09
Dec 02 2016 15:34
Hi everyone
Sorin Ruse
@sorinr
Dec 02 2016 15:49
@codecampamy cloudinary have a lot of image manipulation that you can use. just read http://cloudinary.com/features their docs and try what is best suited for your project
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 02 2016 15:55
@sorinr it is the first time I am looking at cloudinary .. or else I wouldn't have put images in git revision control ~ :/
Sorin Ruse
@sorinr
Dec 02 2016 15:59
@Mr-Kumar-Abhishek they have some really nice img manipulation you can do by url.
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 02 2016 16:01
@sorinr yes I am signing up and checking them out :)
Ivo Tsolov
@ivoTsolov
Dec 02 2016 16:05
hello guys i am stuck on something for 3 days and i cant find the problem, anyone who has build slideshows before wanna give me a hand?
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 02 2016 16:05
@sorinr I was using image magik from command line before for image manipulation
why am not getting anything?
Chris
@bestintown23
Dec 02 2016 16:24
how can i make the background spaces on my page different images ? http://codepen.io/bestintown23/pen/woPMBV?editors=1000
Sorin Ruse
@sorinr
Dec 02 2016 16:28
@bestintown23 who is that 'bob' ?
Chris
@bestintown23
Dec 02 2016 16:36
@sorinr im sorry what do you mean?
Robert Purcea
@RobertPurcea
Dec 02 2016 16:56
anything I should add to the functionality before doing the graphics?
it's the calculator btw
Sorin Ruse
@sorinr
Dec 02 2016 17:00
@bestintown23 you have in your code: var wikiURL = 'https://en.wikipedia.org/w/api.php?action=query&list=search&format=json&srsearch=' + bob;
Chris
@bestintown23
Dec 02 2016 17:04
@sorinr i think you have the wrong person that is no where in my code
Brandon
@bd1887
Dec 02 2016 17:05
Hi guys. I'm having a frustrating problem with the Simon project. I have a timeout function cycling through an array of randomly generated numbers. As it gets to each number, it lights up a different color. The problem I'm having is it rushes through the first 1 or 2 colors before properly timing the rest of the colors, and I can't figure out where to put my timeout function to fix this. Here's my code:
http://codepen.io/bd1887/pen/qqpvzR?editors=0111
If you push the "start" button, it will start cycling through the colors
Sorin Ruse
@sorinr
Dec 02 2016 17:10
@bestintown23 yep. sorry. this one was for @jyapujuju
Sorin Ruse
@sorinr
Dec 02 2016 17:43
@bd1887 i would use on mouseup instead of mousedown
iehab91
@iehab91
Dec 02 2016 17:52
hi
Tyler Moeller
@TylerMoeller
Dec 02 2016 17:58

@bestintown23 To expand on what I was talking about yesterday with adding sections, remove your 800px margin-top from your CSS for all of your sections. Use min-height to specify how big you want each section to be. Add more sections as needed. You can apply a background image to individual sections or place <img> tags inside each section to display different images. A basic outline could be:

<header>
  <nav></nav>
</header>
<main>
  <section id="about"></section>
  <section id="first-image-section"></section>
  <section id="portfolio"></section>
  <section id="second-image-section"></section>
  <section id="contact"></section>
</main>
<footer></footer>

This is a more detailed description of how to set it all up: http://blog.teamtreehouse.com/use-html5-sectioning-elements

Dylan Murphy
@dmurphy5
Dec 02 2016 18:10
Hey guys, I already posted this in the forum, but I'm having trouble figuring out why my divs that are nested inside others go all over the place on mobile. https://codepen.io/dylanmurphy/pen/LbeeOQ
Chris
@bestintown23
Dec 02 2016 18:13
@TylerMoeller ill give it a shot thanks
CamperBot
@camperbot
Dec 02 2016 18:13
bestintown23 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1054 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
"game development" is shows vry big in phone scr but its nice in desktop. help !
Tyler Moeller
@TylerMoeller
Dec 02 2016 18:15
@dmurphy5 Bootstrap grid requires a div with a container class, then another div with a row class inside of that, followed by more divs with up to 12 columns inside each row. Your elements are jumping around because you have set up a div as both a container and a row with more than 12 columns inside of that.
<div class="container">
  <div class="row">
    <div class="col-xs-4"></div>
    <div class="col-xs-4"></div>
    <div class="col-xs-4"></div>
  </div>
</div>
Dylan Murphy
@dmurphy5
Dec 02 2016 18:16
@TylerMoeller That makes sense. I saw that on some other pages and I thought it was redundant.
Tyler Moeller
@TylerMoeller
Dec 02 2016 18:17
It can get ugly, but it's required to structure it that way. Lots of other options / examples here: https://getbootstrap.com/css/#grid
Luca Cras
@LucaCras
Dec 02 2016 18:38
How do I add an API? for the random quote machine
Joel
@okmarq
Dec 02 2016 18:46
i cant seem to get a view of the photo whose i link i pasted in my html why is that
Brandon
@bd1887
Dec 02 2016 18:46
@sorinr Ok but that doesn't seem to fix the problem
Mustapha Afkir
@afkir01
Dec 02 2016 18:47
@okmarq do you have s code snippet/
Joel
@okmarq
Dec 02 2016 18:48
i don't even know what that is?
Tyler Moeller
@TylerMoeller
Dec 02 2016 18:48
@LucaCras This article shows you how to use one of the many APIs out there - lots of other options, but this should help you get started: https://css-tricks.com/using-the-wp-api-to-fetch-posts/
Mustapha Afkir
@afkir01
Dec 02 2016 18:48
can you show your code
Joel
@okmarq
Dec 02 2016 18:49

<img src="https://drive.google.com/file/d/0BwyKgj0mADzQQzBOMlRpZUJDVVU/view?usp=sharing" alt="Life">

<h2>life</h2>

Mustapha Afkir
@afkir01
Dec 02 2016 18:51
seem to work fine
do you have the img tag nested in another tag?
Joel
@okmarq
Dec 02 2016 18:51
no
the photo worked?
Mustapha Afkir
@afkir01
Dec 02 2016 18:51
yes
Joel
@okmarq
Dec 02 2016 18:52
okay then what am i doing wrong
Tyler Moeller
@TylerMoeller
Dec 02 2016 18:52
You are linking to the page with the image, not the image itself
Sorin Ruse
@sorinr
Dec 02 2016 18:53
@bd1887 it seems u haven't changed anything to ur pen
Joel
@okmarq
Dec 02 2016 18:53
how did you get the source url
Tyler Moeller
@TylerMoeller
Dec 02 2016 18:53
Right-click the image and select "Copy Image Address" (In Google Chrome)
Or view the page source to find the URL
Mustapha Afkir
@afkir01
Dec 02 2016 18:53
yes that did it for me
Joel
@okmarq
Dec 02 2016 18:53
okay thanks
Joshua Berger
@onewebdeveloper
Dec 02 2016 18:57
Does the Tribute Page assignment require us to use strictly Bootstrap an NO CSS? With the exception of the margin-top as pointed out in the instructions.
Sorin Ruse
@sorinr
Dec 02 2016 18:58
@onewebdeveloper nope. u can do it whatever u want
Joshua Berger
@onewebdeveloper
Dec 02 2016 18:59
@sorinr Thanks.
CamperBot
@camperbot
Dec 02 2016 18:59
onewebdeveloper sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 879 | @sorinr |http://www.freecodecamp.com/sorinr
Ryan Uselmann
@SiriusScaper
Dec 02 2016 18:59
Hello all
Sorin Ruse
@sorinr
Dec 02 2016 19:04
@onewebdeveloper welcome
James Gusty
@Duruzican
Dec 02 2016 19:19
has anyone else found out how to make API calls from CodePen. I've removed 's' from 'https://' and that is not working
also, checked the forums and found that disabling adblockers helps but i also have mine disabled and it is not working with that either. no calls getting through to any apis
Tyler Moeller
@TylerMoeller
Dec 02 2016 19:21
@Duruzican It should work - are there any errors in your browser's console? (Ctrl+Shift+J)
Replace Ctrl with Command if on a Mac
James Gusty
@Duruzican
Dec 02 2016 19:23
it is telling me that document.ready is not a function
nvm... forgot my $
Tyler Moeller
@TylerMoeller
Dec 02 2016 19:24
@Duruzican $(document).ready(function(){ not (document).ready(function(){
James Gusty
@Duruzican
Dec 02 2016 19:24
wow lol
Tyler Moeller
@TylerMoeller
Dec 02 2016 19:24
:)
James Gusty
@Duruzican
Dec 02 2016 19:24
thanks @TylerMoeller
CamperBot
@camperbot
Dec 02 2016 19:24
duruzican sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1055 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Carlos
@clockwerkz
Dec 02 2016 19:31
@Duruzican Which project are you working on?
iehab91
@iehab91
Dec 02 2016 19:31

@TylerMoeller
https://codepen.io/iehab91/pen/aByaWa?editors=1000

that's perfect for both but, there's a deference between first img and both imgs.
am I doing the grid system correctly ?
btw, in phone screen all r same size

James Gusty
@Duruzican
Dec 02 2016 19:32
@clockwerkz I am working on the Show the Local Weather, I've got it working now
Carlos
@clockwerkz
Dec 02 2016 19:33
@Duruzican I'm having a similar issue with using the API. My code works fine locally, but when I upload it to codepen.io it's not working.
James Gusty
@Duruzican
Dec 02 2016 19:35
@clockwerkz So there are two things to check; if you have an adblocker, disable it for now or add codepen to the exceptions list; also go up to your browser's url bar and make sure you are loading codepen in http:// not https://
i was never told to look out for this until yesterday, so that was extremely frustrating trying to get things to work
unless you are failing to get your geolocation data, that is a different issue having to do with chrome
Carlos
@clockwerkz
Dec 02 2016 19:38
@Duruzican It's getting the geolocation, I tested for that. It doesn't prompt me to allow access through the codepen tho.. when I run it locally it prompts me
James Gusty
@Duruzican
Dec 02 2016 19:38
yeah, it would not prompt me either, are you using chrome?
Carlos
@clockwerkz
Dec 02 2016 19:38
Yup
let me see if I can link it.. I'm trying to "piece" it back together haha.
James Gusty
@Duruzican
Dec 02 2016 19:39
i think it has to do with the last few updates and chromes allowance of unsecured protocols, currently havent found a workaround to that yet other than just removing the 's' in https although that is not recommended
You can see there's a message about getPosition and watchPosition in the dev console there
So when I switch to https, I don't get that but I get other issues.
James Gusty
@Duruzican
Dec 02 2016 19:43
yeah, you need to get your geolocation from a different source, like the api i listed above, Chrome 50 update prevents apps from collecting geolocation data using that function. That was a specific problem i ran into. If you change that, your app should work
it has to do with the navigator function your are using
Carlos
@clockwerkz
Dec 02 2016 19:44
ahh
Which api did you mention? I scrolled up but I don't see it..
James Gusty
@Duruzican
Dec 02 2016 19:46
Carlos
@clockwerkz
Dec 02 2016 19:46
ahh nice, cool.. let me try that!
James Gusty
@Duruzican
Dec 02 2016 19:46
let me know how it works out
Carlos
@clockwerkz
Dec 02 2016 19:47
Yup, gonna try it out right now :)
afani martin
@whiz25
Dec 02 2016 19:51
my code isn't showing the current status of freecodecamp.com on twitch.tv
tommy
@tommygebru
Dec 02 2016 20:18
I have a question for the same project why are only two images displayed on the streamers list??
http://codepen.io/gebrutommy/pen/WoMvyj?editors=0011
Its not showing the offline streamers now...

@whiz25 use this instead

UPDATE: Due to a change in conditions on API usage explained here Twitch.tv now requires an API key, but we've built a workaround. Use https://wind-bow.hyperdev.space/twitch-api instead of twitch's API base URL (i.e. https://api.twitch.tv/kraken ) and you'll still be able to get account information, without needing to sign up for an API key.

tommy
@tommygebru
Dec 02 2016 20:23
^^^^^^^^^^^ This is Objective 10 , from the twitch project page https://www.freecodecamp.com/challenges/use-the-twitchtv-json-api
alpox
@alpox
Dec 02 2016 20:36
@tommygebru Guess the other names in the streamer list are not accessible at all (No account anymore) So they don't show up in the success callback. They instead enter the error callback. You gotta handle that one
Homer Allen
@homerallen
Dec 02 2016 20:37
Question: I'm wrapping up my Twitch project. Even though I traverse the array of users in order, my listings of users/statuses populates in a different order every time I refresh. At first, I thought this was because of the asynchronous nature of ajax. However, I set async to false and it still populates in a different order. Sometimes, listings don't even show up. (This fails to meet one of the user stories that we must (always) be able to see if freecodecamp is streaming.) Any ideas? http://codepen.io/HomerAllen/pen/NbyqZv
@tommygebru Let me take a look
@tommygebru ah, ok, it looks like you got it solved
tommy
@tommygebru
Dec 02 2016 20:45
@alpox Nice I shall make a message for that :smile:
Doneal Bercier
@donealbercier
Dec 02 2016 20:55
I need help with my Wikipedia website. I'm almost completly lost in the API documentation. I'm not sure exactly how to use it. Any help would be really appreciated
Waqas Abbasi
@Waqas909
Dec 02 2016 20:57
Hello, Can someone tell me why Clikcing the yellow box doesnt expand the search bar?
https://codepen.io/Waqas909/pen/yVooZE
Homer Allen
@homerallen
Dec 02 2016 20:58
@donealbercier Yeah, it's a bit more complex then the openweatherapi isn't it? I had to stare at the documentation for awhile an play with it and do some searches.
Stipica
@Stivis
Dec 02 2016 20:59
@donealbercier YEAH, it's kinda tricky, documentation is poorly written . do you have anything
James Moore
@James-N-M
Dec 02 2016 21:00
https://raw.githubusercontent.com/dariusk/corpora/master/data/games/jeopardy_questions.json hey guys.... how would i use this JSON file in my code pen
Waqas Abbasi
@Waqas909
Dec 02 2016 21:03
@James-N-M
$.getJSON( (link) , function(data){
//What you want to do with the JSON you just got
});
Doneal Bercier
@donealbercier
Dec 02 2016 21:06
@Stivis So far I'm kind of rereading the main page hoping to get some inspiration lol. I'm just wondering how to get the right information
@homerallen Haha waay more complex. And yea thats what I'm doing
Waqas Abbasi
@Waqas909
Dec 02 2016 21:07

@donealbercier

i found this

//https://en.wikipedia.org/w/api.php?action=opensearch&limit=10&format=json&callback=portalOpensearchCallback&search=

anything u put after search= shows possible search results

James Moore
@James-N-M
Dec 02 2016 21:08
@Waqas909 https://github.com/dariusk/corpora/blob/master/data/games/jeopardy_questions.json how could i write that with this ?? Can you type it up for me just so i have a refference
Waqas Abbasi
@Waqas909
Dec 02 2016 21:08
@donealbercier not sure if it's the right one, but give it a try
Doneal Bercier
@donealbercier
Dec 02 2016 21:08
I tried it. Not sure if its working its giving me an error
@homerallen Yea I'm using it right now. This is gonna take me a few hours to get down I'm sure
@Waqas909 Alright I removed https: and its working now thank you
CamperBot
@camperbot
Dec 02 2016 21:10
donealbercier sends brownie points to @waqas909 :sparkles: :thumbsup: :sparkles:
:cookie: 271 | @waqas909 |http://www.freecodecamp.com/waqas909
Waqas Abbasi
@Waqas909
Dec 02 2016 21:12

@James-N-M
~~~
$.getJSON('https://raw.githubusercontent.com/dariusk/corpora/master/data/games/jeopardy_questions.json', function(data){

$('p').text(data.description); // puts the description property from the JSON file in the <paragraph> element

})

@James-N-M
$.getJSON('https://raw.githubusercontent.com/dariusk/corpora/master/data/games/jeopardy_questions.json', function(data){

  $('p').text(data.description); // puts the description property from the JSON file in the <paragraph> element

})
try it, make sure you have a <p> </p> element in your html first
Nvm guys, I got it to work. Had a syntax error i think
James Moore
@James-N-M
Dec 02 2016 21:19
@Waqas909 Unreal thank you !
CamperBot
@camperbot
Dec 02 2016 21:19
james-n-m sends brownie points to @waqas909 :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @waqas909 |http://www.freecodecamp.com/waqas909
James Moore
@James-N-M
Dec 02 2016 21:20
@Waqas909 I forgot to add jquery in my javascript file LOL my bad got emm though
Doneal Bercier
@donealbercier
Dec 02 2016 21:28
Alright so I am once again confused at why my API request isn't working. The link seems to work just fine on its own but not on my website. http://codepen.io/donealbercier/pen/PbQPqp?editors=1111
eternal september
@spieg
Dec 02 2016 21:41
Doneal Bercier
@donealbercier
Dec 02 2016 21:43
@spieg Thank you Mr.Magician lol. I was getting very frustrated
CamperBot
@camperbot
Dec 02 2016 21:43
donealbercier sends brownie points to @spieg :sparkles: :thumbsup: :sparkles:
:cookie: 263 | @spieg |http://www.freecodecamp.com/spieg
Emmanuel
@chriemma
Dec 02 2016 21:48
Can someone tell me how i can host my site on github
aRtoo
@artoodeeto
Dec 02 2016 22:07
hi guys how do you require a user to input a data?? do you need if else for that?? or some kind of javascsript magic
Michael Davis
@mhdavis
Dec 02 2016 22:10
anyone here do the twitch api zipline yet?
zKruki
@zKruki
Dec 02 2016 22:34
Can someone help me?
tommy
@tommygebru
Dec 02 2016 22:35
LOL does anyone else see that my icon is not working?
http://codepen.io/gebrutommy/pen/LbQGBQ?editors=1101
look at the STREAMERS there should be a down arrow
Waqas Abbasi
@Waqas909
Dec 02 2016 22:35

https://codepen.io/Waqas909/pen/yVooZE

2 Questions:

1- How do i expand my search bar from both sides, instead of just the right side, when clicked on.
2- Why does the transition not work when i focus the search bar

Tyler Moeller
@TylerMoeller
Dec 02 2016 22:37
@homerallen To avoid the need of setting async: false, loop through the array with a callback. .map() is a good way to do it:
arrayOfUsers.map(function(user, i) { })
tommy
@tommygebru
Dec 02 2016 22:38
@chriemma there is a room on gitter
Homer Allen
@homerallen
Dec 02 2016 22:39
@TylerMoeller Thanks! aync: false didn't work anyway so what I ended up doing, maybe more complex than using map, was I used recursion: http://codepen.io/HomerAllen/pen/NbyqZv
CamperBot
@camperbot
Dec 02 2016 22:39
homerallen sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1056 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Doneal Bercier
@donealbercier
Dec 02 2016 22:40
@Waqas909 You should use both the -webkit:transition and -webkit:transformation methods
Tyler Moeller
@TylerMoeller
Dec 02 2016 22:41
@homerallen That's a clever workaround ;)
Doneal Bercier
@donealbercier
Dec 02 2016 22:41
@Waqas909 I did the same thing on my site http://codepen.io/donealbercier/pen/PbQPqp
Homer Allen
@homerallen
Dec 02 2016 22:41
@TylerMoeller Thanks Tyler, so is map! Very interesting!
CamperBot
@camperbot
Dec 02 2016 22:41
:warning: homerallen already gave tylermoeller points
homerallen sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
tommy
@tommygebru
Dec 02 2016 22:42
@mhdavis @zKruki did you have questions?
Waqas Abbasi
@Waqas909
Dec 02 2016 22:43
@donealbercier Can u explain to me what they are?
@donealbercier Thanks!
CamperBot
@camperbot
Dec 02 2016 22:43
waqas909 sends brownie points to @donealbercier :sparkles: :thumbsup: :sparkles:
:cookie: 264 | @donealbercier |http://www.freecodecamp.com/donealbercier
Michael Davis
@mhdavis
Dec 02 2016 22:44
@tommygebru yea i actually have a few in terms of accessing the json files for streamers
zKruki
@zKruki
Dec 02 2016 22:44
@tommygebru Im having a problem with media queries. my columns won't clear floats at the desired device width
Tyler Moeller
@TylerMoeller
Dec 02 2016 22:45

@Waqas909 You could remove the fixed positioning and center it by using a top margin with auto left/right margins:

input[type="text"]{
  background-image: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-128.png'); 
  background-position: 96% 5px; 
  background-repeat: no-repeat;
  padding: 0px 40px 0px 10px;
  background-size: 25px 25px;
  width: 200px;
  border-radius: 6px;
  transition: width 1s;
  margin: 20vh auto 0;
}

Now when you put focus on the textbox, it stays centered.

tommy
@tommygebru
Dec 02 2016 22:45
@mhdavis I am using a different api call
UPDATE: Due to a change in conditions on API usage explained here Twitch.tv now requires an API key, but we've built a workaround. Use https://wind-bow.hyperdev.space/twitch-api instead of twitch's API base URL (i.e. https://api.twitch.tv/kraken ) and you'll still be able to get account information, without needing to sign up for an API key.
Michael Davis
@mhdavis
Dec 02 2016 22:46
@tommygebru it's not the kraken one i take it
yea
tommy
@tommygebru
Dec 02 2016 22:46
yeah it works fine
check out my codepen
@zKruki are you using floats in your code?
Waqas Abbasi
@Waqas909
Dec 02 2016 22:47
@TylerMoeller Thanks That fixed it, however when I focus it, it doesnt apply the transition, it instantly changes the width
CamperBot
@camperbot
Dec 02 2016 22:47
waqas909 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Doneal Bercier
@donealbercier
Dec 02 2016 22:47
@Waqas909 No Problem
CamperBot
@camperbot
Dec 02 2016 22:47
:star2: 1057 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Dec 02 2016 22:47
@Waqas909 I didn't notice that, hmmm, I'll take a closer look
Michael Davis
@mhdavis
Dec 02 2016 22:48
@tommygebru cool i was trying to find an example of the composition for the api call
Doneal Bercier
@donealbercier
Dec 02 2016 22:49

@Waqas909 Set the desired width in the input:focus{} element and the transition in the input type

`

-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;

`

zKruki
@zKruki
Dec 02 2016 22:49

@tommygebru ```body {
background-color: gray;
margin: 0;
padding: 0;
border: 0;
}
h4{
padding: 25px;
}
h1{
text-align: center;

}
.colummns:after{
content="";
display: block;
clear: both;
}
.content1:after{
content="";
display: block;
clear: both;
}
.content2:after{
content="";
display: block;
clear: both;
}
.content3:after{
content="";
display: block;
clear: both;
}
.contact:after{
content="";
display: block;
clear: both;
}
section, aside{
float:left;
width:48%;
padding: 1%;
margin: 1%;

}

img{
width:100%;
margin-right: 0;
padding: 0;
}
.content1{
float: left;
background-color: red;
width: 48%;
padding: 1%;
margin: 1%;
}
.img1{
float:;
width:;
margin:;
padding:;
}
.img2{

}

.content2{
float: left;
width: 48%;
padding: 1%;
margin: 1%;
background-color: blue;}
.content3{
float: left;
width: 48%;
padding: 1%;
margin: 1%;
background-color: green;
}
.forms{
background-color: green;
float: right;
width: 48%;
margin: 1%;
padding: 1%;
}
.closingnote{
background-color: green;
float: right;
width: 48%;
margin: 1%;
padding: 1%;

}
.foot-left{
float: left;
width: 48%;
padding: 1%;
margin: 1%;

background-color: teal;
}
.foot-right{
width: 48%;
padding: 1%;
margin: 1%;
float: left;
background-color: teal;

}
.copyright{
text-align: center;

}
.test{
border-style: solid;
border-size: 1px;
margin-top: 1px;
}
/ Media Queries /
@screen and(max-width: 766px){
section, aside{
float:none;
clear:left;
width:100%;
}

}

@screen and (max-width: 766px){

test{

background-color: red;

}
}

Michael Davis
@mhdavis
Dec 02 2016 22:49
@tommygebru have you tried creating links for your streamers yet? one thing ive seen reoccurring is that the links to take the user to the stream are busted for most folks
Tyler Moeller
@TylerMoeller
Dec 02 2016 22:49
@Waqas909 Transition needs to be added to the :focus as well:
input[type="text"]{
  background-image: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-128.png'); 
  background-position: 96% 5px; 
  background-repeat: no-repeat;
  padding: 0px 40px 0px 10px;
  background-size: 25px 25px;
  width: 200px;
  border-radius: 6px;
  margin: 20vh auto 0;
  transition: width 1s;
}

input[type="text"]:focus{
  width: 500px;
  transition: width 1s;
}
zKruki
@zKruki
Dec 02 2016 22:50

```body {
background-color: gray;
margin: 0;
padding: 0;
border: 0;
}
h4{
padding: 25px;
}
h1{
text-align: center;

}
.colummns:after{
content="";
display: block;
clear: both;
}
.content1:after{
content="";
display: block;
clear: both;
}
.content2:after{
content="";
display: block;
clear: both;
}
.content3:after{
content="";
display: block;
clear: both;
}
.contact:after{
content="";
display: block;
clear: both;
}
section, aside{
float:left;
width:48%;
padding: 1%;
margin: 1%;

}

img{
width:100%;
margin-right: 0;
padding: 0;
}
.content1{
float: left;
background-color: red;
width: 48%;
padding: 1%;
margin: 1%;
}
.img1{
float:;
width:;
margin:;
padding:;
}
.img2{

}

.content2{
float: left;
width: 48%;
padding: 1%;
margin: 1%;
background-color: blue;}
.content3{
float: left;
width: 48%;
padding: 1%;
margin: 1%;
background-color: green;
}
.forms{
background-color: green;
float: right;
width: 48%;
margin: 1%;
padding: 1%;
}
.closingnote{
background-color: green;
float: right;
width: 48%;
margin: 1%;
padding: 1%;

}
.foot-left{
float: left;
width: 48%;
padding: 1%;
margin: 1%;

background-color: teal;
}
.foot-right{
width: 48%;
padding: 1%;
margin: 1%;
float: left;
background-color: teal;

}
.copyright{
text-align: center;

}
.test{
border-style: solid;
border-size: 1px;
margin-top: 1px;
}
/ Media Queries /
@screen and(max-width: 766px){
section, aside{
float:none;
clear:left;
width:100%;
}

}

@screen and (max-width: 766px){

test{

background-color: red;

}
}
```

tommy
@tommygebru
Dec 02 2016 22:50
@mhdavis not yet im still trying to figure out the layout a little bit
Waqas Abbasi
@Waqas909
Dec 02 2016 22:50
@donealbercier Thanks
@TylerMoeller That fixed it!
CamperBot
@camperbot
Dec 02 2016 22:50
waqas909 sends brownie points to @donealbercier and @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: waqas909 already gave tylermoeller points
:warning: waqas909 already gave donealbercier points
tommy
@tommygebru
Dec 02 2016 22:50
@zKruki do you have a codepen instead?
zKruki
@zKruki
Dec 02 2016 22:51
@tommygebru yes
Tyler Moeller
@TylerMoeller
Dec 02 2016 22:51
Cool effect, might have to do that with my wikipedia viewer :)
tommy
@tommygebru
Dec 02 2016 22:51
LOL why not share that?
@TylerMoeller i cant seem to get a simple icon to display
tommy
@tommygebru
Dec 02 2016 22:52
its supposed to be a drop-down arrow
Tyler Moeller
@TylerMoeller
Dec 02 2016 22:52
@tommygebru I'll take a look at your pen - where do you want the icon?
tommy
@tommygebru
Dec 02 2016 22:52
right there with ->> STREAMERS
@zKruki what did you want again?
zKruki
@zKruki
Dec 02 2016 22:53
@tommygebru i wanted to know why the media query wasnt working
basically i would like it if the columns would go back to thier original layout once the screen size is below 700px
by columns i mean the paragraphs
tommy
@tommygebru
Dec 02 2016 22:58
oh do you mean where there would be a grey background again?
Tyler Moeller
@TylerMoeller
Dec 02 2016 22:58
@tommygebru Hmm, I can't get the ionicon to display either, would have to look into it more. If you are not against using Font Awesome, you can use the same icon with this code:
<div class="stream-bar flex center">STREAMERS&nbsp;&nbsp;<i class="fa fa-angle-down fa-lg" aria-hidden="true"></i></div>
Just replace the ionicon CSS with the Font Awesome CSS in your codepen settings to get it working: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css
tommy
@tommygebru
Dec 02 2016 22:58
on the sides
@TylerMoeller LOL sorry i forgot to use the class!!!
:laughing:
Tyler Moeller
@TylerMoeller
Dec 02 2016 23:00
It still didn't work when I did it though either lol, but I didn't read their documentation, just copied their code and put it in their strange <ion-icon> tags
zKruki
@zKruki
Dec 02 2016 23:01
@tommygebru like i want the two <p> in the first container to revert to thier original format with the use of the media queries once the screen size is below the threshhold
tommy
@tommygebru
Dec 02 2016 23:04

lol i dont understand the question but you can simply it like this
@media and(max-width: 766px){
section, aside{
float:none;
clear:left;
width:100%;
}

test{
background-color: red;
}
}

Tyler Moeller
@TylerMoeller
Dec 02 2016 23:05
nvm...not a good container to test it out on
tommy
@tommygebru
Dec 02 2016 23:05
@TylerMoeller i got the icons to work but the worst thing about this project is that i cant view it in the large format on codepen like DebugMode...
I have to export the "pen" and then double click onthe files in my desktop to have it show on a new tab browser
zKruki
@zKruki
Dec 02 2016 23:08
@TylerMoeller could you look at the section, aside part in the css? http://codepen.io/futuristicHat/pen/MbrpGb
Tyler Moeller
@TylerMoeller
Dec 02 2016 23:08
That is odd, there are some errors in the console to investigate in debug mode @tommygebru
Sure @zKruki
You want a single column below 700px and two columns above?
tommy
@tommygebru
Dec 02 2016 23:09
i havent dived in fully to address the js errors just yet
zKruki
@zKruki
Dec 02 2016 23:09
@TylerMoeller hmmm
Tyler Moeller
@TylerMoeller
Dec 02 2016 23:09
Sorry, not sure what look you are trying to achieve with your media queries
zKruki
@zKruki
Dec 02 2016 23:10
i want the blocks to revert to before float: left
tommy
@tommygebru
Dec 02 2016 23:11
@zKruki do you want one of the elements to be hidden??
Tyler Moeller
@TylerMoeller
Dec 02 2016 23:11
I'm sorry, I'm not sure I understand :( what to you mean by revert to before float: left?
tommy
@tommygebru
Dec 02 2016 23:12
i find floats confusing
zKruki
@zKruki
Dec 02 2016 23:12
i took two paragraphs and floated them to the left to form two colums because it looks nice on md+ screens...
tommy
@tommygebru
Dec 02 2016 23:13
i dont see anything to the left they are all in the middle
zKruki
@zKruki
Dec 02 2016 23:13
and im trying to use @media screen to clear all css at viewport size of around 700px
@tommygebru thats odd
Waqas Abbasi
@Waqas909
Dec 02 2016 23:15

https://codepen.io/Waqas909/pen/yVooZE?editors=1100

Why doesnt

#random{
  margin: 5vh auto;
  border-radius: 5px;
  font-family: 'Yrsa',serif;
  font-size: 15px;
}

center the random id element?

zKruki
@zKruki
Dec 02 2016 23:16
@tommygebru @TylerMoeller thanks, i think i fixed it.
CamperBot
@camperbot
Dec 02 2016 23:16
zkruki sends brownie points to @tommygebru and @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1058 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
:cookie: 781 | @tommygebru |http://www.freecodecamp.com/tommygebru
Tyler Moeller
@TylerMoeller
Dec 02 2016 23:16
@zKruki I'm guessing you want this, but I'm sorry, I don't understand what you want it to look like below/above 700px. I understand clearing css and floating left, but not sure what you want to achieve visually by doing that.
  <div class="container">
    <div class="row about">
      <div class="col-xs-12 col-sm-6">
        <h1>Column 1</h1>
        <p>
          Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.
        </p>
      </div>
      <div class="col-xs-12 col-sm-6">
        <img class="img-responsive" src="http://cdn.neonsky.com/4bd5ec18d2ca3/images/lefestyle_web_adds_0001-2.jpg">
      </div>
    </div>
  </div>
Also, container.fluid should be container-fluid everywhere or just container if you want a fixed width
zKruki
@zKruki
Dec 02 2016 23:18
@TylerMoeller ok, ill send a full page link and you can resize the screen horizonally and you should be able to see in the top section how it flip flops
Tyler Moeller
@TylerMoeller
Dec 02 2016 23:20
@zKruki Okay, I just did that in the pen I linked above - no CSS, just bootstrap grid
It breaks at 768px
tommy
@tommygebru
Dec 02 2016 23:23
@zKruki nice :smile:
zKruki
@zKruki
Dec 02 2016 23:24
@TylerMoeller intresting, maybe offsets would allow some extra areas on the sides for a background
Tyler Moeller
@TylerMoeller
Dec 02 2016 23:25
You could also use padding to give some extra space on the sides
Just updated it to show what I mean
Waqas Abbasi
@Waqas909
Dec 02 2016 23:26

@TylerMoeller Why doesnt

#random{
  margin: 5vh auto 0;
}

Center the random id?

zKruki
@zKruki
Dec 02 2016 23:29
@TylerMoeller lol, i see how you did that
Tyler Moeller
@TylerMoeller
Dec 02 2016 23:29
:)
@Waqas909 It needs to be a block element for that to work
zKruki
@zKruki
Dec 02 2016 23:30
@TylerMoeller had to look it from the inside out lol
Tyler Moeller
@TylerMoeller
Dec 02 2016 23:31
@Waqas909
#random{
  display: block;
  margin: 5vh auto 0;
  border-radius: 5px;
  font-family: 'Yrsa',serif;
  font-size: 15px;
}
Waqas Abbasi
@Waqas909
Dec 02 2016 23:32
@TylerMoeller Is button tag not considered a blocK?
@TylerMoeller Thanks tho
CamperBot
@camperbot
Dec 02 2016 23:33
waqas909 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: waqas909 already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Dec 02 2016 23:33
@Waqas909 I believe they are considered inline-blocks
Waqas Abbasi
@Waqas909
Dec 02 2016 23:33
Oh
Chris
@bestintown23
Dec 02 2016 23:47
how can i make this picture cover the red background behind it? http://codepen.io/bestintown23/pen/woPMBV?editors=1100
Tyler Moeller
@TylerMoeller
Dec 02 2016 23:52
@bestintown23 Make it a background image and use background-size: cover; http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover
Chris
@bestintown23
Dec 02 2016 23:55
@TylerMoeller so with my code if i try to do it that way, it does not show up. what could be wrong?