These are chat archives for FreeCodeCamp/HelpFrontEnd

19th
Jun 2017
Andrew Hickman
@ahickman3
Jun 19 2017 00:00
@SkyC0der just wanna make sure before i go balls deep, I should be calling the ajax function anytime i wanna use JSON data right? 99% thats the only case, just making sure though. Ended up finding a new way to do some stuff and cleared everything in the ajax .done function, so its not working near as hard now
mrgrizzlie33
@mrgrizzlie33
Jun 19 2017 00:07

Hey guys, I'm having trouble understanding the Golf Code challenge. Any help?

Code:

function golfScore(par, strokes) {
// Only change code below this line
if (par, 1) {return "Hole-in-one!";}
else if (par, par - 2 >= strokes) {return "Eagle";}
else if (par, par - 3 = strokes) {return "Birdie";}
else if (par, par = strokes) {return "Par";}
else if (par, par + 1 = strokes) {return "Bogey";}
else if (par, par + 2 = strokes) {return "Double Bogey";}
else if (par ,par + 3 <= strokes) {return "Go Home!";}

return "Change Me";
// Only change code above this line
}

// Change these values to test
golfScore(4, 2);

Tom
@moT01
Jun 19 2017 00:20
@mrgrizzlie33 your tests are goofy
if(par, 1)
there's nothing being tested there
and i don't think any golf holes are a par 1
strokes = 1 would be a hole in one
Mr-Benjamin
@Mr-Benjamin
Jun 19 2017 00:22

<!--When nav-justified is entered into ul the pills stack one on another to the left -->

<ul class="nav nav-pills ">

<li>
  <a class="active" href="#"> About </a>
</li>
Zeel Patel
@zee590
Jun 19 2017 00:30
how do i align my image to th center
Rodney Chism
@rodchsm
Jun 19 2017 00:33
Hey can anyone help?
Im trying to section off my about me, skills, and portfolio sections into rounded edge boxes?
And Im trying to make all my images the same size too!? The images on my computer are different sizes. The images that are on my code pen are placeholders!
https://codepen.io/rodchsm/pen/WORdyp
Johnny
@jtan3
Jun 19 2017 00:39
@rodchsm you can mess around with border-radius
Rodney Chism
@rodchsm
Jun 19 2017 00:40
@jtan3 border-radius on the css .section{} ???
Johnny
@jtan3
Jun 19 2017 00:41
@rodchsm yup
Rodney Chism
@rodchsm
Jun 19 2017 00:42
@jtan3 ok let me try it! and do you know why the .section {background-color: } part isnt working?
@jtan3 does it have to do with border-radius?
Johnny
@jtan3
Jun 19 2017 00:43
@rodchsm you're missing ; at the end of stuff
@rodchsm padding is missing ; and border-radius what is sss?
Rodney Chism
@rodchsm
Jun 19 2017 00:47
@jtan3 I added the ; and no clue! I thought I deleted that.
Johnny
@jtan3
Jun 19 2017 00:49
@rodchsm i think you want to put border-radius in your h1?
CallMeOrange
@EgnaroDev
Jun 19 2017 00:49
@jtan3 can you help me?
Johnny
@jtan3
Jun 19 2017 00:49
@MCTwoDigitZero ill try
Rodney Chism
@rodchsm
Jun 19 2017 00:49
@jtan3 I literally just deleted it and retyped it and the code worked!!
Do you know how to stay title in one place when scrolling?
Johnny
@jtan3
Jun 19 2017 00:50
@MCTwoDigitZero your page doesn't scroll though
CallMeOrange
@EgnaroDev
Jun 19 2017 00:51
yeah someday...
Do I have to make the page scrollable first?
Johnny
@jtan3
Jun 19 2017 00:52
@MCTwoDigitZero kinda hard to test if it does not scroll
CallMeOrange
@EgnaroDev
Jun 19 2017 00:52
Alright I will do something quickly
@jtan3 done
Test it
refresh just added a little change
W-e-l-l-?
Johnny
@jtan3
Jun 19 2017 00:59
<div class="thumbnail fixed-top"> @MCTwoDigitZero
CallMeOrange
@EgnaroDev
Jun 19 2017 00:59
still same
never mind
I forgot to add -
DarrylJLTolentino
@DarrylJLTolentino
Jun 19 2017 01:00
@moT01 thank you for letting me know! I'll try to debug for myself and I'll ask for help again if I can't figure it out.
CamperBot
@camperbot
Jun 19 2017 01:00
darryljltolentino sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 727 | @mot01 |http://www.freecodecamp.com/mot01
CallMeOrange
@EgnaroDev
Jun 19 2017 01:00
so simple... thanks
Johnny
@jtan3
Jun 19 2017 01:00
why don't you give brownie points? @MCTwoDigitZero
CallMeOrange
@EgnaroDev
Jun 19 2017 01:00
@jtan3 thanks
CamperBot
@camperbot
Jun 19 2017 01:00
mctwodigitzero sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 414 | @jtan3 |http://www.freecodecamp.com/jtan3
CallMeOrange
@EgnaroDev
Jun 19 2017 01:01
strange I thought I tagged your name
Probably missed it when that message showed up
Johnny
@jtan3
Jun 19 2017 01:03
@MCTwoDigitZero you might want to read what containers do
CallMeOrange
@EgnaroDev
Jun 19 2017 01:03
@jtan3 did you do portfolio? if so can I see it
@jtan3 yeah I know container-fluid
just added it now
Johnny
@jtan3
Jun 19 2017 01:04
@MCTwoDigitZero didn't finish it
CallMeOrange
@EgnaroDev
Jun 19 2017 01:05
<div class="container-fluid">
<div class="thumbnail fixed-top">
  <h2 class="title">Portfolio</h2>
  <a href="#home">Home</a> | <a href="#about">About</a> | <a href="#project">Project</a> | <a href="#contact">Contact</a>
</div>

<!-- Home -->
<div>


