So after hitting my head against the wall trying to scale an img to bootstrap grid i found the problem, CodePen is the problem when you use Quick-add>bootstrap it loads version 4.0.0-alpha.6
when i used version/3.3.5/ no problem.
Hello everyone. Can someone tell me how to use an image for the background on my page?
Anyone out there?
in css its background: url("link");
@Godiniis
Thank you
Could use help with promises. I'm at my wit's end at this point.
please i want to know why my calculator is giving me this expression instead of 1+2 it says 1 operator 2,is there something i missed here is my codepen https://codepen.io/mcube25/pen/vgMBaK
Hey does anyone know how to make a html fit the entire screen
html canvas *
Like im trying to run this browser paint tool and it only seems to draw to half the screen
nvm now its magically working properly
Someone give me some feedback for my portfolio page? https://codepen.io/grantsOn/pen/MJRWQg
@grantson center your picture of yourself
@grantson most people tend to put the about section first.
@grantson I would line the social media icons horizontal and put them in the top right
picture is centered now gonna work on the social media icons
thanks everyone for the feedback
ill re-post soon
Hi all, can someone take a look at my portfolio, wondering why the nav-pill isn't working on the other texts and why the float-right isn't working: http://codepen.io/RLD2121/pen/XpQOqx
I can't get my other navbar elements to be the same as the color of my name in my portfoliohttp://codepen.io/itchick85/pen/RKENBR
@itchick85 you need to also include a color for your <a> elements in your html. They come with a default coloring that isn't overwritten in the <body>
@RLD2121 have you tried using bootstrap 3? I noticed your using bootstrap-4-alpha
can someone help me out? I showed this earlier. I am struggling finding out how to place my social media icons at the bottom side by side..or in a sidebar of some sort. https://codepen.io/grantsOn/pen/MJRWQg?editors=1100
@grantson - one way to do it, not necessarily the only way, and someone might come up with a better way, is to define a class like this:
.socialIcons {
display:inline-block;
}And att class="socialIcons" on each of the divs that contains your icon and anchor tag. Also, close each div right after the anchor tag - don't nest them.
yup, that makes sense
@khaduch Thanks mate Ill try it out and let ya know how it went
grantson sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2492 | @khaduch |http://www.freecodecamp.com/khaduch
@grantson - yeah, it might need a little tweaking because I got the "Send email" button and the three social icons lined up on the same line, but it's close... good luck!
@grantson - it should be
display: inline-block; - I changed it in the browser tools, not in my codepen... Please note that!
@khaduch Still doesn't seem to want to work on mine, not sure what I have incorrectly, but thanks ! It looks like I have all the information just need to read the code a bit more closely
grantson sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: grantson already gave khaduch points
It just takes the "send-email" down to the codepen icon but everything else remains the same
when I do all the above
oh wait I need to add class to all my <a> tags as well ?
@grantson - I closed my copy of the pen with it in - but you want to have your divs structured like this:
<div class="socialIcon">
<a whatever the link and icon is></a>
</div>I made that change before I added the class with the display: inline-block; - and deleted all of what would then be extraneous </div> tags afterward.
@khaduch finished mate https://codepen.io/grantsOn/pen/MJRWQg?editors=1100
@khaduch I just closed an extra </div> tag under send email and then added <center> to the social icon <div>
@grantson - :+1:
@khaduch Worth turning in mate?
yeah, you have to make sure that your html structure is clean, it helps a lot!
@grantson - sure, except for the text that I'm sure you'll eventually update, it looks good. I didn't check responsive behavior, but I'm getting offline for now - good luck with that! :)
@khaduch Haha, yes I will update that. Just wanted to get all the elements and features in for now...thanks for the feedback! Onto Javascript!
grantson sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: grantson already gave khaduch points
@alpox It meant that originally, but now it's just a metaphor for walking from one pub to the next. One could take it literally and crawl, blind drunk, on all fours, but then you don't get any good photos for Instagram, and your head hurts for days.
Hello. I have been banging my head against the wall because of a problem that seems simple enough but I can’t solve it. I am trying to build an image masonry-like gallery on a Bootstrap based webpage and have gotten all the grid issues and effects in order but the text overlay positioning on the image is still messed up and I can’t fix it. What I feel the main problem is is that the <p> element is taking on the height of the div it is contained in and this is preventing styles like text-align: centre; and align-items: centre; from applying (container has flex: direction; applied). I would be massively grateful if someone can help on this. I have literally spent hours trying to fix it but can’t even understand where the problem lies. Code snippets below (some of it is just to create the grid layout but including here just to help replicate the problem).
HTML:
<div class="row no-gutter" id="tiles">
<div class="col-lg-4 col-md-6 mx-auto">
<a class="link-box" href="#">
<div class="img-wrapper">
<img class="img-thumbnail" src="https://c1.staticflickr.com/1/736/31933254544_3e0162f282_o.jpg" alt="Card image cap">
<div class="img-text">
<p>Placeholder 1</p>
</div>
</div>
</a>
</div>
</div>CSS:
.no-gutter .img-thumbnail {
padding: 0;
border-radius: 0;
min-width: 100%;
display: flex;
}
.row.no-gutter {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.row.no-gutter > [class*="col-"],
.row.no-gutter > [class^="col-"] {
padding: 0;
margin: 0;
}
.img-wrapper {
width: 100%;
height: 250px;
overflow: hidden;
background-color: #000;
position: relative;
}
.img-wrapper img {
display: block;
float: left;
width: 100%;
opacity: 1;
-webkit-transition: opacity 0.35s;
}
.img-wrapper:hover img {
opacity: 0.4;
filter: alpha(opacity=40);
}
.img-wrapper .img-text {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
text-align: center;
display: flex;
}
.img-wrapper a {
display: block;
}
.img-text p {
position: relative;
margin: 0;
color: white;
font-size: 1.8em;
align-items: center;
}
The <p> element text is coming on the top-left of the image whereas I want it in the dead centre.
Finding a Remainder in JavaScript.
Can someone explain this to me .i am not for some reason understanding what is being asked
Can someone explain this to me .i am not for some reason understanding what is being asked
@Ironwrangler
5 divided by 2: 5/2 = 2 with a remainder of 1.
So, the remainder of 5 divided by 2 is:
20 divided by 7: 20/7 = 2 with a remainder of 6
So, the remainder of 20 divided by 7 is:
For the exercise, they want you to set
5 divided by 2: 5/2 = 2 with a remainder of 1.
So, the remainder of 5 divided by 2 is:
5 % 2 = 120 divided by 7: 20/7 = 2 with a remainder of 6
So, the remainder of 20 divided by 7 is:
20 % 7 = 6For the exercise, they want you to set
var remainder equal to the remainder of 11 divided by 3
Not sure if that's more confusing or not :) but basically, if you want to divide two numbers you use
/ if you want their remainder instead, use % in place of the /
@taltmann42 thanks! I will try to write both variants and see what happens
zhann1982 sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 527 | @taltmann42 |http://www.freecodecamp.com/taltmann42
show the local weather project, can't get the weather data, i checked on my own console and found the error :" Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource."
anyone got idea how to get pass it?
@taltmann42 No, that didn't help.
Hello Everyone! My code for weather works in google chrome, but it doesn't work in firefox. I think it is happening because of geolocation settings. and i used " if (navigator.geolocation) ". Who knows how to fix it? http://codepen.io/zhann1982/pen/XpGgXJ
@yuchiu you should add http:// to your api url
Hi. I think I didn’t present the problem properly earlier. I have created a JSfiddle to show it better. I need help in placing the placeholder text in the center of the image (horizontally and vertically). In my code text-align: centre; and align-items: centre; are not working for some reason. Here’s the link: https://jsfiddle.net/architchandra/ofkon3eh/
@yuchiu and @zhann1982 I think you're both hitting the same issue. navigator.geolocation works over HTTPS but openweathermap only works over HTTP. You can't use both HTTP and HTTPS, so you need to use a different way to get location that works over HTTP or use a different weather API that works over HTTPS
Dark Sky is also a good weather API
@architchandra It must be a pain to spell everything as "center" instead of "centre" in your code. I'll bet it causes problems sometimes :)
@SkyCoder01 Hey. I just checked to see if this was a problem but it looks to me like I’ve spelled all centres correctly. On a general note, I live in India where this ambiguity between British and American spellings is always present (I’ve personally spent hours on the English StackExchange on the most trivial of words). We just generally use use both interchangeably.
@jtan3 the server return error"Failed to load resource: the server responded with a status of 502 (Bad Gateway)" when i add http:// in front of my api
@jtan3 @SkyCoder01 thank you both for replying and helping out, i ll figure a way out
yuchiu sends brownie points to @jtan3 and @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 311 | @jtan3 |http://www.freecodecamp.com/jtan3
:cookie: 237 | @skycoder01 |http://www.freecodecamp.com/skycoder01
console.log(formattedData ," formattedData");
$.each(formattedData, function(key, value){
if (value.yaxisValue === "" || value.yaxisValue === null){
delete formattedData[key];
}
});
console.log(formattedData ," formattedData");
array of objects getting plotted in different forms
@SkyCoder01 Which api I should use? Any advices?
@SkyCoder01 Any help? Please please. I am just stuck. Can’t figure out what’s wrong. The height of the <p> element is 100% for some reason which I feel it shouldn’t be. Here’s the jsfiddle: https://jsfiddle.net/architchandra/ofkon3eh/
@architchandra
.img-wrapper .img-text {
width: 100%;
height: 100%;
you made it 100%
@kirbyedy Yes, the idea was that the container should be 100% height of its container. But the <p> element, I supposed would not get 100% height but will get the height according to the content.
I took that from here, actually: https://miketricking.github.io/dist/
Effect 12
@architchandra I guess your p element inherits the attributes from img-text
because its nested inside that div
@kirbyedy Maybe. I am still not sure. But I was able to fix it with someone’s help. Changing the width of the <p> element to 100% and applying align-items: center; to the .img-text (container) did it. And after that, the height of the <p> element is turning out to be content-defined. I’m not sure why that happened, though.
Is the tribute page about myself?
<div class="caption text-center">,caption在当中是什意思
@bleka well it can be, not really
@bleka dont you have any person you admire.. like a scientist or something...
@kirbyedy i didn't want to do it on myself, just wasn't sure if it was about me or someone else xd
@bleka you'll do a portfolio about yourself after that project
hey guys
@c0d0er Do you mean how to setup the javascript for it how how the css works?
how do i push an item to an array continuously while the previously pushed item is retained
@alpox how css works, like how could you move in the map which is inside the small square?
thanks
i wanted to do it using a function that once called will automatically send an item to a preset variable then next call will send another different item to the same variable to make it two items in it
how do i create the functions
currently i have this code but my aim is to call getColor and each time it's pushed to the sequence i get a random color pushed to it color
var colors = [r,b,g,y];
var sequence = [];
function getRandomNumber(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
getRandomNumber(0,colors.length);
var getColor = colors[getRandomNumber(0,colors.length)];
var sequence = [];
function getRandomNumber(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
getRandomNumber(0,colors.length);
var getColor = colors[getRandomNumber(0,colors.length)];
@alpox thanks
c0d0er sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 781 | @alpox |http://www.freecodecamp.com/alpox
Good morning, all. Any Flexbox experts around? Could someone take a look at why .nav { align-items: center; } isn't doing its job there? Thank you :) http://codepen.io/ellenkorbes/pen/vgMgde
@ellenkorbes Actually it does its job but your
ul element has some margin-bottom of which you have to get rid of
Hmmmmmm
Ooooooo thanks alpox!
@ellenkorbes
Wait, where's the cookie. Thanks @alpox ?
ellenkorbes sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 782 | @alpox |http://www.freecodecamp.com/alpox
Ahhhhh
Yeah I was about to ask how you went about finding out
@alpox Any idea why navbar-toggler-icon isn't showing BTW?
I just copied that bit from the bootstrap templates. It was working at first but disappeared at some point.
@ellenkorbes Yup that i've seen actually :-) its because you didn't add jquery before bootstrap in the javascript settings
Oh!
@ellenkorbes Another thing is that codepen just changed to import bootstrap version 4.0 alpha - so most of the code you will find to this point of bootstrap wont apply to it
@alpox Yeah I know, I'm using the v4 code samples
Ah okay good
I added jquery in the settings but the hamburger icon still won't show
It works if you click the place it's supposed to be at
But the icon itself doesn't appear
@ellenkorbes Ouh yeah bad one
@ellenkorbes Bootstrap v4 uses flexbox too. But has other settings for it for the navbar. For its navbar to work properly, it needs its predefined settings
You messed it up by using your own flex definitions on the navbar
As far as i see..
Or wait
Ahhhh
Maybe i'm wrong
Hold on
Alright
@alpox I tried putting navbar-inverse back into the nav classes, it makes the icon appear but it's all weird.
@ellenkorbes Okay. In your css you set margins to all
Also, bootstrap requires you to put a class
button tags on your page. Also a width: 100%. This is what messes your button up.Also, bootstrap requires you to put a class
navbar-light on the nav element, which makes the button appear.
.contact input, textarea, select, button {
width : 100%;
margin: 0;
}
Happening here
But that's only for contact class, no?
Or would it have to be .contact input, .contact textarea, .contact select, etc?
yup exactly
as soon as you put a commata, there is a totally new selector
.contact input,
.contact textarea,
.contact select,
.contact button {
width : 100%;
margin: 0;
}
Ohhhhhh
Yeah I just done that
How do you make stuff display as code within the chat like that?
```
<some code>
```
Hack the planet!
In the above case to specify the highlighting i used:
```css
<some code>
```
Hah! Cool!
That was an inline code what you did there :-)
With one backtick at beginning and end
like this
Whole codeblocks start with a line of 3 back ticks, then code, then a line with 3 backticks again
Hi, I have a question. Is it necessary to follow grid system?
@relentless-coder What grid system?
@alpox Alright, thanks, makes sense.
:warning: ellenkorbes already gave alpox points
ellenkorbes sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
@relentless-coder I could never wrap my head around it so I'm using flexbox instead.
Yea going with flexbox is much easier than old-school css to align stuff :D
But comes with the drawback of dropping IE9 support
But anyone who complains about that to me i would just tell they should finally get a real browser :D
^ Yip.
@ellenkorbes @alpox I'm about to get in a argument with another front end developer about the use of grid system. Basically it is the fight over using bootstrap's grid system. My opnion is that it is not necessary if you can understand percentage widths
@relentless-coder Me I just simply can't get it to work properly without a bunch of hacks, meanwhile flexbox works perfectly.
@relentless-coder Okay there are surely different opinions.
There are different things to look for.
There are different things to look for.
- Do you really need a full-blown css framework or just use the grid? If you would just use the grid - please no. There are smaller grid systems out there - and as you say, working your own css out for that should suffice.
- Bootstraps grid have SOME things which can make your life easier like pulling/pushing columns for easy responsiveness. This you could solve with media queries - but this would be more of an effort.
- Once you use bootstrap, you are trapped with it.
Either way, if its only for the grid i would recommend against using bootstrap
@relentless-coder
@alpox If you still got the patience, any idea how to solve these issues? 1. The hamburger over the menu items, 2. The menu items being center aligned when invoked by the hamburger, 3. The hamburger showing up when there's clearly more than enough room for the menu to display in full?
This is what I'm trying to mimic, no idea how I broke it: https://v4-alpha.getbootstrap.com/examples/navbar-top-fixed/
Probably with all the flexing.
Hi guys, I realy can't understand what's appening with this bootstrap navbar..pls have a look
https://codepen.io/saylos/pen/EZJwap?editors=1000
https://codepen.io/saylos/pen/EZJwap?editors=1000
Hello everyone!
I'm working on an exercise: "Build a Random Quote Machine" (https://www.freecodecamp.com/challenges/build-a-random-quote-machine)
And I have a question: Where can I get JSON file, or how to create it to be available? How to make a link on him?
I'm working on an exercise: "Build a Random Quote Machine" (https://www.freecodecamp.com/challenges/build-a-random-quote-machine)
And I have a question: Where can I get JSON file, or how to create it to be available? How to make a link on him?
@myteststudy one sec ill look up where i got mine
@myteststudy i got mine from http://quotesondesign.com
@ellenkorbes Your custom styles are ruining you again :-)
remove all
remove all
.nav and .nav ul styles except the background-color for .nav
@alpox Okay, lemme try.
@ellenkorbes Also, add
nav-link to the a elements in the navigation list
@ellenkorbes For keeping the links right, add
justify-content-end to the div which surrounds the ul. Then remove the mr-auto from the ul.
@alpox Dayum. I dun got schooled, haha. You're the best. Thanks so much :D <3
ellenkorbes sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 783 | @alpox |http://www.freecodecamp.com/alpox
@ellenkorbes You're welcome :-)
Gonna spend a good few minutes trying to understand the whole thing now.
alpox back at it again, answering questions 24h/day :D
@Blackioo That happens when i'm bored :D
Got a question aswell :D - so first time I'll want to use a library outside of the tutorial in CodePen, how do I use this for instance? https://startbootstrap.com/template-overviews/scrolling-nav/
With codepen or without? @Blackioo
That one you cannot use so well inside of codepen :D
Well you can... download all the stuff and copy the content of the files to the right places in codepen.
If you want to work with it outside of that, just download and unzip
If you want to work with it outside of that, just download and unzip
@Blackioo This is not really a library btw. its just a skeleton :D (Or boilerplate)
@Blackioo Here, replicated it in codepen, http://codepen.io/clydelobo/pen/MJdYGj/
hey guys, my divs are losing their border-radius while hovering and zooming the img with
transform: scale. Any idea how to solve that? The radius is there at the beginning and the end but not during the transition
@niprobin Can you show a pen?
uh was afk there @alpox and @oppiniated
thx anyways @alpox & @oppiniated
blackioo sends brownie points to @alpox and @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 579 | @oppiniated |http://www.freecodecamp.com/oppiniated
:cookie: 784 | @alpox |http://www.freecodecamp.com/alpox
Hi! How to start making Build a Tribute Page. Show me the way
Hi Guys, need some help
@niprobin There's a bug with
transform: scale and border-radius
@niprobin Thats a really strange behaviour ^^
hi . how send link tribute page? my page or code?
@niprobin Maybe you could use width and height instead of transform: scale
@him8710 Hi send me your tribute page code for listing
@avazzz what?
need some help with my code
<div class="row">
<div class="col-md-2">
<a href="https://www.facebook.com/mers.vaneo" role="button" class="btn btn-reddit btn-large">
<i class="fa fa-facebook-square" aria-hidden="true">
Facebook
</i>
</a>
</div>
</div>
What's wrong @IsaakNazar ?
I want mu button to look like buttons on the https://icons8.com/ on the bottom of the page buttons (twitter, facebook etc)
include font-awesome
@him8710 copy the URL from the address bar
and submit that
ok thanks
@NitinNair89 I've already include
what's the output you get ?
@oppiniated @alpox thanks will try with this
niprobin sends brownie points to @oppiniated and @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 785 | @alpox |http://www.freecodecamp.com/alpox
:cookie: 580 | @oppiniated |http://www.freecodecamp.com/oppiniated
@NitinNair89 only a link, not a button
do you have codepen?
@NitinNair89 But I want a button link, not just a link
@NitinNair89 yeah. im coding my tribute
@niprobin did you solve that? I tried a possible workaround...
@NitinNair89 please help me in coding tribute page
@avazzz What help you need? @IsaakNazar Please share codepen link
@NitinNair89
@niprobin with an outer div containing a transparent border, but it does like that: border-radius on default, border-radius on hover, but no border-radius during the transform itself. weird
<div class="row">
<div class="col-md-2">
<a href="https://www.facebook.com/mers.vaneo" role="button" class="btn btn-facebook btn-large">
<i class="fa fa-facebook-square" aria-hidden="true">
Facebook
</i>
</a>
</div>
</div>
@NitinNair89 https://codepen.io/NazarIsaak/pen/GreBOd
@IsaakNazar have you tried button group from Bootstrap?
@NitinNair89 no, I havent
try that.
hi pls i am having trouble with my portfolio page
let us see @Eyej
aii do i drop my link here?
i want to put a box for my h1 text and buttons but its not working
@Eyej hey, add some dummy content first... the divs have no height or width, so they don't show
Any experienced wordpress devs around?
oh, ok thanks! @Marianissimus
eyej sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 351 | @marianissimus |http://www.freecodecamp.com/marianissimus
I can't nest manu categories to right side...
I tried justify-content-end
also navbar-right
also float-right
and also on css .float-right {
float: right!important;
float: right!important;
@Prezess try this in your css:
.navbar-nav > li > a {
text-align: right;
}
still on left side...
I tried and it worked.
It works but when there is hamburger and text is on right side
but in normal view is still on left close with logo ...
I also tried pull-xs-right in ul
I have an image with transparent background, and I have to place a div on top of it, but the div is getting mixed with the background, I mean it too becomes transparent and I can see the image through it. Also, I am moving div with the help of negative top margin
@NitinNair89 can you try it on normal view ?
trying.
@relentless-coder Did you set z-index for div?
i am workin on my first front end development project about dr.norman,the text-centre class for the h1 element and h2 element is not working.i also have a problem uploading the photo of dr.norman and the other biologists. id like to ask help from anyone who has gotten beyond this point..AM STUCK
@zeddmacharia show us your code / codepen...
@Prezess try this
- remove
mr-autoclass onuland - add this css
#mainNavigation { justify-content: flex-end; }
@NitinNair89 yes
@Marianissimus <div class="container fluid"
<h1 class="text-centre">Dr.Norman</h2>
<h2 class="text-centre">The man who saved a billion lives</h2>
@Marianissimus
did you close the div? @zeddmacharia also, if it's bootstrap, it should be "container-fluid"
@relentless-coder for
z-index to work div should also have position: relative or position: absolute
@Marianissimus yes i did
@zeddmacharia two separate names like "container fluid" mean two different classes (container + fluid). you need the hyphen
@zeddmacharia so try "container-fluid"
also, make sure that you correctly added bootstrap. you might also need jQuery for dropdown-navigations and others
that was a typing error,ive put container-fluid class and the heading still isn't moving to the centre
@Marianissimus wat is it that am doing wrong
you want what centered? the text inside h1 or the h1 and h2 inside the container?
i want the text inside the h1 and h2 element centred
@Marianissimus
@Marianissimus
@Marianissimus <h2 class="text-centre">The man who saved a billion lives</h2>
@zeddmacharia make sure you closed the div AND also correctly added bootstrap to your file. let's see the whole code, please
oh, hell, it's text-center, no text-centre @zeddmacharia LOL
@Marianissimus @Marianissimus @Marianissimus
yes, what's up? it was a typo all along... :)
@Marianissimus yes it was haha...thanx for the help
zeddmacharia sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 352 | @marianissimus |http://www.freecodecamp.com/marianissimus
you're welcome
uhm, i'm a bit confused. How do i separate my buttons so they stay individually but on the same row and how do i add an image that has no web link?
pls can anyone assist me? i tried adding an image from my !G acc but it comes with the comments toohttp://codepen.io/Eyej/pen/xgNGWM
@Eyej you can add margin to each button so they are seperate but still on the same row.
use: button { margin-right or margin-left: Xpx; }
@Eyej this link might help with the image: https://teamtreehouse.com/community/is-there-anyway-to-add-your-images-when-using-code-pen
@veredrec ok, that works but the buttons are scattered. like i put them in the purple box div yet they appear almost outside the box
@Eyej I think that's because you have the width for the box but not for the buttons, so they take 100% width as defult. Try to change the width of the div that holds all the buttons. Does that make sense?
<div class="container-fluid">
<h3 class="text-center">Dr.Norman Borlaug</h3>
</div>
<h4 class="text-center">The man who saved a billion lives</h4>
<img scr="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg">
</div>
<h3 class="text-center">Dr.Norman Borlaug</h3>
</div>
<h4 class="text-center">The man who saved a billion lives</h4>
<img scr="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg">
</div>
@Marianissimu
the image is not being uploaded
Does anyone know how to center the unordered list for the Tribute Page? Mine is aligning to the left. Figured I would need to use the bootstrap grid, but I don't really know how.
@skybreak48
.solution li {
list-style-position: inside;
}
@zeddmacharia this might because of flickr. did you try another photo and did it work?
@zeddmacharia note your spelling
<img scr=
it should be src
@kirbyedy oh another typing error thanx
zeddmacharia sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1805 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
@veredrec No, that dint work
oh, not again:) @kirbyedy @zeddmacharia I'm not even checking for spelling anymore, I just try to find code errors. @zeddmacharia try to copy-paste class names until you learn them by heart...
thanks tho @veredrec
eyej sends brownie points to @veredrec :sparkles: :thumbsup: :sparkles:
:cookie: 284 | @veredrec |http://www.freecodecamp.com/veredrec
@Eyej I'm trying to find the solution :) just a second.
@Eyej You can change the margin that you add to the buttons to "margin-left" and make the margin a big bigger (let's say 20px) so it will move everything a little bit to the left.
Hi, Can someone help me using jQuery in node.js?
<div class="container-fluid">
<div class="well col-xs-12">
<h3 class="text-center">Dr.Norman Borlaug</h3>
</div>
<h4 class="text-center">The man who saved a billion lives</h4>
<img class="img-responsive" src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg">
</div> @Marianissimus @kirbyedy how do i now make my image smaller
<div class="well col-xs-12">
<h3 class="text-center">Dr.Norman Borlaug</h3>
</div>
<h4 class="text-center">The man who saved a billion lives</h4>
<img class="img-responsive" src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg">
</div> @Marianissimus @kirbyedy how do i now make my image smaller
@zeddmacharia define a width
@kirbyedy that didn't work. It's like this, so far.
@skybreak48 I dont see where did you apply that attribute I gave you ?
Oh.. did I take it out?
Where should I have put it?
<div class "col-xs-4 col-xs-8 col-xs-4">
what is this ?
I have no idea. I was trying something out.
Hahaha! :P
well... :)
It didn't really have any effect.
@skybreak48 you must be using it wrong then
take a look
So, to make it work, align center, and then list-style-position inside?
I'm gonna try it. :P
but honestly I wouldn`t bother with that, I would just put col-md-12 and finish with it :P
I'm having a hard time getting a facebook user posts using the graph api
working with access tokens is really a pain
would someone like to pair on that?
working with access tokens is really a pain
would someone like to pair on that?
Can anyone see what I'm doing wrong here? Just starting on the quote generator project. Ignore the commented stuff, right now just trying to print "success" when the api call works https://codepen.io/MattLong87/pen/xgeBxK
@MattLong87 for start remove the S from your codepen link
start with http://
not https://
wow, thank you.
thank you @kirbyedy
mattlong87 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1807 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Aww Yiss!!! I did it by adding another <div class="col-md-2"></div> in the same row. :P
thanks @kirbyedy
skybreak48 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1808 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Hi everybody! I would like to switching to macbook pro for the first time, can anyone help me one sec to see if this macbook pro is good to my needs? I program and use photoshop, only that: https://www.bhphotovideo.com/c/product/1293728-REG/apple_mll42ll_a_13_3_macbook_pro_with.html
Is there a way to explain why
$("#newquote").on("click", getQuote); works but $("#newquote").on("click", getQuote()); doesn't?
@jonylif should do, yes
@kirbyedy the viruses do not enter? never? the macbook is really really fast?
well if you are stubborn you can get a virus, but if you work normally, no viruses
yes mac is fast
the only problem I see there is a 13" screen
and you said you work with photoshop
depends on you, but I prefer big screen when working with rgaphics
minimum 21"
this macboox dont have hdmi port?
as far as I can see its a new mac book pro, and they removed all the plugs
yeah, 13" will be a problem. I don't have enough display with a 24". And that's just for coding...
there are 2 usb-type C ports
Hi Guys! Just finished my tribute project. Check it out
which means you have to get a converter to thunderbolt
with a converter i can use a hdmi cable?
which means if you have an external hdd you should get a usb type-c hub
yes
perfect! thankss
I think there are converters from usbtype-c to hdmi
keep in mind that with those macs, there is no upgrade later on, everything is soldered
not even a change of ssd hard drive
@IsaakNazar looks great, only thing I notice is that the first picture doesn't scale down when you shrink the window'
@MattLong87 could You suggest how can I fix that?
@IsaakNazar i think the
img-fluid bootstrap class will do it
@MattLong87 thx I'll try this ))
isaaknazar sends brownie points to @mattlong87 :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @mattlong87 |http://www.freecodecamp.com/mattlong87
@MattLong87 you mean img-responsive :)
@kirbyedy I thought so too at first but I found http://v4-alpha.getbootstrap.com/content/images/#responsive-images
i think it might be another new thing in bootstrap 4
oh crap, are they changing it again :)
hey floks i am at the js calculator challange should i use a tabel for the button arrangement or flexbox?
i've been doing this for like 3 days and I'm already totally over bootstrap 4
Ooh.. I had the same problem. img-fluid did it.
@scharom16 avoid tables
thanks @MattLong87
skybreak48 sends brownie points to @mattlong87 :sparkles: :thumbsup: :sparkles:
hey guys, i am currently doing random quote machine
how do i even get those quote??
api offline
@FL8Liew there are a couple of options, check out this thread https://www.reddit.com/r/FreeCodeCamp/comments/4b1fox/free_api_for_random_quote_machine/
@MattLong87 wow how do u even find this?
@FL8Liew google, haha
@FL8Liew I searched for "random quote api"
@MattLong87 so which means i just need to put the code into the java part?
.
@kirbyedy thanks
scharom16 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1812 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
javascript aint java
hi there! can anyone help me with the minimax algo in the tic-tac-toe game? I've written it but there's a bug where I'm not able to set the score properly.
hi there! can anyone help me with the minimax algo in the tic-tac-toe game? I've written it but there's a bug where I'm not able to set the score properly.
Morning everybody! Working on the javascript calculator. Having trouble centering the buttons and display vertically. Tried using the 'vertical-align: middle' property in a few different areas but doesn't seem to make a difference. Can anybody help?
does anyone know if you can pass a parameter to setInterval method like this
timer = setInterval(function() {countDown(time)}, delay);
@aenila you could use bootstrap rows and columns
I will give that a shot and see where it gets me. Thanks @cryder9898
aenila sends brownie points to @cryder9898 :sparkles: :thumbsup: :sparkles:
:cookie: 301 | @cryder9898 |http://www.freecodecamp.com/cryder9898
@aenila also bootstrap container class will center everything and make nice margins
Has anyone completed the pomodoro clock?
@cryder9898 instead of defining an anon function in the setInterval block, you should write the function outside, then call the function
i.e. setInterval(myFunc,1000);
hi there! can anyone help me with the minimax algo in the tic-tac-toe game? I've written it but there's a bug where I'm not able to set the score properly.
hi, I have a strange problem. I am building the weather app and while the script that I made so far works on my phone (android/firefox), it does not work on either of my computers (ubuntu/firefox). I am puzzled as to why, wince other javascript websites work just fine including my previous pens. Can you see what is wrong with it?
http://codepen.io/achudoz/pen/bgJQLx?editors=1011
http://codepen.io/achudoz/pen/bgJQLx?editors=1011
oh and on my computers, I cant even get the geolocation data or console.log checkpoints. Nothing works and I have no Idea why. It did work yesterday. Hello frustration my old friend.. :D
hi there! can anyone help me with the minimax algo in the tic-tac-toe game? I've written it but there's a bug where I'm not able to set the score properly.
@achudoz You'll need to find a way to get location over http to use openweathermap or find a weather api that supports https to use navigator.geolocation.
When I did my weather app, I used Dark Sky for the Weather API because it supports both HTTP and HTTPS. For location, I used navigator.geolocation and https://freegeoip.net/json as a fallback when navigator.geolocation didn't work.
Guys could u reccomend some good html css JS editor?
Try a bunch out and use whatever you're comfortable with. Sublime text is pretty good
Hello! I am working on my portfolio project and I am having an issue. Here is my project: http://codepen.io/toriancrane/pen/jyJJGR
The issue that I am having is that, under the Contact section where my social media icons are, whenever I try to turn those images into links, it warps that section of the page from looking like this https://gyazo.com/efc12a3aca76a8ecfd6d058e01bd87b9
to looking like this https://gyazo.com/217554347aebaef5c29efb070a4720b6
Does anyone know why this is happening?
Above your contact section, you've declared this
"<a name="contact"</a>"
yeah for the navigation at the top
@toriancrane This confuses the script below it
Its not closed right
<a name="contact"></a>
ahhhhh
okay @hashris thank you!
toriancrane sends brownie points to @hashris :sparkles: :thumbsup: :sparkles:
:cookie: 84 | @hashris |http://www.freecodecamp.com/hashris
How does one accomplish the Portfolio Project without having learned any of the code used for it? Did I miss something? I swear all I did was hit next after every challenge. https://codepen.io/FreeCodeCamp/full/YqLyXB/.
@rasty42 I've found that it's been an ongoing process for me. I continued on through the other lessons/challenges and when I learned about something new would go back and figure out how to implement it
im only just now really about to check it off as completed and im about to start the jQuery section, so dont feel like you HAVE to do 100% of it before moving on
woops i meant the JSON APIS section
How do you move on? I try to click through the continues and it just cycles me back
if you go to your map
you can just click on the next one
hey all
hey
I am having issues setting my background image for my codepen project
what do you have so far @apalm1341
I looked into w3schools for guidance
and it looks like I did exactly what they did
so not sure what did wrong
@toriancrane Thank you.
rasty42 sends brownie points to @toriancrane :sparkles: :thumbsup: :sparkles:
:cookie: 255 | @toriancrane |http://www.freecodecamp.com/toriancrane
@apalm1341 find another image .. /hosting server
agreed
That's really counter-intuitive and frustrating. I've had this issue with trying to use this and CodeAcademy. I just get to a point where it feels like I've been left waaaaaaaaaaaaaay behind and all I've done is follow instructions. Really kills my momentum.
@moigithub hosting server as in another website ?
@rasty42 I do feel like that some of the topics can be scaffolded a bit better. if i had come into this with like 0 programming knowledge i think i would have struggled more than I have been. my advice is just to get comfortable with using outside sources to fill in the gaps. FCC is a great framework to get you going but sometimes you have to get a little more information on your own
https://www.lifewire.com/free-image-hosting-sites-3486329 @apalm1341
yep.. some websites to upload image files
if i recall imgur dont allow hotlinking neither
yep.. some websites to upload image files
if i recall imgur dont allow hotlinking neither
I do have 0 programming knowledge and I thought that was whole point of these sites was to help those with no previous knowledge. Oh well. I appreciate your time.
@moigithub ok
will look into that
I forget how hotlinking works lol
it been awhile since I had to deal with that weird stuff
@rasty42 the projects are meant to be a way to get you to make connections with the topics they cover. It's true a lot of it is following their instructions, but you can always go back and reference a topic to see how you did something and then try to incorporate it into your project. If the information there is not enough, then Google some answers. It'll take some work, especially for people with 0 knowledge, that's all.
maybe I am too stupid to find it but is there a equal sign in font awesome?
which one is better: Atom, Brackets or Sublime?
@IsaakNazar
in my opinion visual code
but there is no better or worse, there is just the editor you like to work with and the editor your employer dictates you to use :)
in my opinion visual code
but there is no better or worse, there is just the editor you like to work with and the editor your employer dictates you to use :)
@IsaakNazar i've noticed that atom has some lag problems with css files having hundreds of lines
@IsaakNazar i've used all of them. sublime makes ME comfortable and this is what i use now
@sorinr Hi! :smile:
hi. been missing for a couple of days :)
I wanted to ask you about that, but I thought you were here at a different time than usual. Welcome back
What would be the best way to layout the page? Ive heard floats arent good for responsiveness, so what should i use? Flex box?
Im new at coding
@fortMaximus yea glad to be back
:smile: :+1:
http://codepen.io/noobsicle123/pen/ggyjJj?editors=1100 why cant I jump to the social media id but I can jump to everything else?
the anchor link look fine, the thing is that id is at the bottom and there just isn't enough height to "properly" jump to it.
Hello. I need some help with jquery. How can I add a class to an element depending on elements that other div's have? http://codepen.io/dimasimply-1472290786/pen/PWvWRE/
hi I got a problem with my JSCalculator
when you zoom in and out and look at the button edges you can see there a kind of border or some other line-thing ... I removed every margin and border property form the buttons but it is still there..
How can I get rid of this?
when you zoom in and out and look at the button edges you can see there a kind of border or some other line-thing ... I removed every margin and border property form the buttons but it is still there..
How can I get rid of this?
hey guys im building the local weather app, and im stuck on something ive done a million times
im trying to pass data into state and then render said data (using react)
my issue is on line 34 http://codepen.io/arrrrrrr/pen/rjbQvN?editors=0011
i can properly pass things into state but i cannot access them
@Marianissimus Hey sorry I was not available, no I did not find a work around yet
I think I hate codepen
Hey guys...I'm stuck on creating a thumbnail from codepen. I managed to get an image in there that will link to the page but its not technically a thumbnail of the site. I have been reading for days and cant figure it out...help?? This is what I have now : <p> <a href="http://codepen.io/sassy2807/full/LxeaEj/" target="_blank"><img src="http://www.opal-eyewear.com/sites/default/files/styles/field_marque_z1_photo/public/marque/main/ny_logo.jpg?itok=-NvwtzcZ" width="300" height="225" alt="Photo of White Beach in Boracay, Philippines" /></a>
I figured out how to embed...but again I dont think thats what im looking for
Can someone tell me why my getJSON()'s were working yesterday and now they aren't anymore? Both of these apps were working fine and I haven't changed anything. Is this something on codepen's side?
https://codepen.io/ericsolomon21/pen/GrvKZP
https://codepen.io/ericsolomon21/pen/NdgajG
https://codepen.io/ericsolomon21/pen/GrvKZP
https://codepen.io/ericsolomon21/pen/NdgajG
because codepen is a piece of crap
did you change from http to https ff the top of my head
hey every one, any other beginners on here that would like to put there knowledge into a collaborative project, i just got finish with the basic of html/css/js
@ArashDai I guess that fixed it. How can I make sure it opens back up in http instead of https?
i mean if the request url has http in it it should open as http right?
correct me if im wrong
Hi everyone! Does anyone know how to use Font Awesome icons in Code Pen? My Font Awesome does not show up....is this a settings issue?
im not sure, are you inking the stylesheet properly?
linking*
@ArashDai my request URLs are http, but the address bar in my browser had https. When I changed that to http, it worked. I guess it is just a code pen thing. Ill just make a default statment saying to remove the https and once they change it to http, it will be fixed.
@Noobsicle123 Seems to be jumping for me
forsure sorry I couldnt be more help
if anyone could help me pass state i this react app I would love you forever
ive done it a milliontimes but today It wont worj
work*
@ArashDai That may be the problem...
wooooo
its always the little things
spend 5 hours debugging? oh you missed a semi-colon
can someone help me, I feel my 6th gray hair growing in
<button type="button" class="btn btn-link">
<href url: "facebook.com">Facebook</a></button>
<h1>Webpage Design:</h1>
<h4>Showcasing What I Have Learned in FreeCodeCamp</h4>
url=
no colon?
not url:
also
wow @ArashDai Thanks!
zackrich12 sends brownie points to @arashdai :sparkles: :thumbsup: :sparkles:
:cookie: 155 | @arashdai |http://www.freecodecamp.com/arashdai
nonono
waiiiiit
okay
its <a href='facebook.com'></a>
right?
well I guess I'll just sit here answering questions until I regain the strength to finish this project
@ArashDai good, i'll need you lol
lol
<button type="button" class="btn btn-link">
<a href = "http://facebook.com">Facebook</a></button>
<h1>Webpage Design:</h1>
<h4>Showcasing What I Have Learned in FreeCodeCamp</h4>
i tried this but it still doesn't go to facebook in codepen/ my code editor
@ArashDai
@ZackRich12 try https
@ZackRich12 Maybe try<a href="/" target="_blank"></a>
the blank
can you wrap links like that?
@aimee-katherine What do you mean?
i think you want to wrap the button with the link
like <a><button><button><a>
@ZackRich12 If the problem is that Facebook isn't opening, I say try adding target="_blank" after Facebook.com"
<a href = "http://facebook.com">Facebook
<button type="button" class="btn btn-link">
</button>
</a>
did it work?
also
nope
you want to but the facebook between the button tags
hmm
@ArashDai nevermind
here is what i got:
Facebook(button here with link that worked)
@ArashDai
aimee was right set target to blank and it opens in a new tab
Sorry, i am a noob. Target??? @ArashDai
lol i dunno
Can someone help me with my header? Seems to not be in line and also the font wont turn green. Thank you!: http://codepen.io/RLD2121/pen/XpQOqx
ive never had to use target
codepen is weird
I think im just going to have to make this project and deploy it on heroku so i can submit it
why is this so hard
@ArashDai codepen acts very weird with links
and react
it keeps throwing errors at me for no reason
every now and then it decides the spread operator (...) is an error even though im suing babel
using**
you know what
im done with codepen forever
lol
@RLD2121 what do you want your header to be in line with?
does removing container-fluid give the effect you want?
The list seems to not be aligned and also contains white side borders
Cool, I removed container-fluid and the white side borders went away. Thanks!
haha!
be careful using container fluid
it should be on the most parent component
ya, im a noob and had no idea what it does
its cool
weve all been there
do you happen to know why my list is not aligned?
The Rondel is higher that the other 3
than*
hmm lemme see
give that line item the class pull left
...If only I could solve my own problems...
seems to stay the same
think it has anything to do with the bootstrap version im using?
no
let try again it worked o my pc
something weird is going on here
ya
I tried it again and the "Contact" aligned with it but the rest remained at the bottom
lol
I would take a look at the bootstrap nav documentation
i dont think you are using the classes properly
will do. thanks for your help man!
because if you hover over the links
bubbles appear over the nav pills
Hello! I need help, I am stuck!
I need help with adding in cart, I called Web services products, and now function dodajProizvod () showing me the error cenaId is null .... I don't know how to fix....
If anyone understands me...
I need help with adding in cart, I called Web services products, and now function dodajProizvod () showing me the error cenaId is null .... I don't know how to fix....
If anyone understands me...
I honestly dont think anyone here can help you with that
@RLD2121 ur closing <a> is wrong
ok, I tried: D
:D
=/
sorry
@moigithub wow, I completely overlooked that....it works now...Thanks!
rld2121 sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 2704 | @moigithub |http://www.freecodecamp.com/moigithub
@ArashDai :)
you know the sad thing
like last week I made a way more advanced weateher app using thesame api
and now i cant make a more basic version
im just going to link that project and say im done
@ZackRich12
<a class="btn btn-link" href="https://www.facebook.com" target="_blank">Facebook</a><button> is for submitting information.
<a> is for navigating to another location.
You can't have one wrapping the other.
<a href="https://facebook.com"><button>Visit Page Now</button></a>
<a href="https://facebook.com"><button>Visit Page Now</button></a>zackrich12 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 238 | @skycoder01 |http://www.freecodecamp.com/skycoder01
@ZackRich12 That is not valid HTML, so it may not work in all browsers. You can't have <button> inside <a> or <a> inside <button>
@SkyCoder01 Why not?
@ZackRich12 Because the HTML5 spec does not allow it