</div>
</div>
What do you mean?
Johnny
@jtan3
Jun 19 2017 01:05
@MCTwoDigitZero i skipped it
CallMeOrange
@EgnaroDev
Jun 19 2017 01:06
oh
Maybe you didnt refresh it
Im thinking what I should do for home section....
lalith77
@lalith77
Jun 19 2017 01:07
hey does anyone know how to check if a value exists in an object?
CallMeOrange
@EgnaroDev
Jun 19 2017 01:07
like console.log?
Nick Sladic
@Nickadiemus
Jun 19 2017 01:08
@lalith77 console.log(VALUE_NAME)
CallMeOrange
@EgnaroDev
Jun 19 2017 01:08
:/
Can anyone show me their portfolio with home section?
I need to see an example of home section
Johnny
@jtan3
Jun 19 2017 01:09
@MCTwoDigitZero go search on codepen portfolio tons of examples
Long Nguyen
@longnt80
Jun 19 2017 01:09
@lalith77 grab all the keys, iterate through the keys and return the value of each key
lalith77
@lalith77
Jun 19 2017 01:10
no. it should return true or false. we can check if an object has a key by doing -- > key1 in map. this returns true or false. I was wondering if we could check for values
CallMeOrange
@EgnaroDev
Jun 19 2017 01:10
Doesnt mean I might find home section on one of them but I will try
Nick Sladic
@Nickadiemus
Jun 19 2017 01:10
@MCTwoDigitZero Nicksladic.me
you can use your browser dev tool to look at my code
CallMeOrange
@EgnaroDev
Jun 19 2017 01:11
@Nickadiemus looks nice
Long Nguyen
@longnt80
Jun 19 2017 01:12
@lalith77 ther's no direct method to find value, you have to use loop
lalith77
@lalith77
Jun 19 2017 01:12
@longnt80 ok. thank you
CamperBot
@camperbot
Jun 19 2017 01:12
lalith77 sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 394 | @longnt80 |http://www.freecodecamp.com/longnt80
Long Nguyen
@longnt80
Jun 19 2017 01:12
np
lalith77
@lalith77
Jun 19 2017 01:12
i guess i could invert the keys and values and check if the key exitst.
Nick Sladic
@Nickadiemus
Jun 19 2017 01:12
@MCTwoDigitZero It still needs its portfolio page/projects intergrated but it's almost done :smile:
CallMeOrange
@EgnaroDev
Jun 19 2017 01:13
Now I have seen a home section example
Gonna make one now
Long Nguyen
@longnt80
Jun 19 2017 01:13
@lalith77 use Object.keys method to return all keys in an array, iterate through that array and return value of each key and see if that's the value you're looking for
lalith77
@lalith77
Jun 19 2017 01:18
@longnt80 ok got it.thank you
CamperBot
@camperbot
Jun 19 2017 01:18
lalith77 sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:warning: lalith77 already gave longnt80 points
CallMeOrange
@EgnaroDev
Jun 19 2017 01:28
I have a question
If you have an image how do you make image fit perfectly to your screen instead of background-size: cover;?
Never mind I will try to figure it out
Nick Sladic
@Nickadiemus
Jun 19 2017 01:36
@MCTwoDigitZero I use a framework called jQuery Backstretch
CallMeOrange
@EgnaroDev
Jun 19 2017 01:39
What is it?
Nick Sladic
@Nickadiemus
Jun 19 2017 01:43
@MCTwoDigitZero It's kind of like a plugin for jQuery that allows you to use jQuery to set any image (within respectable resolutions) as the background
It also has a bunch of different features
CallMeOrange
@EgnaroDev
Jun 19 2017 01:44
I see
@Nickadiemus Do you know well about fixed-top classes?
Nick Ross
@codecampNick
Jun 19 2017 01:47
hello all! I'm working on the second challenge, the portfolio.
CallMeOrange
@EgnaroDev
Jun 19 2017 01:48
@codecampNick Sup
Nick Ross
@codecampNick
Jun 19 2017 01:48
I notice that you should target "_blank" but window.open() seems to work just fine
Nick Sladic
@Nickadiemus
Jun 19 2017 01:48
@MCTwoDigitZero For Bootstrap?
@MCTwoDigitZero or just the css behind it
CallMeOrange
@EgnaroDev
Jun 19 2017 01:49
in html
Sorry Im new to fixed-top
Nick Ross
@codecampNick
Jun 19 2017 01:49
Note that CodePen.io overrides the Window.open() function, so if you want to open windows using jQuery, you will need to target invisible anchor elements like this one: <a target='_blank'>.
CallMeOrange
@EgnaroDev
Jun 19 2017 01:50
@codecampNick if needed you have to add target attribute with _blank to anchor element if clicking a link come up blank for some reason
Nick Ross
@codecampNick
Jun 19 2017 01:51
okay, Thanks @MCTwoDigitZero . would the jquery need to be different then? I've seen several different ways of doing this. I was just curious.
CamperBot
@camperbot
Jun 19 2017 01:51
codecampnick sends brownie points to @mctwodigitzero :sparkles: :thumbsup: :sparkles:
:cookie: 169 | @mctwodigitzero |http://www.freecodecamp.com/mctwodigitzero
CallMeOrange
@EgnaroDev
Jun 19 2017 01:53
@codecampNick I dont think nobody use window() if its their first time making personal portfolio
Even me I dont know about it but its not required to use window()
Nick Ross
@codecampNick
Jun 19 2017 01:56
oh, pretty easy jQuery. $("#buttonid").click(function(){window.open("urlToOpen"(})
not sure how to do it another way?
Nathaniel Suchy
@nsuchy
Jun 19 2017 02:00
https://i.lunorian.me/file/1497837570_0.71405000.png - It would of been nice to know the difference earlier when i had to write the javascript if statements. I typed === instead of == and the challenge still passed but there was the extra check since it also tested the data type, kinda weird :/
good to know though :)
Nick Sladic
@Nickadiemus
Jun 19 2017 02:07
@MCTwoDigitZero Sorry yeah I am, Do you still need help
Gulsvi
@gulsvi
Jun 19 2017 02:22
@fullmetal7777 $.ajax is great for getting JSON, but there are lots of other ways. Get comfortable with one way, like you're doing, then try other ways.
@MCTwoDigitZero Back now... did you get your question answered? Too lazy to read all the messsages from the last 4 hours lol
jmariomejiap
@jmariomejiap
Jun 19 2017 02:23
hello guys.
nimaipandit
@nimaipandit
Jun 19 2017 02:24
Hello, I don't understand how we are expected to build the Build a Personal Portfolio Webpage in the Basic Front End Development Projects section. These functions were not covered in the lessons above this area. Specifically the anchor link functionality
jmariomejiap
@jmariomejiap
Jun 19 2017 02:25
i have been working on my javascript calculator. can I please get some help.... I would like for all my buttons to have the same size
Gulsvi
@gulsvi
Jun 19 2017 02:25
@nimaipandit They give you 50 hours to build it - lots of research is needed. You can always skip it and come back later.
nimaipandit
@nimaipandit
Jun 19 2017 02:26
@SkyC0der thanks for the input. Basically they say don't look at the provided code yet we are expected to look other places online and piece it together?
CamperBot
@camperbot
Jun 19 2017 02:26
nimaipandit sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1774 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Jun 19 2017 02:27
@nimaipandit Yeah, I think they expect that you have enough vocabulary now to search for how to piece it together.
You can copy/paste stuff from here and style it as needed: https://getbootstrap.com/components/
Roxroy
@roxroy
Jun 19 2017 02:27
@nimaipandit , I know. This is where you would use Read-Search-Ask to create the page. Start with the bootstrap library. I has all the bits that you will need to make the page.
nimaipandit
@nimaipandit
Jun 19 2017 02:28
@SkyC0der thanks for the input. I did the tribute page already but this looks like it may take a little longer. thanks @roxroy
CamperBot
@camperbot
Jun 19 2017 02:28
nimaipandit sends brownie points to @skyc0der and @roxroy :sparkles: :thumbsup: :sparkles:
:cookie: 983 | @roxroy |http://www.freecodecamp.com/roxroy
:warning: nimaipandit already gave skyc0der points
Niloy513
@Niloy513
Jun 19 2017 02:28
I'm hoping someone can help me with this. I need the geocoder to properly display the city state and country from where anyone logs in. It's a problem with the address components.
I don't know how to set #country to "country" on geocode
Roxroy
@roxroy
Jun 19 2017 02:32
@Niloy513 , it is working correctly for me, country, city and state is correct.
Gulsvi
@gulsvi
Jun 19 2017 02:32
@Niloy513 You need to loop through it and find the different location types - hard-coding to address component 2, 4, and 5 may not always work
Niloy513
@Niloy513
Jun 19 2017 02:33
yah it works for some location for most it should but some locations it might display the wrong info. and thank you very much for that skycoder
Gulsvi
@gulsvi
Jun 19 2017 02:34
The country is in the one with types = [country, political]
Roxroy
@roxroy
Jun 19 2017 02:35
@Niloy513 , instead of breaking the address in those components, just string them together. Remember, there are non-USA users out there and state and city does not apply.
Niloy513
@Niloy513
Jun 19 2017 02:40
lol yes that's a good point would honestly make my work easier as well. I probably will do that, after I learn how to use skycoder pin and apply it to mine. it's purely for learning purposes for now. Thank you guys for the helpful tips.
Rodney Chism
@rodchsm
Jun 19 2017 02:42
Ok
Rodney Chism
@rodchsm
Jun 19 2017 02:55

In my contact section. How do I increase the <form> input panels size( width and height???)? Can you make it responsive?
And why does the form invade the <p> info when the page is too small!?

https://codepen.io/rodchsm/pen/WORdyp

Abhishek Kumar
@Mr-Kumar-Abhishek
Jun 19 2017 03:18

@rodchsm you could increase the font size like this :

button, input, select, textarea {
    font-family: inherit;
    font-size: 26px;
    line-height: inherit;
}

however same classes could be used to make their size as you desire . or assign each element a specific class for their specific function

iso
@iso1048
Jun 19 2017 03:19
@Mr-Kumar-Abhishek could you please help me out with the navbar?
Abhishek Kumar
@Mr-Kumar-Abhishek
Jun 19 2017 03:20
@gothamknight I would try to ~
iso
@iso1048
Jun 19 2017 03:21
https://codepen.io/gothamknight/pen/PjWxRX?editors=1100 there is a space on the side of "crispr-cas9 biology" which i do not want
Rodney Chism
@rodchsm
Jun 19 2017 03:22
@Mr-Kumar-Abhishek What about the collision between the inputs and <p> when the page gets smaller width wise! Can I fix that? I have been change the col-xs-#'s but I am having no luck.
@Mr-Kumar-Abhishek and im trying to increase the input line length a little. Would I use size="?
Abhishek Kumar
@Mr-Kumar-Abhishek
Jun 19 2017 03:25

@gothamknight , you could try to manipulate all the width of the li elements

nav ul li {
    min-width: 125px;
    text-align: center;
}
`

or try to adjust by assigning specific classes for starters

@rodchsm for responsiveness , my approach is to start from mobile / small screens then go for the larger screens you might want to use media queries to over ride the css rules https://developer.mozilla.org/en-US/docs/Web/CSS/@media
for larger screens
Rodney Chism
@rodchsm
Jun 19 2017 03:30
ok
@Mr-Kumar-Abhishek thanks
CamperBot
@camperbot
Jun 19 2017 03:30
rodchsm sends brownie points to @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
:cookie: 489 | @mr-kumar-abhishek |http://www.freecodecamp.com/mr-kumar-abhishek
Abhishek Kumar
@Mr-Kumar-Abhishek
Jun 19 2017 03:31
@rodchsm this link is better for understanding of using of media queries https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Riley
@Riley1435
Jun 19 2017 03:38
trying to get my temperature converter button working on my wather web page. Need some help. https://codepen.io/Riley1435/pen/KmOLRL
Gulsvi
@gulsvi
Jun 19 2017 03:44
@Riley1435 What are you trying to do with this line of code?
var lengthTemp = startTemp.substr(startTemp.length - 1, 1)
Riley
@Riley1435
Jun 19 2017 03:45
set the last digit it my temperature value to a variable. so if it reads 65F it would set the variable = F
then the button converts to C if the last variable is F
and if its not F then converts back to F and ads "F" to the end of the temperature
Gulsvi
@gulsvi
Jun 19 2017 03:49
I see
@Riley1435 To start, I think you want startTemp to be equal to $("tempFar").text();
.value is for <input> fields, like text boxes
And in your click function, you want $("tempFar") instead of ("tempFar")
Riley
@Riley1435
Jun 19 2017 03:52
set startTemp = $("#tempFar").text(); or $("#tempFar").text(data.currently.temperature);
Gulsvi
@gulsvi
Jun 19 2017 03:53
like this:
   var startTemp = $("#tempFar").text();
   var lengthTemp = startTemp.slice(-1);
.slice(-1) will always give you the last letter in a string
Riley
@Riley1435
Jun 19 2017 03:54
completely forgot about slice
went back to the FCC exercise uusing .substr
Gulsvi
@gulsvi
Jun 19 2017 03:54
It still doesn't fix your button, but makes it a little less code
Riley
@Riley1435
Jun 19 2017 03:55
okay, ill work with it and see where i can get it to lead too
thanks!
Mauricio Salas
@MauriSg99
Jun 19 2017 03:55
@MauriSg99
https://codepen.io/MauriSg/pen/gRgwzP?editors=1100
How can I make it that when I click on About it only shows that part on not part of My Work
But when I click on the other ones they do not show other sections
Gulsvi
@gulsvi
Jun 19 2017 03:55
@Riley1435 The other thing I noticed, is your converting from celsius to fahrenheit and back again. data.currently.temperature is always fahrenheit
Riley
@Riley1435
Jun 19 2017 03:57
definitely right, button converts to celcius, ill have to use Math.round somewhere so its not a rediculous number
Gulsvi
@gulsvi
Jun 19 2017 03:58
        $("#weatherGrab").on("click", function() {
          var startTemp = $("#tempFar").text();
          var lengthTemp = startTemp.slice(-1);
          if (lengthTemp == "F") {
            $("#tempFar").text(
              (data.currently.temperature - 32) * (5 / 9) + "°" + "C"
            );
          } else {
            $("#tempFar").text(data.currently.temperature + "°" + "F");
          }
        });
I think that would work better - that way, you check if it's "F" or "C" every time you click and update the variable
And, better variables would work too :) like "currentUnit" instead of "lengthTemp" and "currentTemperature" instead of "starTemp" and "temperature" instead of "tempFar"
John Watson
@TheWatson
Jun 19 2017 03:59
Hello i have a static ackground image that i want to cover so when you scroll it reveals part of the image can anyone help me with that?https://codepen.io/TheWatson/pen/NgddBK
Riley
@Riley1435
Jun 19 2017 04:01
@SkyC0der definitely a way better way. I dont need the math to convert back to F. just need to call the temp from the API
Princu
@Princu7
Jun 19 2017 04:16
Hey Guys. Stuck with a problem.
I have a parent div and I want to fit two divs adjacent to each other inside it. Now, both the divs can have variable width but the width of the first div should not exceed 50% and both the div should occupy the total width of the parent div. How can we do it? Please help. Thanks!
If the width of the left side div is less than 50%, then that extra width should go to its adjacent div.
Some max-width and min-width would be required but I just want to clarify and understand.
Rodney Chism
@rodchsm
Jun 19 2017 04:25
Why arent my social buttons in the Follow Me Section showing up!
https://codepen.io/rodchsm/pen/WORdyp
Mauricio Salas
@MauriSg99
Jun 19 2017 04:27
Do you have Bootsrap and Font Awesome on your CSS??
Roxroy
@roxroy
Jun 19 2017 04:28
@rodchsm , you will need to add the 'Font Awesome Icons' css to the page
Rodney Chism
@rodchsm
Jun 19 2017 04:28
Yes you can look and see
Wait i never put font awesome on there?
Well hell!
Thanks @MauriSg99 @roxroy
CamperBot
@camperbot
Jun 19 2017 04:28
rodchsm sends brownie points to @maurisg99 and @roxroy :sparkles: :thumbsup: :sparkles:
:cookie: 129 | @maurisg99 |http://www.freecodecamp.com/maurisg99
:cookie: 995 | @roxroy |http://www.freecodecamp.com/roxroy
Mauricio Salas
@MauriSg99
Jun 19 2017 04:28
Yeah haha, it happens :)
Sunny Wong
@swong194
Jun 19 2017 04:50
hi guys
i have a question, is there a way to return what som1 sees on their viewport?
example: i want to make a nav which sticks after i scrolled a certain amount, I know this can be done with js using scrollvalue
CallMeOrange
@EgnaroDev
Jun 19 2017 04:51
@SkyC0der lol im not sure which question it was but I think its solved
I have this just one problem
Sunny Wong
@swong194
Jun 19 2017 04:52
i was wondering if it was possible to set the condition such that after the user scrolls pass a certain element on the page, then the nav sticks
CallMeOrange
@EgnaroDev
Jun 19 2017 04:52
I need your help with it
Is there anyone who is good with html/css?
Knows about fixed-top classes?
Roxroy
@roxroy
Jun 19 2017 04:53
@swong194 , yep use scrollspy , http://getbootstrap.com/javascript/#scrollspy . that should do the trick.
CallMeOrange
@EgnaroDev
Jun 19 2017 04:54
@roxroy what about you?
Sunny Wong
@swong194
Jun 19 2017 04:54
@MCTwoDigitZero what is ur question
CallMeOrange
@EgnaroDev
Jun 19 2017 04:55
@swong194 take a look at this pen first
Click Home then see what happens
Go into edit mode so that make it scrollable
So you see when you click "Home" the image go to top through title
How do I make title block it?
Sunny Wong
@swong194
Jun 19 2017 04:57
@roxroy thank you
CamperBot
@camperbot
Jun 19 2017 04:57
swong194 sends brownie points to @roxroy :sparkles: :thumbsup: :sparkles:
:cookie: 998 | @roxroy |http://www.freecodecamp.com/roxroy
CallMeOrange
@EgnaroDev
Jun 19 2017 04:58
@swong194 do you know the answer?
Sunny Wong
@swong194
Jun 19 2017 04:58
@MCTwoDigitZero u want ur title to block ur image?
@MCTwoDigitZero do u mean ur navbar to cover ur image?
CallMeOrange
@EgnaroDev
Jun 19 2017 04:59
yeah first one
I dont want img go through title
when I click "Home"
Sunny Wong
@swong194
Jun 19 2017 04:59
@MCTwoDigitZero sorry i dont quite understand
CallMeOrange
@EgnaroDev
Jun 19 2017 04:59
@swong194 you know what happen when you click "home"?
Sunny Wong
@swong194
Jun 19 2017 05:00
@MCTwoDigitZero the image u r referring to is the drawing?
yeh
CallMeOrange
@EgnaroDev
Jun 19 2017 05:00
That image move right?
yeah
Circle one
Sunny Wong
@swong194
Jun 19 2017 05:00
when u click home it scrolls to your home anchor
CallMeOrange
@EgnaroDev
Jun 19 2017 05:00
Yea
I want title block it
Sunny Wong
@swong194
Jun 19 2017 05:00
u want ur nav bar to cover it?
CallMeOrange
@EgnaroDev
Jun 19 2017 05:00
I dont want image go through that title you know?
Sunny Wong
@swong194
Jun 19 2017 05:00
navigation bar to cover it?
so when u scroll
it will not show part of the image?
CallMeOrange
@EgnaroDev
Jun 19 2017 05:01
huh..
you mean title is navbar
?
Sunny Wong
@swong194
Jun 19 2017 05:02
yeh as in your navigation bar = PPORTFOLIO, home, about , project
CallMeOrange
@EgnaroDev
Jun 19 2017 05:02
yeah
So I dont want that image go through that navbar
Just block it
So image wont be able to go through it
Sunny Wong
@swong194
Jun 19 2017 05:02
so the issue is ur navbar has opacity, meaning its slightly clear
CallMeOrange
@EgnaroDev
Jun 19 2017 05:03
yeah...
I have not asked a question yet
Here it is, Is it possible to block it?
Sunny Wong
@swong194
Jun 19 2017 05:03
@MCTwoDigitZero are u looking for the effect if opacity is set to 1?
CallMeOrange
@EgnaroDev
Jun 19 2017 05:04
I dont understand what is this opacity
Sunny Wong
@swong194
Jun 19 2017 05:04
in
your thumbnail class
you set
background as rgba
CallMeOrange
@EgnaroDev
Jun 19 2017 05:04
Oh yeah transparent
Sunny Wong
@swong194
Jun 19 2017 05:04
yes
CallMeOrange
@EgnaroDev
Jun 19 2017 05:04
Do I have to change it to block the image?
Sunny Wong
@swong194
Jun 19 2017 05:04
your picture is showing because it it transparent
CallMeOrange
@EgnaroDev
Jun 19 2017 05:05
oh... Im not talking background
Sunny Wong
@swong194
Jun 19 2017 05:05
your only talking about ur character right?
CallMeOrange
@EgnaroDev
Jun 19 2017 05:05
Im referring to that circle image
Sunny Wong
@swong194
Jun 19 2017 05:05
yes
uhm
CallMeOrange
@EgnaroDev
Jun 19 2017 05:05
What does transparent has to do with it?
I think we are misunderstanding
CallMeOrange
@EgnaroDev
Jun 19 2017 05:07
How did you do it?
Sunny Wong
@swong194
Jun 19 2017 05:07
do you want that ? O__O
CallMeOrange
@EgnaroDev
Jun 19 2017 05:07
Just change 0.5 to 1?
Yeah...
Sunny Wong
@swong194
Jun 19 2017 05:07
yes
because the a represents the transparency
1 = solid
CallMeOrange
@EgnaroDev
Jun 19 2017 05:07
Its not working for me
Sunny Wong
@swong194
Jun 19 2017 05:07
0 full transparent
CallMeOrange
@EgnaroDev
Jun 19 2017 05:07
Hm I tried 1
What else did you do?
Sunny Wong
@swong194
Jun 19 2017 05:07
that was it
copy ur code again
refresh ur codepen
CallMeOrange
@EgnaroDev
Jun 19 2017 05:08
ok
image still go through navbar...
take a look at that code
Sunny Wong
@swong194
Jun 19 2017 05:09
urs is still clear?
it works on my end
CallMeOrange
@EgnaroDev
Jun 19 2017 05:11
Hold lets test it with full screen
I added a bunch of break line
Click home again
I also changed 0.5 to 1
I dont think this is about transparent.... its because that navbar has fixed-top and not able to block anything
Sunny Wong
@swong194
Jun 19 2017 05:12
image.png
CallMeOrange
@EgnaroDev
Jun 19 2017 05:12
yeah
Sunny Wong
@swong194
Jun 19 2017 05:12
this is what i see
CallMeOrange
@EgnaroDev
Jun 19 2017 05:12
Same
Sunny Wong
@swong194
Jun 19 2017 05:12
is that what you want?
CallMeOrange
@EgnaroDev
Jun 19 2017 05:12
I need navbar to block that image
no :/
Sunny Wong
@swong194
Jun 19 2017 05:13
you want it to block the entire thing?
as in cover
CallMeOrange
@EgnaroDev
Jun 19 2017 05:13
I dont understand
Sunny Wong
@swong194
Jun 19 2017 05:13
what do you mean by block XD
CallMeOrange
@EgnaroDev
Jun 19 2017 05:13
I meant I dont want any item to go through that navbar..
You see that screenshot right? image went through navbar
Sunny Wong
@swong194
Jun 19 2017 05:14
uh huh
Aj Tafoya
@AjTafoya
Jun 19 2017 05:14
can anyone help me with why this isnt updating my input https://codepen.io/AjTafoya/pen/owBPeJ
Sunny Wong
@swong194
Jun 19 2017 05:14
what would u like for the image to do then?
CallMeOrange
@EgnaroDev
Jun 19 2017 05:14
so... avoid that :/ any item going through navbar
Sunny Wong
@swong194
Jun 19 2017 05:14
is there an effect that i can refer to?
im not quite understanding, sorry ;[
CallMeOrange
@EgnaroDev
Jun 19 2017 05:14
Not just an image I think I want all items not able to go through navbar
@swong194 You screenshot that you saw an image going through navbar right?
I want an image not able to go through navbar instead of image going through navbar
Man this is going to be hard explaining
Sunny Wong
@swong194
Jun 19 2017 05:18
@MCTwoDigitZero im still not understanding XD, i think its best if you can provide an example i sorry
Roxroy
@roxroy
Jun 19 2017 05:18
@AjTafoya , you will need to use the event that is sent to the button, Try this, change it to the following:
$("button").on("click", function(el){
console.log(el.target.id);
You will see the correct key press in the console. then update the rest of the code accordingly
CallMeOrange
@EgnaroDev
Jun 19 2017 05:19
@swong194 lets just start over
what happen to an circle image when you click home?
Sunny Wong
@swong194
Jun 19 2017 05:20
@MCTwoDigitZero the viewport adjusts to where you put the home anchor
CallMeOrange
@EgnaroDev
Jun 19 2017 05:20
what...
by viewport do you mean that image?
Sunny Wong
@swong194
Jun 19 2017 05:21
oh what you see
your webpage moves to where you put the anchor
CallMeOrange
@EgnaroDev
Jun 19 2017 05:22
well yeah since image is on that page...
Im talking about that image the person with orange hair, what happen to it when you click home?
image move right?
but it went through navbar I dont want that
Sunny Wong
@swong194
Jun 19 2017 05:24
what would u like the image to do?
O__O
Johnny
@jtan3
Jun 19 2017 05:24
@swong194 i think he wants the navbar to cover all of the circle image.
CallMeOrange
@EgnaroDev
Jun 19 2017 05:24
man... I dont want image to do anything
I dont want a single item going through navbar
Sunny Wong
@swong194
Jun 19 2017 05:24
is johnnys suggestion correct?
navbar cover your image?
or go past your image
CallMeOrange
@EgnaroDev
Jun 19 2017 05:25
not go past
I dont understand "Navbar cover its image"
Like blocking it? not able to go past it
@jtan3 do you know what im talking about? I dont want any item to go past navbar
Johnny
@jtan3
Jun 19 2017 05:27
@MCTwoDigitZero not really
Sunny Wong
@swong194
Jun 19 2017 05:28
@MCTwoDigitZero when you hit home, you want the picture to still show?
CallMeOrange
@EgnaroDev
Jun 19 2017 05:28
@swong194 even when I hit home the image still show up
but image went past navbar
Sunny Wong
@swong194
Jun 19 2017 05:29
@MCTwoDigitZero uh
CallMeOrange
@EgnaroDev
Jun 19 2017 05:29
@jtan3 have you seen my pen? maybe you will understand
Johnny
@jtan3
Jun 19 2017 05:29
@MCTwoDigitZero just move the img down with padding i guess?
Rodney Chism
@rodchsm
Jun 19 2017 05:29
code pen doesnt take my jpgs and pngs from my files folder. Any work around for this?
CallMeOrange
@EgnaroDev
Jun 19 2017 05:30
@rodchsm use postimg.com
You can upload your own image there then use new link
@jtan3 Im not sure if that is what Im looking for
@jtan3 take a look at my pen
Rodney Chism
@rodchsm
Jun 19 2017 05:30
ok sounds good! thanks @MCTwoDigitZero
CamperBot
@camperbot
Jun 19 2017 05:30
rodchsm sends brownie points to @mctwodigitzero :sparkles: :thumbsup: :sparkles:
:cookie: 170 | @mctwodigitzero |http://www.freecodecamp.com/mctwodigitzero
CallMeOrange
@EgnaroDev
Jun 19 2017 05:30
Hit home and see what happen to oval shape image
Johnny
@jtan3
Jun 19 2017 05:32
@MCTwoDigitZero it jumps to your "home" section
CallMeOrange
@EgnaroDev
Jun 19 2017 05:32
@jtan3 well...
without navbar image would be at top of the screen
but with navbar same thing happen because navbar dont affect it
When I hit home I want an image to be below navbar
Johnny
@jtan3
Jun 19 2017 05:34
@MCTwoDigitZero adjust the padding to your image to shift it down
CallMeOrange
@EgnaroDev
Jun 19 2017 05:34
is it possible? since navbar dont affect any item
padding: 10px?
oh padding: top right bottom left
Johnny
@jtan3
Jun 19 2017 05:34
@MCTwoDigitZero or margin
CallMeOrange
@EgnaroDev
Jun 19 2017 05:34
@jtan3 I used margin-top
img {
  height: 8%;
  width: 8%;
  border-radius: 50%;
  margin-top: 150px;
}
@jtan3 see that in css
remove margin-top then see what happen
Cato.
@catoslife
Jun 19 2017 05:37
Hey guys I need some help making my site more responsive
CallMeOrange
@EgnaroDev
Jun 19 2017 05:37
@jtan3 well?
@catoslife have you tried container-fluid?
I think im going to give up explaining it...
Roxroy
@roxroy
Jun 19 2017 05:39
@catoslife , try css media queries to adapt the page to various screen res. Also, check out bootstrap library. http://getbootstrap.com/css/#grid to see how they do it.
CallMeOrange
@EgnaroDev
Jun 19 2017 05:39
@roxroy can you help :/
Ok Im done with it
Cato.
@catoslife
Jun 19 2017 05:43
@MCTwoDigitZero no i have not
hmm ill give that a go
Rajat
@rajataudichya
Jun 19 2017 06:13
Hi guys
rugano
@rugano
Jun 19 2017 06:25
Hello campers,
Why exactly is my Tic Tac Toe game not playing and javascript seem to be ok? here: https://codepen.io/Njue/full/NgbxBa
PonniThirumoorthy
@PonniThirumoorthy
Jun 19 2017 06:41
hi there
For the "build tribute page". should we build a page for Dr. Norman Borlaug as cited in the example?
reply
Steven Alila
@stevenalila
Jun 19 2017 06:43
@PonniThirumoorthy hi
no the options are open on who you would like to pay tribute to
I did for Nelson Mandela
Feedback is welcome
PonniThirumoorthy
@PonniThirumoorthy
Jun 19 2017 06:45
oh where can I find them
do we have any list?
Steven Alila
@stevenalila
Jun 19 2017 06:46
There is no list, only popular characters of history within your society
PonniThirumoorthy
@PonniThirumoorthy
Jun 19 2017 06:46
ah right
thanks
Steven Alila
@stevenalila
Jun 19 2017 06:46
you are welcome
Vasundhara sharma
@vasundharak
Jun 19 2017 06:56

Hi guys, i am trying to add bootstrap background image, but it is not showing any image, here is my code:<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

<div class="navbar"></div>

<div class="container-fluid"></div>.container-fluid{
margin-bottom: 0px;
background-image: url("https://wallpaperscraft.com/image/computer_keyboard_mouse_laptop_mac_apple_66734_3840x2160.jpg");
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;

text-shadow: black 0.3em 0.3em 0.3em;

}

Trần Hữu Đăng
@tranhuudang
Jun 19 2017 07:05
I don't know how to auto resize image when we resize the webpage, anyone can help me?
Vasundhara sharma
@vasundharak
Jun 19 2017 07:07
use bootstrap class img-responsive
CallMeOrange
@EgnaroDev
Jun 19 2017 07:09
Hey do anyone know how to stay background when scrolling?
Image in body element in css
never mind found the code I needed
ACSlater8
@ACSlater8
Jun 19 2017 07:15
@MCTwoDigitZero post your pen
Aj Tafoya
@AjTafoya
Jun 19 2017 07:24
Okay so i know my click button function is working and out putting the id to my console however im not understanding why its not outputting to the screenhttps://codepen.io/AjTafoya/pen/owBPeJ/
Rajat
@rajataudichya
Jun 19 2017 07:37
any one here uses chrome development tools?
anyone here uses chrome developer tools? I am having an issue when trying to edit chrome dev tools page scrolls when clicked to edit
Ken Haduch
@khaduch
Jun 19 2017 07:51
@AjTafoya - I see one place where you have the word "includes" spelled "inlcudes". Just looking at the code on my phone.
Not sure if that's what the problem is for you, but I cannot really do much on my phone... hope that helps?
Ken Haduch
@khaduch
Jun 19 2017 08:00
Maybe it makes one digit display if you fix that?
CallMeOrange
@EgnaroDev
Jun 19 2017 08:19
Hey can anyone help me with floating and stuff?
Clyde Lobo
@oppiniated
Jun 19 2017 08:26
@AjTafoya includes is spelled wrong operations1.inlcudes
Vasundhara sharma
@vasundharak
Jun 19 2017 08:36
hey, can someone tell me how to add background image for a div.
CallMeOrange
@EgnaroDev
Jun 19 2017 08:37
@vasundharak
.class {
background-image: url(" ");
}

add that class to div element and have URL inside quote
Vasundhara sharma
@vasundharak
Jun 19 2017 08:39
@MCTwoDigitZero I tried, it's not working properly.
CallMeOrange
@EgnaroDev
Jun 19 2017 08:39
Let me see the code
Not all of it just html and css
Vasundhara sharma
@vasundharak
Jun 19 2017 08:39
CallMeOrange
@EgnaroDev
Jun 19 2017 08:40
@vasundharak You will need text inside div element
or image wont show up
But to let you know image size depends on text
but if you want to adjust size of image you can use height: vh and width: vw
Vasundhara sharma
@vasundharak
Jun 19 2017 08:41
ok, thanks!
Alexander Domikov
@AlexanderDom
Jun 19 2017 08:48
actually .img-responsive class is for images @vasundharak , what i mean by that, it mean to be used like <img class="img-responsive">
after for sizing your div you can add height and width of image, vh and vw are shorts for viewport height and viewport width, 1vw is equal to 1% of your "screen" or your support on which your consulting your page
last one thing, you don't need to precise <html> and <body> inside codepen, it do it for you, and for external files like bottstrap css or later js, you can do that in pen settings
CallMeOrange
@EgnaroDev
Jun 19 2017 08:56
I guess she didnt respond
:/
Vasundhara sharma
@vasundharak
Jun 19 2017 08:59
@MCTwoDigitZero @AlexanderDom thank you!!
CamperBot
@camperbot
Jun 19 2017 08:59
vasundharak sends brownie points to @mctwodigitzero and @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 172 | @mctwodigitzero |http://www.freecodecamp.com/mctwodigitzero
:cookie: 438 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
Rob Meador
@RobMeador
Jun 19 2017 09:29
Hey folks. I'm attempting to make the "tribute page" but I'm having some problems with Bootstrap, particularly with containers. Can someone give me some assistance?
Jim Tryon
@jimtryon
Jun 19 2017 09:30
@RobMeador You want to PM me and I can give you some assistance.
Rob Meador
@RobMeador
Jun 19 2017 09:30
@jimtryon Will do. Thanks!
CamperBot
@camperbot
Jun 19 2017 09:30
robmeador sends brownie points to @jimtryon :sparkles: :thumbsup: :sparkles:
:cookie: 241 | @jimtryon |http://www.freecodecamp.com/jimtryon
devg02
@devg02
Jun 19 2017 09:38
Can someone tell me what the difference is between bootstrap 3 and 4.?My image refused to be responsive when using img-responsive or div class thumbanail while using bootstrap 4.
Vasundhara sharma
@vasundharak
Jun 19 2017 09:52
@devg02 can you show your code
CallMeOrange
@EgnaroDev
Jun 19 2017 09:52
its just verison
Henry
@GitHub-Henry
Jun 19 2017 09:56
@devg02 here's your bootstrap 3 vs bootstrap 4 answer
Alexander Domikov
@AlexanderDom
Jun 19 2017 10:09
@devg02 basicly, bootstrap 4 uses display: flex for grid system and changes/removes some V3 classes
Jim Tryon
@jimtryon
Jun 19 2017 10:09
that is a good answer, flex property was added in Bootstrap4 along with some other additional classes
Odin Jorna
@OdinJorna
Jun 19 2017 10:14
hello! I am making a portfolio and I am stuck on how to size elements. Is there somebody who can help me with that?
devg02
@devg02
Jun 19 2017 10:14
@h1tag Thanks looks like img-responsive was replaced by img-fluid no wonder my images weren't working properly. Spent way too much time on it.
CamperBot
@camperbot
Jun 19 2017 10:14
devg02 sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 854 | @h1tag |http://www.freecodecamp.com/h1tag
Alexander Domikov
@AlexanderDom
Jun 19 2017 10:17
@OdinJorna precise what you cant size or dont know how to size and we gonna help you ;)
Odin Jorna
@OdinJorna
Jun 19 2017 10:18
hi alexander! So in my page I alternate white with green boxes. The boxes I want to be as big as a screen, so that the contents can be resized to be fit into that. here is my pen: https://codepen.io/OdinJorna/pen/Qgdzmd?editors=1100
If that makes sence
Aydar
@Aydar350
Jun 19 2017 10:19
Hi! I don't understand why my menu vertical, not horizontal? <div class = "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li><a href="#">About me</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
Odin Jorna
@OdinJorna
Jun 19 2017 10:19
sense*
Alan Hunter
@iamalanhunter
Jun 19 2017 10:20
Hello..
Alexander Domikov
@AlexanderDom
Jun 19 2017 10:20
@OdinJorna
you mean something like
[class*=Element-] {
  min-height: 100vh;
}
i gonna explain you whats going on
just test if it's that what you want before ;)
Odin Jorna
@OdinJorna
Jun 19 2017 10:21
is this a style css thingy?
Alexander Domikov
@AlexanderDom
Jun 19 2017 10:21
it's a css rule yes :)
Odin Jorna
@OdinJorna
Jun 19 2017 10:22
don't css rules start with a dot?
Jim Tryon
@jimtryon
Jun 19 2017 10:22
Not always
Alexander Domikov
@AlexanderDom
Jun 19 2017 10:22
all elements with class attributes who has Element- everywhere in it, gonna minimum take 100% of your support height
Odin Jorna
@OdinJorna
Jun 19 2017 10:23
okay, so if i wanted to add this rule to a <div> it would be <div class="Element-"> ?
Alexander Domikov
@AlexanderDom
Jun 19 2017 10:23
not exactly ;)
Element-1, Element-afvezfefezfzefzef, Element-ELement all can work with it
i've added it to work with your Element-1, 2, 3...
it works with all your Element divs now
Odin Jorna
@OdinJorna
Jun 19 2017 10:25
wow thanks! @AlexanderDom are the brackets to specify it for every element-?
Alexander Domikov
@AlexanderDom
Jun 19 2017 10:25
brackets are for attributes
like title, class, id, data- attributes, input types...
Odin Jorna
@OdinJorna
Jun 19 2017 10:26
ah okay
Alexander Domikov
@AlexanderDom
Jun 19 2017 10:26
by the way [id=id] it way lighter than #id selector
Jim Tryon
@jimtryon
Jun 19 2017 10:26
@AlexanderDom I recently discovered some of these new selectors and they are awesome!
Alexander Domikov
@AlexanderDom
Jun 19 2017 10:27
and last advice, @OdinJorna
<html>
    <head>
        <title>Odin's Portfolio Page</title>
        <!-- i don't know what this is for tbh! -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
you dont need of html, and head inside codepen
codepen add it already for you
for title, viewport and external files go to pen settings
Odin Jorna
@OdinJorna
Jun 19 2017 10:27
okay!
@AlexanderDom thanks!
CamperBot
@camperbot
Jun 19 2017 10:27
odinjorna sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 439 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
Alexander Domikov
@AlexanderDom
Jun 19 2017 10:28
@jimtryon actually, they are css2.1 selectors ;) i mean attribute selectors
Jim Tryon
@jimtryon
Jun 19 2017 10:29
yes, love that website @AlexanderDom (I often recommend it too)
Alexander Domikov
@AlexanderDom
Jun 19 2017 10:29
you're welcome @OdinJorna ;)
Jim Tryon
@jimtryon
Jun 19 2017 10:30
@AlexanderDom I think they are older selectors, haven’t experimented with css3 selectors
Alexander Domikov
@AlexanderDom
Jun 19 2017 10:30
@jimtryon , :not(), :last-child, :last-of-type, :empty ... there are some nice one :]
Jim Tryon
@jimtryon
Jun 19 2017 10:31
@AlexanderDom I’ve used :not and :last-child but not the other two yet
denizenofcode
@denizenofcode
Jun 19 2017 10:32
Any ideas on how to make the snippet spans show up as text and not show the <span> html? I'm not sure how to approach it.
Alexander Domikov
@AlexanderDom
Jun 19 2017 10:34
@jimtryon :nth-child are nice too ;)
Jim Tryon
@jimtryon
Jun 19 2017 10:35
@AlexanderDom I’m still trying to understand that one, it’s a more tricky one
PonniThirumoorthy
@PonniThirumoorthy
Jun 19 2017 10:35
is it possible to add a bootstrap class inside style sheet?
something like this
li{
class:"text-center"
}
Jim Tryon
@jimtryon
Jun 19 2017 10:36
I think that is supported in SASS
not LESS
Alexander Domikov
@AlexanderDom
Jun 19 2017 10:38
@PonniThirumoorthy why you want to add bootstrap class ? you want to overwrite a bootstrap class ?
in less and sass you can do li { .text-center } by the way it gonna result in li .text-center {}
PonniThirumoorthy
@PonniThirumoorthy
Jun 19 2017 10:40
@AlexanderDom I want to remove redundancy. I would like to apply a custom class to all my li elements. Instead of having to provide them in each of my li attributes, I was just thinking of ways to provide it from one place.
Alexander Domikov
@AlexanderDom
Jun 19 2017 10:40
@jimtryon do some tests with codepen ;) https://codepen.io/zakkain/pen/ALiBx
@PonniThirumoorthy you can add a class on parent ul than .parentUlClass > li
Jim Tryon
@jimtryon
Jun 19 2017 10:42
@AlexanderDom thanks :)
CamperBot
@camperbot
Jun 19 2017 10:42
jimtryon sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 440 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
Alexander Domikov
@AlexanderDom
Jun 19 2017 10:42
@jimtryon you're welcome ;)
PonniThirumoorthy
@PonniThirumoorthy
Jun 19 2017 10:48
@AlexanderDom nice
Ben said
@BenSaidRachid
Jun 19 2017 10:55
hi all,look at my function start(),when i change the color then change it back,my css ":active" doesn't work anymore,why?
Ben said
@BenSaidRachid
Jun 19 2017 11:12
i fixed it!
Vasundhara sharma
@vasundharak
Jun 19 2017 11:18
Hi guys, how can i make sure that the text and buttons are responsive when i change my window size
Ken Haduch
@khaduch
Jun 19 2017 11:22
@vasundharak - are you using bootstrap? You can set up the grid with the buttons and text to move as you need.
Vasundhara sharma
@vasundharak
Jun 19 2017 11:23
PonniThirumoorthy
@PonniThirumoorthy
Jun 19 2017 11:24
how does push and pull of bootstrap work?
Vasundhara sharma
@vasundharak
Jun 19 2017 11:24
@khaduch navigation bar and the buttons and text on the image are not responsive
Ken Haduch
@khaduch
Jun 19 2017 11:39
@vasundharak - if you follow the example navbar from the bootstrap documentation, it works great. You should start with their code and make adjustments to us as you require. Also, for proper use of codepen, you should have your CSS library entered in the CSS configuration box in an external resource text box, not in the HTML panel.
Ben said
@BenSaidRachid
Jun 19 2017 11:42

hi all,i don't understand,when hitting the button reset,it supposed to begin from the beginning of the array "arr"(function strat()),i checked the console it works,the array get all the values one by one,but in the loop "while",when i wrote

tmp=arr[0];

the first value keep changing,it becomes the new value,why?

https://codepen.io/abdel974/pen/eRvzEN?editors=0010

kalzimonium
@kalzimonium
Jun 19 2017 12:03
could anyone please help me with this "build a tribute page" lesson?
the whole codepen website is different from what the class tells me. there is no "quick add" for boostrap and when I added it manually it didn't work
Ken Haduch
@khaduch
Jun 19 2017 12:05
@kalzimonium -there is a quick add for bootstrap on the CSS configuration panel. You should select Bootstrap 3. You should not need to add it manually.
kalzimonium
@kalzimonium
Jun 19 2017 12:10
@khaduch i must be blind then. I can't see it at all
Alexander Domikov
@AlexanderDom
Jun 19 2017 12:11
Capture d’écran 2017-06-19 à 14.11.11.png
@kalzimonium here you go
first click at left of word CSS in css tab
Capture d’écran 2017-06-19 à 14.11.58.png
Ken Haduch
@khaduch
Jun 19 2017 12:13
@kalzimonium - looks like @AlexanderDom posted what I was just about to post...
kalzimonium
@kalzimonium
Jun 19 2017 12:13
@AlexanderDom my page doesn't look like that at all
Alexander Domikov
@AlexanderDom
Jun 19 2017 12:13
Oo, you are on codepen right ?
kalzimonium
@kalzimonium
Jun 19 2017 12:13
I can't even change the view on my page
yup
Alexander Domikov
@AlexanderDom
Jun 19 2017 12:14
you have 3 tabs ? html css js ?
Ken Haduch
@khaduch
Jun 19 2017 12:14
@AlexanderDom - have you start a new Pen?
sorry, that was for @kalzimonium
kalzimonium
@kalzimonium
Jun 19 2017 12:14
you mean a new project? yes I did
Alexander Domikov
@AlexanderDom
Jun 19 2017 12:14
what browser did you use ?
kalzimonium
@kalzimonium
Jun 19 2017 12:14
chrome
Alexander Domikov
@AlexanderDom
Jun 19 2017 12:14
^^
project
Ken Haduch
@khaduch
Jun 19 2017 12:14
@kalzimonium - no, do a new Pen, not a project...
Alexander Domikov
@AlexanderDom
Jun 19 2017 12:14
we talking about pen on codepen
kalzimonium
@kalzimonium
Jun 19 2017 12:14
let me try that then.
Alexander Domikov
@AlexanderDom
Jun 19 2017 12:15
and yes project is completely different
Ken Haduch
@khaduch
Jun 19 2017 12:15
projects are something new, you don't want a project...
Alexander Domikov
@AlexanderDom
Jun 19 2017 12:15
not for a single page for sure
kalzimonium
@kalzimonium
Jun 19 2017 12:16
@khaduch now i see. got it. thank you so much
CamperBot
@camperbot
Jun 19 2017 12:16
kalzimonium sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3009 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Jun 19 2017 12:16
on the free account you can only have one project, so it will not be too helpful if you are doing multiple exercises - stick with using Pens
kalzimonium
@kalzimonium
Jun 19 2017 12:17
@AlexanderDom thank you so much
CamperBot
@camperbot
Jun 19 2017 12:17
kalzimonium sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 441 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
Ken Haduch
@khaduch
Jun 19 2017 12:17
@kalzimonium - you're welcome
Alexander Domikov
@AlexanderDom
Jun 19 2017 12:18
@kalzimonium you're welcome @khaduch was before me ;) i've added some images
Ken Haduch
@khaduch
Jun 19 2017 12:19
@AlexanderDom - your help was very good - nice images.
kalzimonium
@kalzimonium
Jun 19 2017 12:19
I am definitely coming back with more questions. lol
Alexander Domikov
@AlexanderDom
Jun 19 2017 12:20
;) until next time
Ben said
@BenSaidRachid
Jun 19 2017 12:24
hi all,i don't understand,when hitting the button reset,it supposed to begin from the beginning of the array "arr"(function strat()),i checked the console it works,the array get all the values one by one,but in the loop "while",when i wrote
tmp=arr[0];
the first value keep changing,it becomes the new value,why?
https://codepen.io/abdel974/pen/eRvzEN?editors=0010
Alexander Domikov
@AlexanderDom
Jun 19 2017 12:25
each time i click on buttons there are js error @abdel974 pen.js:60 Uncaught ReferenceError: win is not defined
Ken Haduch
@khaduch
Jun 19 2017 12:27
@abdel974 - I think that what you are doing is not going to work the way that you want it to. Setting up a setTimeout like you are doing will not "freeze" the code for that time - I believe that your while loop just kind of zooms through setting up all of those timeouts, which then fire all at once.
SAURABH SHEORAIN
@SSheorain
Jun 19 2017 12:29
Ravi Kishore Thella
@ravikishorethella
Jun 19 2017 12:31
@SSheorain good work :clap:
SAURABH SHEORAIN
@SSheorain
Jun 19 2017 12:32
@ravikishorethella thanks bro
CamperBot
@camperbot
Jun 19 2017 12:32
ssheorain sends brownie points to @ravikishorethella :sparkles: :thumbsup: :sparkles:
:cookie: 721 | @ravikishorethella |http://www.freecodecamp.com/ravikishorethella
Ravi Kishore Thella
@ravikishorethella
Jun 19 2017 12:32
@SSheorain :thumbsup:
Hussain Haider
@HussainHaider
Jun 19 2017 12:38
Hello Everyone I'm currently working on Local weather Project ..I write its javascript using api but its not working ...Here is the link https://codepen.io/Syed_Hussain/pen/NgbNZm kindly solve my issue..Thank U
Alexander Domikov
@AlexanderDom
Jun 19 2017 12:39
@SSheorain there are a js error Uncaught Error: Bootstrap tooltips require Tether, its appears when you click on clear too
Ken Haduch
@khaduch
Jun 19 2017 12:40
@SSheorain - looks good for the wikipedia project
SAURABH SHEORAIN
@SSheorain
Jun 19 2017 12:41
@AlexanderDom i check to it
@khaduch thanks dude
CamperBot
@camperbot
Jun 19 2017 12:41
ssheorain sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3010 | @khaduch |http://www.freecodecamp.com/khaduch
Alexander Domikov
@AlexanderDom
Jun 19 2017 12:41
otherway yes very nice, funny for cursor: crosshair never seen it before ^^
SAURABH SHEORAIN
@SSheorain
Jun 19 2017 12:42
@AlexanderDom Clear button is working fine for me
Alexander Domikov
@AlexanderDom
Jun 19 2017 12:42
yes it works, it just there are js error in browser console
SAURABH SHEORAIN
@SSheorain
Jun 19 2017 12:42
which browser u are using
Alexander Domikov
@AlexanderDom
Jun 19 2017 12:42
chrome
SAURABH SHEORAIN
@SSheorain
Jun 19 2017 12:42
its works fine
Alexander Domikov
@AlexanderDom
Jun 19 2017 12:43
some on firefox
SAURABH SHEORAIN
@SSheorain
Jun 19 2017 12:43
check it out again .. please
Alexander Domikov
@AlexanderDom
Jun 19 2017 12:43
yes, it works but every time you click it there are js error in console
not codepen console, browser console
SAURABH SHEORAIN
@SSheorain
Jun 19 2017 12:44
ok.. need to see that
btw thanks for the feedback
Alexander Domikov
@AlexanderDom
Jun 19 2017 12:45
you're welcome ;)
Ben said
@BenSaidRachid
Jun 19 2017 12:47
@AlexanderDom fixed @khaduch so what could i do to freeze the code for a time without getting something unwanted?
Alexander Domikov
@AlexanderDom
Jun 19 2017 12:48
delay ? :)
jQuery.delay
Ken Haduch
@khaduch
Jun 19 2017 12:51
@abdel974 - the way I do this is to use setInterval and have a function that is running through a sequence of operations, like displaying the sequence of button clicks on the simon game. (Although I haven't really done the simon game, I have played around with some ideas.)
Ben said
@BenSaidRachid
Jun 19 2017 12:55
ok i will try then ;thanks a lot @AlexanderDom @khaduch
sampson
@samourai18
Jun 19 2017 13:28
Hello how are you all doing been like ages since I was here
Ben said
@BenSaidRachid
Jun 19 2017 13:36
it works now,but it displays all the color at the same time,why?and how could i fixed this?
https://codepen.io/abdel974/pen/eRvzEN?editors=0010
@samourai18 fine and you?
sampson
@samourai18
Jun 19 2017 13:48
Am fine too
Everything feels new here to me
Andrew Hickman
@ahickman3
Jun 19 2017 14:12
@SkyC0der what are other ways to get json besides using ajax and getjson? Just read your response lol
Eric Weiss
@eweiss17
Jun 19 2017 14:24
getJSON IS ajax though
Ken Haduch
@khaduch
Jun 19 2017 14:30
@abdel974 - Hello - you have a problem similar to what you had earlier. setTimeout only sets up an event to happen some time later (the timeout period) It does not stop the flow of execution of the code. So your code will quickly set up all of the timeout events, which will then happen at about the same time. I think that the only way to do this is to use a setInterval timer, and set it up so that each time the interval expires, the callback will get the next sequential event to process and make it happen, which should set up the state for the next event, then wait for the timer to kick in again, etc.
Ben said
@BenSaidRachid
Jun 19 2017 14:35
@khaduch ok i see,i thought that setInterval would repeat something at each intervalle(1sec for example),but it could work if i can stop it
for a moment i wanted to use sleep instead but it doesn't work either,it does the same as setTimeout
Ken Haduch
@khaduch
Jun 19 2017 14:37
@abdel974 - exactly! I don't know if someone has any other ideas about how to do this, to me, using setInterval, and being able to stop the interval timer at the end of the chain of events, is the way to accomplish this. I have a simple jsfiddle example, if it would help, but let me see what you just posted.
@abdel974 - you really need to have some way to spread the events out over the length of time, and none of the single-event timer functions do that. From within one of the timeout events, you could invoke the next one, but I like the setInterval technique because I know that it can be made to work.
Luigi Benvenuti
@lbluigi
Jun 19 2017 14:48
Can someone help me with Simon game? I have this bug: https://forum.freecodecamp.com/t/help-me-solve-a-strange-bug-on-my-simon-game/129068 and I can't solve it.
Abhijit
@blackbirdabhi
Jun 19 2017 14:56
Hi i am stuck on a challenge in the beta site: Applied Visual Design: Adjust the Width of an Element Using the width Property
What exactly is the card in this challenge?
Nick Sladic
@Nickadiemus
Jun 19 2017 14:58
@lbluigi How are you displaying your sequences on the simon game?
h1tag
@h1tag
Jun 19 2017 15:04
@blackbirdabhi it's just a name, it's doesn't have a meaning in the html/css syntax (i.e. it's just what the author has chosen as a class name, and it's used to refer to it. Usually class names are chosen based on what they resemble (e.g. nav for navigation bar, about for the about section of the page)
add a property to the entire card = select the class full-card and add the property to it
Ben said
@BenSaidRachid
Jun 19 2017 15:10
@khaduch i will try thanks
CamperBot
@camperbot
Jun 19 2017 15:10
abdel974 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3011 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Jun 19 2017 15:13
@lbluigi - do you have a link to your project? For some reason the forum posting isn't opening too quickly... if you have the link in there. The forum posting timed out, so if you have a link to your project, please post it here.
Luigi Benvenuti
@lbluigi
Jun 19 2017 15:22

@khaduch the project is here: https://codepen.io/lbluigi/pen/BZWLBg
Please note that it is not finished yet, I have to write other functions to reset the game and to play on strict mode. But I won't until I can solve this bug. Let me explain what happens.

When the page repeat the series of colors and, once it has finished, it add another new color to the series, sometimes the page skips a color. The page doesn't hover the color and doesn't play the sound.
For example, I have a series of colors = [red, blue, green, blue, yellow, green] and the page shows [red, blue, green, blue, green] skipping yellow. This is an example. Often it happens when the series have two same colors in sequence, like [red, red], [blue, blue, blue, blue] and so on. Sometimes it also skips more than one color.

I also have to solve some css flexbox issues, but that's not important at the moment, and I can do it on my own
Ken Haduch
@khaduch
Jun 19 2017 15:22
@lbluigi - okay, the forum post finally showed up. The problem is that you are using setTimeout (well, I haven't analyzed it fully, but setTimeout is not a really effective way to operate this machine.) The call to setTimeout queues up an event to happen whenever the timeout period expires. But it does not delay the operation of the code. For example, if you have a loop that is going through your array, it will potentially queue up all of the setTimeout calls in rapid succession, so that they happen almost simultaneously when the timeout expires. It will result in flaky behavior, if it doesn't behave exactly as I'm theorizing... I'm trying to take a look at your code to understand it a little better.
Vali
@valimikayilov
Jun 19 2017 15:23
How to delete margin between navbar and container ? https://codepen.io/Geek-Killer/pen/GErzgq
Luigi Benvenuti
@lbluigi
Jun 19 2017 15:26
@khaduch oh, I see. So how am I supposed to delay the operations of the code?
Andrew Hickman
@ahickman3
Jun 19 2017 15:27
anyone know how to make jumbotron height transition when it changes size to fit text inside of it?
Nick Sladic
@Nickadiemus
Jun 19 2017 15:28
@fullmetal7777 What do you exactly mean?
Andrew Hickman
@ahickman3
Jun 19 2017 15:30
@Nickadiemus https://codepen.io/fullmetal7777/pen/RgKagp so basically, if it pulled a quote over 1 line, it needs to make the jumbotron bigger to fit the line. I want it to ease to the height instead of just immediately popping to that height
Ken Haduch
@khaduch
Jun 19 2017 15:31
@lbluigi - my way of attempting this (and note that I haven't really gone too far with this game exercise, but I've looked at a lot of people's code and done some experimentation on my own) is to make an event loop using setInterval as the timer, and control the interval timer with the count of events, so that you can stop it at the end of the list of events. That way, each time the interval timer fires, the next color will be displayed, etc. There might be a way to sequence the events with setTimeout, but you would have to either kick off the next setTimeout function within the callback for the current one, or for a sequence of setTimeout calls, add further delay to each subsequent setTimeout invocation, so that if you start them all at the same time, they will be spaced out in time by the increased timeout value. I like using setInterval. I have a simple jsfiddle that shows the idea (without any documentation...) but you can see it in action if you go there and click the run button.
Andrew Hickman
@ahickman3
Jun 19 2017 15:32
@Nickadiemus it didnt save apparently lol here https://codepen.io/fullmetal7777/pen/RgKagp
Nick Sladic
@Nickadiemus
Jun 19 2017 15:33
@fullmetal7777 So you want the quote (if over a line) to expand the box in a slow transition?
Andrew Hickman
@ahickman3
Jun 19 2017 15:33
exactly
the jumbotron to expand in a slow transition yeah
ive tried transition: min-height 1s linear; but that didnt work, which i figured
Nick Sladic
@Nickadiemus
Jun 19 2017 15:35
@fullmetal7777 You could use keyframes to transition it
using CSS3
Andrew Hickman
@ahickman3
Jun 19 2017 15:36
never heard of em, ill google around though. Thanks! @Nickadiemus
CamperBot
@camperbot
Jun 19 2017 15:36
fullmetal7777 sends brownie points to @nickadiemus :sparkles: :thumbsup: :sparkles:
:cookie: 320 | @nickadiemus |http://www.freecodecamp.com/nickadiemus
Nick Sladic
@Nickadiemus
Jun 19 2017 15:36
@fullmetal7777 no problem. Check it out here https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
Luigi Benvenuti
@lbluigi
Jun 19 2017 15:36
@khaduch Thanks a lot! I'll give it a look. The strange fact is that I increase the delay count every time a block has to change color, so I really don't know why it doesn't work as I expect. Anyway, thank you for your time and sorry if my code is not the greatest to read.
CamperBot
@camperbot
Jun 19 2017 15:36
lbluigi sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3012 | @khaduch |http://www.freecodecamp.com/khaduch
Nick Sladic
@Nickadiemus
Jun 19 2017 15:36
I use it for my presonal site to fade in my loading page
Andrew Hickman
@ahickman3
Jun 19 2017 15:36
oh, so its kinda like the media query of transitions lol
@Nickadiemus so i just put the keyframe below the object i want to transition?
oh nvm i see he linked it with mymove.
Nick Sladic
@Nickadiemus
Jun 19 2017 15:40
@fullmetal7777 Yeah, you can name it your own class and look up all the transitions/animations it supports
Ken Haduch
@khaduch
Jun 19 2017 15:41
@lbluigi - oh, I see what you're trying to do. .indexOf will find the first occurrence of a value, so you would always get the same timeout value for a color. Try just using the index that you are using in the array and see if that makes it better? Because that's the idea I thought might work, I just couldn't pick it out with the more complex structure setting up those functions.
Andrew Hickman
@ahickman3
Jun 19 2017 15:42
@Nickadiemus can i still do this with a transition?
not sure how id do it with an animation, since i dont want it to animate anything. Havnt worked much with animations to know though
Nick Sladic
@Nickadiemus
Jun 19 2017 15:45
@fullmetal7777 Yeah I believe so. I don’t know much of the syntax on transistions though
Ken Haduch
@khaduch
Jun 19 2017 15:45
@lbluigi - I made that change to just use l instead of the .indexOf, and it works quite a bit better. A little quirky, but it looks better than it did.
Andrew Hickman
@ahickman3
Jun 19 2017 15:49
@Nickadiemus i looked at the bootstrap css and cant find anything just details how a jumbotron works surprisingly. Any idea how i would have it transition based off of a % of its current height? i did height 0% 25% etc and that just changed the height in respect to the page
Jorge
@OrangeKulture
Jun 19 2017 15:50
hey guys
Ken Haduch
@khaduch
Jun 19 2017 15:50
@OrangeKulture - hey there...
SAURABH SHEORAIN
@SSheorain
Jun 19 2017 15:50
Jorge
@OrangeKulture
Jun 19 2017 15:50
hows it going Ken? all good?
Nick Sladic
@Nickadiemus
Jun 19 2017 15:51
@fullmetal7777 UmmI beleive insead of using percentage of the height jsut use the max-heigh attribute
Jorge
@OrangeKulture
Jun 19 2017 15:51
@fullmetal7777 what are you trying to do with the jumbotron?
Andrew Hickman
@ahickman3
Jun 19 2017 15:52
the jumbotron is in a container though, so should i be doing the animation with respect to the container? @Nickadiemus
Luigi Benvenuti
@lbluigi
Jun 19 2017 15:52
@khaduch what do you mean by using l?
Andrew Hickman
@ahickman3
Jun 19 2017 15:52
@OrangeKulture trying to make the jumbotron transition when the height changes because of the text in it, instead of it just popping to a new height
Luke Miller
@dalumiller
Jun 19 2017 15:53
Can anyone give me some advice on why my function is failing?
Nick Sladic
@Nickadiemus
Jun 19 2017 15:53
@fullmetal7777 Yeah, I believe that would be easier
Luke Miller
@dalumiller
Jun 19 2017 15:53
image.png
Nick Sladic
@Nickadiemus
Jun 19 2017 15:53
@dalumiller post it in here
Andrew Hickman
@ahickman3
Jun 19 2017 15:53
starting to think i should use js to ass the poperty anytime the quote button is pressed
Luke Miller
@dalumiller
Jun 19 2017 15:54
image.png
Ken Haduch
@khaduch
Jun 19 2017 15:54
@lbluigi - I made a change like this, one of your code snippets:
    if (series[l] === 'green') {
      setTimeout(function () {
        green.className = 'col darkGreen';
        greenSound.play();
        setTimeout(function () {
          green.className = 'col green';
        }, 500);
      }, 500 * l); // take away the .indexOf here, replace it with multiplication by the index variable

    } else if (series[l] === 'red') {
Nick Sladic
@Nickadiemus
Jun 19 2017 15:54
@Luke use the
to post your code isntead of a screenshot
it’s easier to understand
Jorge
@OrangeKulture
Jun 19 2017 15:54
@fullmetal7777 you can do transistion: height 1s linear u can change time and transition speed
Luke Miller
@dalumiller
Jun 19 2017 15:55
@Nickadiemus how do I do that?
Andrew Hickman
@ahickman3
Jun 19 2017 15:55
@OrangeKulture didnt do a thing lol it was the first thing i tried to do
Ken Haduch
@khaduch
Jun 19 2017 15:55
@dalumiller - you don't want to do a return from within the loop - it will end what your function is doing and so it will not completely iterate through the array.
Andrew Hickman
@ahickman3
Jun 19 2017 15:55
nick suggested using keyframes, which atm sounds like the solution. Just trying to figure it out now though
Jorge
@OrangeKulture
Jun 19 2017 15:56
@fullmetal7777 you have to resize it . change linear to ease
that might help
Ken Haduch
@khaduch
Jun 19 2017 15:56
@dalumiller - to post code - see the info here: https://forum.freecodecamp.com/t/markdown-code-formatting/18391
Luke Miller
@dalumiller
Jun 19 2017 15:56
@khaduch I've been trying to avoid that but I dont know how to call for the variable outside of the loop since its not global then
Andrew Hickman
@ahickman3
Jun 19 2017 15:57
@OrangeKulture didnt work
Jorge
@OrangeKulture
Jun 19 2017 15:58
 can you show your code ?
lol .. no code
Luigi Benvenuti
@lbluigi
Jun 19 2017 15:58
@khaduch THIS, this is what I wanted to achieve. THANKS! but i noticed that if I have two same colors in sequence, the blockwon't change color
CamperBot
@camperbot
Jun 19 2017 15:58
lbluigi sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: lbluigi already gave khaduch points
Ken Haduch
@khaduch
Jun 19 2017 15:59
@dalumiller - declare an array variable just before you start your for loop - push sub-arrays onto that array, then after the for loop completes, return the array that you declared internally.
Luigi Benvenuti
@lbluigi
Jun 19 2017 15:59
@khaduch for example [red, red] or [blue, blue, blue]
Luke Miller
@dalumiller
Jun 19 2017 16:00
@khaduch Ok, let me try that
Andrew Hickman
@ahickman3
Jun 19 2017 16:01
Ken Haduch
@khaduch
Jun 19 2017 16:03
@lbluigi - that's what I meant by being "flaky" - each setTimeout runs independently, so I could imagine that things potentially happen out of sequence sometime? Or it could be setting the color back to the highlight color immediately. Maybe if you change the time for the initial setTimeout to be longer than 500? So that it might have a gap between the two color change settings?
Jorge
@OrangeKulture
Jun 19 2017 16:04
@fullmetal7777 In my opinion, you are not using the jumbotron tag correctly ..
I would simply make a container div, centered on the page, that's just responsive to the screen size
Luigi Benvenuti
@lbluigi
Jun 19 2017 16:05
@khaduch I'm going to try, but I don't want to waste your time. You hve been a great help, I was stuck on that problem for one day ahah. Thanks again!
CamperBot
@camperbot
Jun 19 2017 16:05
lbluigi sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: lbluigi already gave khaduch points
denizenofcode
@denizenofcode
Jun 19 2017 16:05
Hello, why don't margins appear between <a> results?
Jorge
@OrangeKulture
Jun 19 2017 16:06
jumbotron is usually a reaaally big hero image with some text in it, but it's usually to grab the attention of the visitor on the web pages .. sort of like a billboard add ... this is just my opinion tho
Andrew Hickman
@ahickman3
Jun 19 2017 16:08
@OrangeKulture i considered just ditching the jumbotron a couple times lol
Monica Parrillo
@monicaparrillo
Jun 19 2017 16:08
Hey guys, I made my Wiki Viewer, but I want each article to fade in as its ready? How can I do that from where my code is now? https://codepen.io/monicaleep/pen/qjRYMv
Nick Sladic
@Nickadiemus
Jun 19 2017 16:09
@fullmetal7777 Yeah I would suggest Jorge’s input
@monicaparrillo You can use keyframes
Andrew Hickman
@ahickman3
Jun 19 2017 16:10
@OrangeKulture actually, im close to doing it lol just cant keep it from starting at its minimum height, which makes sense
Ken Haduch
@khaduch
Jun 19 2017 16:10

@lbluigi - try this setting:

   if (series[l] === 'green') {
      setTimeout(function () {
        green.className = 'col darkGreen';
        greenSound.play();
        setTimeout(function () {
          green.className = 'col green';
        }, 500);
      }, 700 * l);

Change that "outer" setting to 700. seems to be better?

Jorge
@OrangeKulture
Jun 19 2017 16:10
@fullmetal7777 Yeah, i would enclose everything on a container div .. container on bootstrap already has a margin 0 auto, so it will be centered and the div can resize as you wish
Monica Parrillo
@monicaparrillo
Jun 19 2017 16:10
@Nickadiemus thanks will look into it...
Nick Sladic
@Nickadiemus
Jun 19 2017 16:11
@monicaparrillo If you want I can show you some of my code I use to fadeIn
Andrew Hickman
@ahickman3
Jun 19 2017 16:12
eh, screw it, ima just give up on that feature lol
Nick Sladic
@Nickadiemus
Jun 19 2017 16:12
@monicaparrillo or the open source CSS called Animate.css is a good prebuilt animations for free
Jorge
@OrangeKulture
Jun 19 2017 16:12
Try something like this:
<div class="container text-center"
   <h2>"Andrews Random Quote Generator. "</h2>
   <h4>-Author</h4>
  <button class="btn btn-primary twit-btn"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"><span id="twit-
  Text">Tweet it</span></i></button>
  <button class="btn btn-default quote-btn"><span id="whole-text">Falcon PUNCH!</span></button>
</div>
didnt check the content tho, onlycopy and pasted .. so you might need to change stuff if it doesnt render properly
note that the Author has a typo .. you closed the tag with </h1> and its supposed to be </h4>
Monica Parrillo
@monicaparrillo
Jun 19 2017 16:13
@Nickadiemus can i see yours? I think I might have to refactor my jQuery to make it work?
Luigi Benvenuti
@lbluigi
Jun 19 2017 16:13
@khaduch Yes, I solved it using 1000 instead of 500. You're awesome man! thanks
Jorge
@OrangeKulture
Jun 19 2017 16:15
i think the chat is having some technical difficulties
Ken Haduch
@khaduch
Jun 19 2017 16:16
@lbluigi - just so it doesn't slow the game down too much. Good luck with that, and you're welcome!
Nick Sladic
@Nickadiemus
Jun 19 2017 16:17
@monicaparrillo Yeah hold on
Chandan-Raj
@Chandan-Raj
Jun 19 2017 16:18
hello guys how do i add navigation bar to a web page.....like what class do i have to use
Nick Sladic
@Nickadiemus
Jun 19 2017 16:23

@monicaparrillo Here is what I use on my personal site. I set up the keyframes for multiple browsers and just make my own transition called “fadein” then make subclasses of th fade-in class labeling each transition in numerical order giving them a different time to transition. you can add more if you need more than four.

CSS

@-webkit-keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
@-moz-keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }

.fade-in{
    opacity: 0;
    -webkit-animation:fadeIn ease-in 1;
    -moz-animation:fadeIn ease-in 1;
    animation: fadeIn ease-in 1;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    animation-duration: 2s;
}

.fade-in.one{
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    animation-delay: 0s;
}

.fade-in.two{
    -webkit-animation-delay:.5s;
    -moz-animation-delay:.5s;
    animation-delay: .5s;
}

.fade-in.three{
    -webkit-animation-delay: .7s;
    -moz-animation-delay: .7s;
    animation-delay: .7s;
}
.fade-in.four{
    -webkit-animation-delay:1s;
    -moz-animation-delay:1s;
    animation-delay: 1s;
}

HTML

<div class = “fade-in one>
<h1>Fades in at 0 seconds</h1>
</div>
<div class = “fade-in two>
<h1>Fades in at .5 seconds</h1>
</div>
<div class = “fade-in three>
<h1>Fades in at .7 seconds</h1>
</div>
<div class = “fade-in four>
<h1>Fades in at 1 second</h1>
</div>
I forgot the ending “ but you get the idea. All you have to do is add the class to the element you want to fade in
Monica Parrillo
@monicaparrillo
Jun 19 2017 16:25
woah thanks @Nickadiemus ! I had never heard of keyframes before!
Nick Sladic
@Nickadiemus
Jun 19 2017 16:26
@Chandan-Raj It depends. You can create your own from scratch or most open source frameworks allow you to add their custom class names for navbars
Andrew Hickman
@ahickman3
Jun 19 2017 16:32
when using .fadeOut and .fadeIn, theres a short gap inbetween wheres theres no image, is there anyway to eliminate that gap?
Nick Sladic
@Nickadiemus
Jun 19 2017 16:41
@fullmetal7777 Are you using the animate.css?
Youssef Tarek
@myoussef9366
Jun 19 2017 16:44

@myoussef9366

<p>Click here for <a href="http://www.freecatphotoapp.com">cat photos</a>.</p>
it asked me to do that Your a element should be a dead link with a href attribute set to "#".
what should i do ?

ivpd85
@ivpd85
Jun 19 2017 16:50
Hi guys! English is my second language, so i can't understand: in section Basic Front-end projects for project https://www.freecodecamp.com/challenges/build-a-personal-portfolio-webpage i should do portfolio for myself, or i should build page that shown in first objective?
Stephen James
@sjames1958gm
Jun 19 2017 16:51
@ivpd85 Build one for yourself
Aniculaesei
@Aniculaesei
Jun 19 2017 16:53
@Aniculaesei
Hello!Can you help me to center my text (town name FROM the city div pls?)Thank you
https://codepen.io/Aniculaesei/pen/rwazPd
Ben said
@BenSaidRachid
Jun 19 2017 16:58
hi,make a div "container" ,with text-align:center,and the div with the text display:inline-block
like so
<div id="contain-c">
<div id="contain"></div>
</div>
#contain-c
{
text-align:center;
}
#contain
{
display:inline-block;
}
in your case i would say,city and city-c or else,try this i think it works,if you want to center the div
Eric Weiss
@eweiss17
Jun 19 2017 17:10
@BarrySaidy what about it
ivpd85
@ivpd85
Jun 19 2017 17:15
@sjames1958gm tnx!
CamperBot
@camperbot
Jun 19 2017 17:15
ivpd85 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 7819 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Jun 19 2017 17:15
@ivpd85 :+1:
@myoussef9366 Find the <a> tag and replace the link in the href with #
Eric Weiss
@eweiss17
Jun 19 2017 17:17
you win the prize for most brownie points @sjames1958gm
Stephen James
@sjames1958gm
Jun 19 2017 17:17
@eweiss17 :)
@eweiss17 Me like brownies
Gulsvi
@gulsvi
Jun 19 2017 17:17
@Aniculaesei If you want the text inside the box horizontally and vertically centered, you can use flexbox. You could do the same on a parent container as well, or add a vh top margin to get the box centered more vertically as well. Adjust the values as desired:
#city {
  align-items: center;
  border: 3px solid #1dedea;
  border-radius: 10px;
  display: flex;
  font-size: 20px;
  height: 100px;
  justify-content: center;
  margin: 35vh auto 0;
  width: 220px;
}
@fullmetal7777 getJSON and ajax are just jQuery's way of getting JSON. jQuery uses pure javascript under the hood, so you could use regular old javascript to get JSON, or the new fetch() api. There are other libraries like jQuery that have their own methods for getting JSON as well.
Aniculaesei
@Aniculaesei
Jun 19 2017 17:29
@SkyC0der thank you
CamperBot
@camperbot
Jun 19 2017 17:29
aniculaesei sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1775 | @skyc0der |http://www.freecodecamp.com/skyc0der
Nick Sladic
@Nickadiemus
Jun 19 2017 17:39
Can anybody help me with centering text vertically and horizontally to be in the middle?
Gulsvi
@gulsvi
Jun 19 2017 17:43
@Nickadiemus Sure, can you share your code?

One way that usually works is:

  display: flex;
  align-items: center;
  justify-content: center;

But...can depend on other styling in place

Nick Sladic
@Nickadiemus
Jun 19 2017 17:46
@SkyC0der Bless your soul
@SkyC0der I tried the way you did it but I realized I didn't put the s on items ... rip
Gulsvi
@gulsvi
Jun 19 2017 17:46
lol
Nick Sladic
@Nickadiemus
Jun 19 2017 17:46
@SkyC0der thanks
CamperBot
@camperbot
Jun 19 2017 17:46
nickadiemus sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1776 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Jun 19 2017 17:47
Glad it worked out
landon jones
@landonjojo777
Jun 19 2017 17:48

https://codepen.io/landonjojo777/pen/MoJxvY

how do I get the "time line" text in-between were it is now and the middle

Gulsvi
@gulsvi
Jun 19 2017 17:50
@landonjojo777 Use "margin-left", or a more responsive approach is to put it in a bootstrap column and use the grid system.
Jonas Lee
@jtlscout
Jun 19 2017 17:52
Do position absolute then put left:whatever pixels u want
landon jones
@landonjojo777
Jun 19 2017 17:53
@SkyC0der "margin-left" Class?
Gulsvi
@gulsvi
Jun 19 2017 17:54
@landonjojo777 The CSS property: https://www.w3schools.com/cssref/pr_margin-left.asp
landon jones
@landonjojo777
Jun 19 2017 17:56
@SkyC0der thanks I forgot about that
CamperBot
@camperbot
Jun 19 2017 17:56
landonjojo777 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1777 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Jun 19 2017 17:56
No problem
alexd73
@alexd73
Jun 19 2017 17:57
Hi! Can you to give advice any tools and tips for displaying css styles with inDesign?
Nick Sladic
@Nickadiemus
Jun 19 2017 18:02
@SkyC0der could you take a look at my site and give me a suggestion on how to get my height for my work experience column to match the corresponding column?
www.nicksladic.me
@SkyC0der hold on let me commit it so you can see
Gulsvi
@gulsvi
Jun 19 2017 18:03
@Nickadiemus I'm a bit paranoid and don't visit custom domains... sorry :/
Put it up on github or codepen and I'd be happy to look
Nick Sladic
@Nickadiemus
Jun 19 2017 18:03
okay it's on my github
CallMeOrange
@EgnaroDev
Jun 19 2017 18:03
@SkyC0der yo
Gulsvi
@gulsvi
Jun 19 2017 18:03
Hello @MCTwoDigitZero
CallMeOrange
@EgnaroDev
Jun 19 2017 18:04
@SkyC0der Im not finished with portfolio but can you review it?
Gulsvi
@gulsvi
Jun 19 2017 18:04
Sure @MCTwoDigitZero, let me see if I can help with nick's site first
Nick Sladic
@Nickadiemus
Jun 19 2017 18:04
@SkyC0der here is the link to the repo. https://github.com/Nickadiemus/Portfolio
CallMeOrange
@EgnaroDev
Jun 19 2017 18:04
@SkyC0der sure
Nick Sladic
@Nickadiemus
Jun 19 2017 18:06
@SkyC0der the app folder has my html and css
Gulsvi
@gulsvi
Jun 19 2017 18:07
@Nickadiemus If you create a repository called Nickadiemus.github.io, you'll be able to see your site running live at: http://Nickadiemus.github.io/portfolio/app/assets/index.html
CallMeOrange
@EgnaroDev
Jun 19 2017 18:07
@Nickadiemus how long have you been doing html/css?
Nick Sladic
@Nickadiemus
Jun 19 2017 18:08
@MCTwoDigitZero About a year
CallMeOrange
@EgnaroDev
Jun 19 2017 18:08
Nice
Nick Sladic
@Nickadiemus
Jun 19 2017 18:08
@SkyC0der I know but I use Brunch to host my own live server and watch changes on a localhost
Gulsvi
@gulsvi
Jun 19 2017 18:09
It's just hard to debug code without a live demo...
This is why we use codepen here at Free Code Camp
Nick Sladic
@Nickadiemus
Jun 19 2017 18:10
@SkyC0der I know. I just don't enjoy developing in codepen :worried:
CallMeOrange
@EgnaroDev
Jun 19 2017 18:10
@Nickadiemus We have to get used to it :/
Gulsvi
@gulsvi
Jun 19 2017 18:13
@MCTwoDigitZero Send me a link to your portfolio and I'll take a look
Jorge
@OrangeKulture
Jun 19 2017 18:13
i guess we're back
Gulsvi
@gulsvi
Jun 19 2017 18:13
@Nickadiemus I'm sorry...but if you can get me a live demo on github or codepen I'm happy to take a look. Otherwise, maybe someone else can help out who isn't as paranoid as me :)
CallMeOrange
@EgnaroDev
Jun 19 2017 18:14
I have problem with projects image
Gulsvi
@gulsvi
Jun 19 2017 18:14
Hello @OrangeKulture :)
CallMeOrange
@EgnaroDev
Jun 19 2017 18:14
Not perfectly rectangle... and get bigger/smaller when scrolling on small device
I think it would be good if I remove pie chart then move these project section over there
Gulsvi
@gulsvi
Jun 19 2017 18:15
@MCTwoDigitZero Remove those floats from your CSS
The project image is floating over the other text and images
CallMeOrange
@EgnaroDev
Jun 19 2017 18:15
all of it?
oh floating
I see
Nick Sladic
@Nickadiemus
Jun 19 2017 18:15
@SkyC0der No I totally understand. Give me a second
CallMeOrange
@EgnaroDev
Jun 19 2017 18:16
Remove all floats in css?
Jorge
@OrangeKulture
Jun 19 2017 18:17
@SkyC0der hey Sky! hows it going ? all good
Gulsvi
@gulsvi
Jun 19 2017 18:17
Yeah, let bootstrap do the positioning for you @MCTwoDigitZero
Jorge
@OrangeKulture
Jun 19 2017 18:17
did u finish the book on advanced algorithms ?
CallMeOrange
@EgnaroDev
Jun 19 2017 18:17
@SkyC0der wow that actually fixed it
Gulsvi
@gulsvi
Jun 19 2017 18:17
@OrangeKulture summer is awesome. I just started the book, my summer project
CallMeOrange
@EgnaroDev
Jun 19 2017 18:17
@SkyC0der Any suggestions?
Jorge
@OrangeKulture
Jun 19 2017 18:18
ahh nice! hopefully you will be able to share your newly found algorithm awesomeness with the rest of us :joy:
Gulsvi
@gulsvi
Jun 19 2017 18:18
It's pretty intense lol, not sure what I've gotten myself into
CallMeOrange
@EgnaroDev
Jun 19 2017 18:18
@OrangeKulture :wave:
Gulsvi
@gulsvi
Jun 19 2017 18:19
@MCTwoDigitZero I think it's off to a good start :) just have to try using the bootstrap grid to get everything put in its place
CallMeOrange
@EgnaroDev
Jun 19 2017 18:19
yeah not so well on small devices
Jorge
@OrangeKulture
Jun 19 2017 18:19
@MCTwoDigitZero hows it going? u a full stack dev yet? :D
CallMeOrange
@EgnaroDev
Jun 19 2017 18:19
full stack? ....
I dont have front end cert yet
Gulsvi
@gulsvi
Jun 19 2017 18:20
Full Stack Overflow
Jorge
@OrangeKulture
Jun 19 2017 18:20
@SkyC0der yeah .. i thought so myself when you mentioned it .. definitely worth your while (and maybe mine too, since you most likely will become my tutor/mentor/cheat sheet)
CallMeOrange
@EgnaroDev
Jun 19 2017 18:20
lmao
@SkyC0der which book are you reading?
Jorge
@OrangeKulture
Jun 19 2017 18:21
@MCTwoDigitZero yeah but u will ... u will (read it in a very serious and intense voice tone)
Gulsvi
@gulsvi
Jun 19 2017 18:21
"Introduction to Algorithms - A creative approach" and "The Algorithm Design Manual"
CallMeOrange
@EgnaroDev
Jun 19 2017 18:21
Maybe
Nice
@SkyC0der I forgot to make my project images perfectly rectangle...
I could but how do I do stop it getting smaller when on small device?
Jorge
@OrangeKulture
Jun 19 2017 18:23
gitter's been on the gutter all day
Gulsvi
@gulsvi
Jun 19 2017 18:24
Yeah, lots of lag
CallMeOrange
@EgnaroDev
Jun 19 2017 18:25
After project images is fixed then I will make it scrolling x-axis
@SkyC0der what happen to gitter?
Gulsvi
@gulsvi
Jun 19 2017 18:25
I just have to keep refreshing it to see new messages
Jorge
@OrangeKulture
Jun 19 2017 18:26
yeah exactly .. it wont show msgs, wont show ppl online .. blows all around
landon jones
@landonjojo777
Jun 19 2017 18:26
@SkyC0der me too
CallMeOrange
@EgnaroDev
Jun 19 2017 18:26
wow
It only wont show ppl for me
Jorge
@OrangeKulture
Jun 19 2017 18:26
im gonna make my own gitter with blackjack and freecodecampers
CallMeOrange
@EgnaroDev
Jun 19 2017 18:26
I can see msgs everytime
@OrangeKulture lol
Jorge
@OrangeKulture
Jun 19 2017 18:26
:D
CallMeOrange
@EgnaroDev
Jun 19 2017 18:27
@OrangeKulture have you seen my portfolio
Am I lagging?
Jorge
@OrangeKulture
Jun 19 2017 18:29
I havent no .. you have a link?
yeah msgs take a few mins to populate.. not just you tho
Take a look then I will ask you a question
I was asking if I should remove pie chart but never mind...
Jorge
@OrangeKulture
Jun 19 2017 18:31
looks good!
CallMeOrange
@EgnaroDev
Jun 19 2017 18:31
How do I have text get below project images?
@OrangeKulture thanks
CamperBot
@camperbot
Jun 19 2017 18:31
mctwodigitzero sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 412 | @orangekulture |http://www.freecodecamp.com/orangekulture
Jorge
@OrangeKulture
Jun 19 2017 18:31
navigation works really nice .. smooth transition
CallMeOrange
@EgnaroDev
Jun 19 2017 18:31
yea
Jorge
@OrangeKulture
Jun 19 2017 18:32
you mean like a caption?
like a description of the project?
Will
@Will-is-Coding
Jun 19 2017 18:32
@MCTwoDigitZero So first thing: The text and the background don't have much contrast, so its a bit of a strain on the eye to read it. Second, check how things look when you make the browser window smaller - maybe use different col so that images may take up more room and get separated to different rows.(Like your image holders and the pie chart that get so squished it's impossible to read/see)
CallMeOrange
@EgnaroDev
Jun 19 2017 18:32
huh... Like tribute page next to image
Gulsvi
@gulsvi
Jun 19 2017 18:33
@MCTwoDigitZero This kind of shows how to do it: https://codepen.io/skycoder/pen/mwWXKO?editors=1100
Also how to get different image sizes based on screen size
CallMeOrange
@EgnaroDev
Jun 19 2017 18:34
Im not good with col..
I'll try
Jorge
@OrangeKulture
Jun 19 2017 18:34
best way is to design for mobile first and use media queries for desktop viewing .. at least for me, it's easier that way
Will
@Will-is-Coding
Jun 19 2017 18:34
Oh, sorry I was assuming you were using Bootstrap @MCTwoDigitZero
CallMeOrange
@EgnaroDev
Jun 19 2017 18:34
Never mind I didnt use col classes..
Should I?
Will
@Will-is-Coding
Jun 19 2017 18:35
Bootstrap just makes it easier to layout your design cleanly on a variety of sized windows(aka large desktop screen to a mobile screen)
CallMeOrange
@EgnaroDev
Jun 19 2017 18:35
@OrangeKulture how do you design for mobile?
Will
@Will-is-Coding
Jun 19 2017 18:35
But it is in no way necessary
CallMeOrange
@EgnaroDev
Jun 19 2017 18:36
@Will-is-Coding well what should I do to do it?
Will
@Will-is-Coding
Jun 19 2017 18:37
Look into media queries https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries For different sized windows. And just learn CSS over all to allow a more fluid site. There's so much in CSS, it is a bit overwhelming - but just googling what you want with CSS goes a way
If you don't want to learn Bootstrap that is(But is is a bit faster and has great documentation), but it is a good way to launch you forward with knowing less CSS off the bat
CallMeOrange
@EgnaroDev
Jun 19 2017 18:38
ok will do
Jorge
@OrangeKulture
Jun 19 2017 18:38
well, personally i use chrome's emulator for screen sizes (there are other emulators out there) .. and you basically make everything fit in a small screen first. Then, with media queries, you target larger devices
CallMeOrange
@EgnaroDev
Jun 19 2017 18:39
Man then I would have to start over
Next time.. I will update it
Gulsvi
@gulsvi
Jun 19 2017 18:39
I really think it's easiest to let bootstrap do that for you
It's designed to simplify media queries and CSS - and it's tested on all the browsers where your own custom css is not.
Will
@Will-is-Coding
Jun 19 2017 18:40
Sort of yes and no. But right, bootstrap would be easier and you'd really just be rewriting the div lines
CallMeOrange
@EgnaroDev
Jun 19 2017 18:41
:/ I will use bootstrap after Im done with this project
Gulsvi
@gulsvi
Jun 19 2017 18:41
I think in the end, you have to figure out what is easiest for you and go with that
CallMeOrange
@EgnaroDev
Jun 19 2017 18:41
I will just make another same one but using bootstrap
Jorge
@OrangeKulture
Jun 19 2017 18:41
it all depends on your style and what you wanna do .. there are lots of ways of doing things, as long as you get the desired results, I dont see how one is better than the other
Gulsvi
@gulsvi
Jun 19 2017 18:41
As you can see, everyone has different opinions :p and they're all valid
Jorge
@OrangeKulture
Jun 19 2017 18:41
yeah exactly .. it all depends on you, rather than the method in my opinion
CallMeOrange
@EgnaroDev
Jun 19 2017 18:41
But who use codepen on small devices?
Jorge
@OrangeKulture
Jun 19 2017 18:42
its more for your own good i think .. you know, just getting in the habit of thinking about this kinds of things
landon jones
@landonjojo777
Jun 19 2017 18:42
what can you use to make text bold?
CallMeOrange
@EgnaroDev
Jun 19 2017 18:42
Honestly I forgot what bootstrap is... I will learn it again
@landonjojo777 font-style: bold;
Gulsvi
@gulsvi
Jun 19 2017 18:42
codepen is just for development, you don't show off full websites on codepen
Jorge
@OrangeKulture
Jun 19 2017 18:42
when you are working as a dev and you have to come up with production quality code, you definitely need to make sure it looks good on all devices and across all browsers
landon jones
@landonjojo777
Jun 19 2017 18:42
@MCTwoDigitZero thanks
CamperBot
@camperbot
Jun 19 2017 18:42
landonjojo777 sends brownie points to @mctwodigitzero :sparkles: :thumbsup: :sparkles:
:cookie: 175 | @mctwodigitzero |http://www.freecodecamp.com/mctwodigitzero
Gulsvi
@gulsvi
Jun 19 2017 18:43
Unless you're showing off creepy clowns :p https://codepen.io/joshua_ward/pen/wegWYV
Jorge
@OrangeKulture
Jun 19 2017 18:43
font-weight probs? is that too old :D hahah i always use fotn-weight
CallMeOrange
@EgnaroDev
Jun 19 2017 18:43
@SkyC0der lol you shouldn't have say it..
you could've scare people here
Jorge
@OrangeKulture
Jun 19 2017 18:44
maan i wish a new creepy clown pic would come up everytime i toggle the blinds
Gulsvi
@gulsvi
Jun 19 2017 18:44
that's a good idea
or at least have him move around
Jorge
@OrangeKulture
Jun 19 2017 18:44
that would be freaky cool .. yeah
Gulsvi
@gulsvi
Jun 19 2017 18:44
different spot every time you toggle the blinds
CallMeOrange
@EgnaroDev
Jun 19 2017 18:46
lol
@SkyC0der I need your help with scrolling
I tried to add overfolwy whatever it is it works but its not axis-y
why is axis-x the same as axis-y?
Gulsvi
@gulsvi
Jun 19 2017 18:49
It should be different @MCTwoDigitZero
What are you trying to do?
CallMeOrange
@EgnaroDev
Jun 19 2017 18:49
horizontal scrolling
for project images
Gulsvi
@gulsvi
Jun 19 2017 18:50
you have to make the container for the images wider than the parent
CallMeOrange
@EgnaroDev
Jun 19 2017 18:51
I dont understand
Jorge
@OrangeKulture
Jun 19 2017 18:51
In my opinion, that's the one key concept to understand about CSS that'll help you tremendously with positioning and making things line up nicely: hierarchy
CallMeOrange
@EgnaroDev
Jun 19 2017 18:51
Do i have to add container class to that div elements?
I can make vertical scrolling but not horizontal why?
I have decided... after this I will build projects as many as I can
Jorge
@OrangeKulture
Jun 19 2017 18:55
yeah .. what u mean is, you want to scroll through your images/projects horizontally .. like a slider?
CallMeOrange
@EgnaroDev
Jun 19 2017 18:55
yeah
CallMeOrange
@EgnaroDev
Jun 19 2017 18:55
I have made one before but that is vertical
Gulsvi
@gulsvi
Jun 19 2017 18:55
You can do that with white-space: nowrap
CallMeOrange
@EgnaroDev
Jun 19 2017 18:56
@SkyC0der I have to have my images wider than the parent?
Gulsvi
@gulsvi
Jun 19 2017 18:56
and overflow-x: scroll
CallMeOrange
@EgnaroDev
Jun 19 2017 18:56
so that what you meant..
I have overflow-x: scroll so I just add white-space: nowrap?
Gulsvi
@gulsvi
Jun 19 2017 18:56
Yeah, otherwise, you see all the images at once and no need for a scroll bar
YozhikM
@YozhikM
Jun 19 2017 18:56
https://jsfiddle.net/c8bz5awp/1/ Where is my mistake?
CallMeOrange
@EgnaroDev
Jun 19 2017 18:56
yeah.. just in case
Jorge
@OrangeKulture
Jun 19 2017 18:56
there are a few ways you can do it .. parent/child elements , carousel .. there's quite a lot of jquery scripts that someone wrote that you can pretty much just use with classes .. very useful
YozhikM
@YozhikM
Jun 19 2017 18:57
OK
Where is a right way to do it?
Jorge
@OrangeKulture
Jun 19 2017 18:59
@YozhikM I think that the .find() method is only able to return child elements within the element it was called on
CallMeOrange
@EgnaroDev
Jun 19 2017 19:00
I guess you are right @SkyC0der I dont need scroll bar
landon jones
@landonjojo777
Jun 19 2017 19:01
https://codepen.io/landonjojo777/pen/MoJxvY
I cant figure out how to get the bullet, "1734", and ":Birth in Berks County,PA" all on the same line
plus I need "1734" and ":Birth in Berks County,PA" to be separate
Jorge
@OrangeKulture
Jun 19 2017 19:01
not really sure what you are trying to accomplish tho
CallMeOrange
@EgnaroDev
Jun 19 2017 19:01
@landonjojo777 bullet? use li tags
landon jones
@landonjojo777
Jun 19 2017 19:01
i am @MCTwoDigitZero
Jorge
@OrangeKulture
Jun 19 2017 19:02
@landonjojo777 your closing tags are in the wrong order
plus, i wouldnt use a opening and closing div tags inside the ul or li tags ..
u need a closing ul tag .. that is why it's acting funky monkey
landon jones
@landonjojo777
Jun 19 2017 19:03
@OrangeKulture I'm going to add more though
Jorge
@OrangeKulture
Jun 19 2017 19:04
@landonjojo777
<p class="time-line">Time line of daniel boone's life:</p>
<ul>
  <li>1734 :Birth in Berks County,PA</li>
</ul>
landon jones
@landonjojo777
Jun 19 2017 19:05
i need 1734 to be separate @OrangeKulture so i can make it bold
Jorge
@OrangeKulture
Jun 19 2017 19:05
then
<p class="time-line">Time line of daniel boone's life:</p>
<ul>
  <li><span id="something">1734</span> :Birth in Berks County,PA</li>
</ul>
landon jones
@landonjojo777
Jun 19 2017 19:06
ok
@OrangeKulture thanks
CamperBot
@camperbot
Jun 19 2017 19:06
:cookie: 413 | @orangekulture |http://www.freecodecamp.com/orangekulture
landonjojo777 sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
Jorge
@OrangeKulture
Jun 19 2017 19:06
that's just one way .. right, u can do it several ways
it all depends on what you wanna do, how you wanna handle it and how u want it to look in the end
sure, np!
landon jones
@landonjojo777
Jun 19 2017 19:11
@OrangeKulture do you know what I can use to make something bold
Nick Sladic
@Nickadiemus
Jun 19 2017 19:11
@SkyC0der since I never got it figured out I just made a codepen snippet
landon jones
@landonjojo777
Jun 19 2017 19:12
@OrangeKulture nm ill look it up
Jorge
@OrangeKulture
Jun 19 2017 19:12
yeap .. use .something: { font-weight: bold; }
assuming something is the class
landon jones
@landonjojo777
Jun 19 2017 19:12
ok
mambasnow
@mambasnow
Jun 19 2017 19:12
Need help doing personal portfolio having trouble with navbar
landon jones
@landonjojo777
Jun 19 2017 19:13
@OrangeKulture ok then can i just use class instead of id
Eric Weiss
@eweiss17
Jun 19 2017 19:13
@mambasnow are you using bootstrap navbar?
mambasnow
@mambasnow
Jun 19 2017 19:13
yes
Jorge
@OrangeKulture
Jun 19 2017 19:14
ohh ok sorry .. yeah use # if its id .. #something: {font-weight: bold;}
Eric Weiss
@eweiss17
Jun 19 2017 19:14
line 3 you have '<div clas '
Jorge
@OrangeKulture
Jun 19 2017 19:14
and yes, u can use either class or id .. in this case, class would be better, as I assume you will be using more bullet points
Eric Weiss
@eweiss17
Jun 19 2017 19:15
you also forgot the ending " on that same line
landon jones
@landonjojo777
Jun 19 2017 19:15
@OrangeKulture yeah
Jorge
@OrangeKulture
Jun 19 2017 19:15
you can then copy/paste the span tag with the same class in all titles, and just write 1 css rule
Netrunner21
@Netrunner21
Jun 19 2017 19:15
I've hit a wall with the Pomodoro project. Anybody got a minute?
Jorge
@OrangeKulture
Jun 19 2017 19:15
im doing the pomodoro right now actually
Eric Weiss
@eweiss17
Jun 19 2017 19:16
and as far as the black first one, if you get rid of the class active, that goes away. I believe it is how you want it to look?
Netrunner21
@Netrunner21
Jun 19 2017 19:16
@OrangeKulture I've cruised through most of FCC so far, with a few hiccups here and there, but this one has me counfounded.
Jorge
@OrangeKulture
Jun 19 2017 19:16
what's your bugle @Netrunner21 (read it in wesley snipes sarcasm voice from demolition man)
Netrunner21
@Netrunner21
Jun 19 2017 19:16
confounded*
Jorge
@OrangeKulture
Jun 19 2017 19:17
which part?
mambasnow
@mambasnow
Jun 19 2017 19:17
@eweiss17 im fine with the class active im trying to get the logo to be on the same box as the links
CallMeOrange
@EgnaroDev
Jun 19 2017 19:17
guys if I wanted a link uploaded to anchor element to my gmail profile but which link should I use?
mambasnow
@mambasnow
Jun 19 2017 19:17
and make it bigger and more bold looking
Eric Weiss
@eweiss17
Jun 19 2017 19:18
well, you put that in a container
Netrunner21
@Netrunner21
Jun 19 2017 19:18
I have my idea of what the "big" project is supposed to like, it may be too ambitious. I'm trying to make it where it shows tomatoes being squeezed and a glass filling up. I think that'd be neat. But way before I try any of that, I just want a simple timer.
Eric Weiss
@eweiss17
Jun 19 2017 19:18
and closed it off before going to the rest of the code
Jorge
@OrangeKulture
Jun 19 2017 19:18
@Netrunner21 ahh dude!! i had a similar idea .. but no animation tho, i was gonna do some tomatoes theme :D
Netrunner21
@Netrunner21
Jun 19 2017 19:20
@OrangeKulture I've seen a few here and there, apparently there's a jQuery one, but I can't seem to get them to work, and also I really don't want to jank 20 lines of someone else's code. So I guess I'm at the coder's conundrum, where I'm not sure how much is supposed to be my own code. I don't want to write one from scratch if a efficient timer already exists.
mambasnow
@mambasnow
Jun 19 2017 19:20
so should i close the container at the end?
Jorge
@OrangeKulture
Jun 19 2017 19:20
yeah the timer .. several ways to do it
Netrunner21
@Netrunner21
Jun 19 2017 19:21
@OrangeKulture yeah man, I just right now had the idea to replace the O's in pomodoro with tomatoes.
Jorge
@OrangeKulture
Jun 19 2017 19:21
in reality it's not that complicated to write one of your own
Eric Weiss
@eweiss17
Jun 19 2017 19:21
@mambasnow i'm looking into it
Jorge
@OrangeKulture
Jun 19 2017 19:21
shitt! dammit .. thats what i was gonna do
hahaha
Eric Weiss
@eweiss17
Jun 19 2017 19:21
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
    <a href="#" class="navbar-brand>">HighCastle Designs</a>
  </div>
    <ul class="nav navbar-nav">
      <li><a href="#">#page1</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">contact</a></li>
    </ul>
  </div>
</nav>
Jorge
@OrangeKulture
Jun 19 2017 19:21
its quite alright tho
Eric Weiss
@eweiss17
Jun 19 2017 19:21
closer to what you wanted?
Netrunner21
@Netrunner21
Jun 19 2017 19:21
@OrangeKulture hahaha nice.
Jorge
@OrangeKulture
Jun 19 2017 19:21
the timer, what im going to do is .. just write a set interval function
Netrunner21
@Netrunner21
Jun 19 2017 19:21
Here's my logic so far, but it doesn't seem like I'm going down the right road with it.
Jorge
@OrangeKulture
Jun 19 2017 19:21
and have the time as a variable, which you can tweak with user input ..
mambasnow
@mambasnow
Jun 19 2017 19:22
definitely closer
Netrunner21
@Netrunner21
Jun 19 2017 19:23
right, that's kind of what I've done, but the 25 doesn't start right away. I feel like it's going to be an edge case nightmare. Might just try a jQuery one since it would have built in functionality.
I don't want to have to write all the if/then conditionals if jQuery already does it.
Jorge
@OrangeKulture
Jun 19 2017 19:23
yeah exactly right ... set interval works great .. all you need to do is implement some conditionals
Netrunner21
@Netrunner21
Jun 19 2017 19:23
So that's my conundrum
Jorge
@OrangeKulture
Jun 19 2017 19:23
right yeah ..
i was actually just starting out .. so im not exactly sure, but i dont think it's all that difficult, u know
Eric Weiss
@eweiss17
Jun 19 2017 19:24
@mambasnow pretty much that but you want the header to be not so far raised right?
Netrunner21
@Netrunner21
Jun 19 2017 19:24
Cool. I'll continue this then. If it doesn't work then I'll try the jQuery.
Jorge
@OrangeKulture
Jun 19 2017 19:24
cuz essentially, as a user, you would only choose between 3 or 4 clocks, be it a 5 min, 10 min, 15 min, 20 or 25
i guess 5
mambasnow
@mambasnow
Jun 19 2017 19:25
Yeah should be on the same level as the links
Netrunner21
@Netrunner21
Jun 19 2017 19:25
I was gonna have a toggle like the example project
Eric Weiss
@eweiss17
Jun 19 2017 19:25
ahhh igot it
Netrunner21
@Netrunner21
Jun 19 2017 19:25
where you could toggle the minutes
Eric Weiss
@eweiss17
Jun 19 2017 19:25
there was a syntax error
Jorge
@OrangeKulture
Jun 19 2017 19:25
we could probably pair program the shiznit out of this clock
let me check the example tho
Netrunner21
@Netrunner21
Jun 19 2017 19:26
I see what you mean. If you limit the clocks and have them preset, you don't have to worry as much about edge cases
Eric Weiss
@eweiss17
Jun 19 2017 19:26
@mambasnow
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
    <a href="#" class="navbar-brand">HighCastle Designs</a>
  </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#" >#page1</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">contact</a></li>
    </ul>
  </div>
</nav>
Jorge
@OrangeKulture
Jun 19 2017 19:26
the example uses angular tho
it's easier to update like that with angular due to $scope and models
Netrunner21
@Netrunner21
Jun 19 2017 19:27
@OrangeKulture Word. I didn't look under the hood.
I haven't learned anything outside of the Front End Track yet
mambasnow
@mambasnow
Jun 19 2017 19:27
AH
i found it too
Thanks @eweiss17
CamperBot
@camperbot
Jun 19 2017 19:27
mambasnow sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:cookie: 482 | @eweiss17 |http://www.freecodecamp.com/eweiss17
Netrunner21
@Netrunner21
Jun 19 2017 19:27
other than CSS/HTML from my previous job
I'm cool with pair programming.
Jorge
@OrangeKulture
Jun 19 2017 19:28
yeah cuz, think about it this way .. the minute function its basically just minutes - 1 and then output the result .. it'll just run off of the seconds function if(seconds===0)
Eric Weiss
@eweiss17
Jun 19 2017 19:28
@mambasnow yeah you had "navbar-brand>" and it wasn't working becauseo f that
Netrunner21
@Netrunner21
Jun 19 2017 19:28
@OrangeKulture I'll set up a chatroom and we can pair program
mambasnow
@mambasnow
Jun 19 2017 19:29
@eweiss17 yeah i just woke up LOL thanks a bunch man
CamperBot
@camperbot
Jun 19 2017 19:29
mambasnow sends brownie points to @eweiss17 :sparkles: :thumbsup: :sparkles:
:warning: mambasnow already gave eweiss17 points
Hello911
@Hello911
Jun 19 2017 19:29
Could anyone suggest a way to make these 3 column (flex) items each take up a proportional part of the entire screen's height?https://codepen.io/Hello911/pen/qjrVom
Jorge
@OrangeKulture
Jun 19 2017 19:29
yeah sounds good :thumbsup: let me try and have a quick go at some basic functionality
Gulsvi
@gulsvi
Jun 19 2017 19:32
@Hello911 Give your body element a height of 100vh and then give each box a height of 33.3%
Nick Sladic
@Nickadiemus
Jun 19 2017 19:34
@SkyC0der did you ever look at my codepen?
Gulsvi
@gulsvi
Jun 19 2017 19:35
@Nickadiemus I just logged back on - didn't see your mention - checking it out now
Hello911
@Hello911
Jun 19 2017 19:35
@SkyC0der I want the 3 box to be in 1:4:1 ratio
Nick Sladic
@Nickadiemus
Jun 19 2017 19:37
@SkyC0der thanks!
CamperBot
@camperbot
Jun 19 2017 19:37
nickadiemus sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1779 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Jun 19 2017 19:38
@Nickadiemus For that issue, I'd actually cheat rather than trying to get their heights to be the same across all device sizes.
.workE{
    text-align: center !important;
    background-color: #424242;  
}
"cheat" isn't accurate - it's a reasonable way to give the impression that they're both the same height.
@Hello911 You can use the same technique. 1:4:1 would be 16.67% for the first and 3rd boxes, 66.67% for the 2nd box.
Nick Sladic
@Nickadiemus
Jun 19 2017 19:40
@SkyC0der so you just recommend I wrap each row with that class?
Gulsvi
@gulsvi
Jun 19 2017 19:41
@Nickadiemus your question from above was how to make the "Work Experience" column the same height as it's neighbor. The idea is to give the row the background color of the shorter of the two columns.
CallMeOrange
@EgnaroDev
Jun 19 2017 19:41
@SkyC0der hey you know transparent to background-color? is it possible to make image transparent?
Gulsvi
@gulsvi
Jun 19 2017 19:42
@Nickadiemus Getting heights to match is a challenge, usually takes JavaScript, so it involves some level of creativity if you don't want JS :)
Hello911
@Hello911
Jun 19 2017 19:42
@SkyC0der Then whats the use of flex grow? I thought I can use that?
Gulsvi
@gulsvi
Jun 19 2017 19:43
@Hello911 I don't use flexbox very much, not really sure about flex grow :(
@MCTwoDigitZero You can use opacity in your CSS to make it transparent
Nick Sladic
@Nickadiemus
Jun 19 2017 19:43
@SkyC0der I just realized it. That makes sense but it I'm still trying to center it like the other two rows but i'll figure it out
CallMeOrange
@EgnaroDev
Jun 19 2017 19:44
yeah i was talking about that
Hello911
@Hello911
Jun 19 2017 19:44
@SkyC0der Ok.
CallMeOrange
@EgnaroDev
Jun 19 2017 19:44
with image is it possible?
Hello911
@Hello911
Jun 19 2017 19:44
Thanks
@SkyC0der
CallMeOrange
@EgnaroDev
Jun 19 2017 19:45
if so but how?
opacity: 0.5;?
I will just look it up..
yeah I guess I was right
Gulsvi
@gulsvi
Jun 19 2017 19:46
:)
CallMeOrange
@EgnaroDev
Jun 19 2017 19:46
I made it for pie chart looks good
Think I should do it with project images?
Nick Sladic
@Nickadiemus
Jun 19 2017 19:47
@SkyC0der I figured it out!
Gulsvi
@gulsvi
Jun 19 2017 19:48
@Nickadiemus Congrats! What was the trick for that middle row? I was still looking at it lol
CallMeOrange
@EgnaroDev
Jun 19 2017 19:49
I have a question, if i selected an element in css to do something to it but if I dont want same element to be affected by that so how would I do it?
you know what, i will just use classes instead
ibtehaj raza
@ibtehajraza
Jun 19 2017 19:51
How do I align a navbar item to right?
i am making portfolio
Nick Sladic
@Nickadiemus
Jun 19 2017 19:53
@SkyC0der I just had to add the class from my vcenter class to the workE class you suggested
Gulsvi
@gulsvi
Jun 19 2017 19:54
@Nickadiemus weird that it needs to be on the row instead of the column. I have some more studying to do! Glad you got it figured out.
ibtehaj raza
@ibtehajraza
Jun 19 2017 19:57
??
CallMeOrange
@EgnaroDev
Jun 19 2017 19:57
@ibtehajraza we cant see your portfolio
Gulsvi
@gulsvi
Jun 19 2017 19:59
@ibtehajraza It depends on what version of bootstrap you are using.
CallMeOrange
@EgnaroDev
Jun 19 2017 19:59
@SkyC0der lol I was going to say "You depends on versions of bootstrap"?
Gulsvi
@gulsvi
Jun 19 2017 20:00
:)
CallMeOrange
@EgnaroDev
Jun 19 2017 20:00
@SkyC0der I have one more task to go...
I need to get text below each project image
Gulsvi
@gulsvi
Jun 19 2017 20:00
use the figures
CallMeOrange
@EgnaroDev
Jun 19 2017 20:01
When I add text to that elements its aligned next to it not bottom
How do I fix that?
Gulsvi
@gulsvi
Jun 19 2017 20:01
maybe you have a div that isn't closed? Or some more floats or absolute position in your CSS
CallMeOrange
@EgnaroDev
Jun 19 2017 20:02
...
I will exam div elements
Gulsvi
@gulsvi
Jun 19 2017 20:02
You could also try using cards - remove the button and it could look good: https://v4-alpha.getbootstrap.com/components/card/#example
CallMeOrange
@EgnaroDev
Jun 19 2017 20:03
Interesting
So I have to add div element each img element
This is going to take a while
I dont see any css
Are they classes in css?
CallMeOrange
@EgnaroDev
Jun 19 2017 20:09
never mind they are just an example
CallMeOrange
@EgnaroDev
Jun 19 2017 20:15
I give up making card
I have to practice making card first
Nikhil
@jerof
Jun 19 2017 20:20
Hello, I am trying to create a clone of the Google Chrome Extension — Momentum, that is basically a To do list with a clock and a beautiful image in the background that changes regularly. For this, I want to use the Unsplash API for the background and something else for the clock (Moment.js ?). But I don’t know how to manipulate the moment.js or add it and mofidy it with the HTML and CSS code. Here is the code: https://jsfiddle.net/wjerpbrz/#&togetherjs=HAIcJbf622. I would appreciate any help on the JS part. It’s frustrating! Thanks!
CallMeOrange
@EgnaroDev
Jun 19 2017 20:20
@jerof You should go on JS chatroom
They will be able to help'
Nikhil
@jerof
Jun 19 2017 20:21
Ok thanks!
Cesar Fernandez
@Diamond713
Jun 19 2017 20:22
how do you work with stand inline?
Eric Weiss
@eweiss17
Jun 19 2017 20:33
stand inline?
CallMeOrange
@EgnaroDev
Jun 19 2017 20:34
stand in line
jlscrowther
@jlscrowther
Jun 19 2017 20:35
Hi all, I'm working on 'Build a Personal Portfolio Webpage' - is the information for "6. User Story: I navigate to different sections of the webpage by clicking buttons in the navigation" covered in the previous tasks or do I need to additional research on bootstrap outside of FCC?
CallMeOrange
@EgnaroDev
Jun 19 2017 20:38
@jlscrowther just do whatever you want
@diomed what up?
@jlscrowther you can use any, you could just use html only doesnt matter
Johnny
@jtan3
Jun 19 2017 20:39
@jlscrowther https://www.w3schools.com/html/html_links.asp under "create a bookmark " this should let you link to a section of your page.
CallMeOrange
@EgnaroDev
Jun 19 2017 20:39
@jtan3 hey
Can you take a look at my portfolio?
jlscrowther
@jlscrowther
Jun 19 2017 20:40
thanks Johnny!
Johnny
@jtan3
Jun 19 2017 20:41
@jlscrowther welcome
check out my tribute page
and give feedback too
:smile:
Pedro Coelho
@PedroAMCoelho
Jun 19 2017 21:02
hi guys, how bootstrap divs avoid overflow ? they use word-wrap: break-word property or what?
Gulsvi
@gulsvi
Jun 19 2017 21:30
@PedroAMCoelho It depends on the element and class you're using. You can see what CSS they use here: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css
Pedro Coelho
@PedroAMCoelho
Jun 19 2017 21:32
@SkyC0der Sky, i mean, when the viewport varies, the content keeps inside the grids. How?
Gulsvi
@gulsvi
Jun 19 2017 21:34
@PedroAMCoelho That should be the default behavior - for example, if you create a blank HTML page and put a bunch of <div> elements in it, they will wrap. The same as text.
Bootstrap doesn't do anything special to make sure that things wrap within the grids
(maybe I'm still misunderstanding the question though)
Pedro Coelho
@PedroAMCoelho
Jun 19 2017 21:36
@SkyC0der if you create a div with some content inside, it will overflow if you do not add "word-wrap:break-word;" or overflow:hidden ... or similar codes
Gulsvi
@gulsvi
Jun 19 2017 21:37
@PedroAMCoelho It will wrap normally,