Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Jun 19 2020 20:09
    @krisb1220 banned @Gastony
  • May 14 2020 22:39
    @bjorno43 banned @minitechtips_twitter
  • May 14 2020 22:38
    @bjorno43 banned @real-action
  • Feb 01 2020 00:27
    @bjorno43 banned @Ndoua
  • Jan 07 2020 03:10
    @bjorno43 banned @doctor-sam
  • Aug 17 2019 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 2019 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 2019 17:13
    @mstellaluna banned @cmal
  • Jan 08 2019 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
Tyler Del Rosario
@TylerDelRosario
nope its a blank
Devin Miller
@edwin0258
Can you screenshot your cloud 9 interface? @TylerDelRosario
nvm I can open your workspace on my side.
Ken Haduch
@khaduch

@texirv0203 - these are some basics about how to make an object that you need to use for this hash / number counter.

var myObj = {}; // initialize an empty object
var anyNum = 8;
myObj[anyNum] = 1; // after this, the object should have an entry with a key of "8", value of "1"
myObj[anyNum]++;  // after this, the object should have an entry with a key of "8", value of "2"
anyNum = 5;
myObj[anyNum] = 1; // after this, the object should still have the entry for "8" and a new entry with a key of "5", value of "1"
myObj[anyNum]++;  // after this, the object should have an entry with a key of "5", value of "2"

if you take that code and experiment with it, for example in a browser devtools console, you can see what's happening. Or you can go to http://pythontutor.com/javascript.html and plug it in, and run it.

@texirv0203 - that's showing the basics of what you will eventually want to have coded to solve your problem - getting the individual values into a variable where you can use them to accumulate your data in the object.
Rodney Chism
@rodchsm

I have some questions but one question at a time.

In my CSS, the .navbar-brand img connects to my logo in the top left corner of my bootstrap navbar. Its off center in that corner. Does anyone know how to position the logo correctly? Let me know. Thanks

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

Thats the navbar-brand img selector in my CSS
Devin Miller
@edwin0258

@rodchsm

.navbar-brand img {
    height: 50px;
    margin-top: -15px;
}

Try this. Because there is a lot of padding in actual image I had to use a negative margin.

Ken Haduch
@khaduch
@rodchsm - I got it to center just by cleaning up the code in your CodePen - removing the <html>, <head> code into the proper places in the CodePen interface. Then it works...
@rodchsm - here is a link to the CodePen that I edited from yours and forked.
Rodney Chism
@rodchsm
@khaduch thanks.
CamperBot
@camperbot
rodchsm sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3496 | @khaduch |http://www.freecodecamp.com/khaduch
Rodney Chism
@rodchsm
@khaduch i will check it out after this
@edwin0258 how did you figure out there was a lot of padding in the image
Ken Haduch
@khaduch
@rodchsm - I"m not sure what in particular might have been causing the issue. It was just my first impression to move the external libs into the proper places for CodePen's template-based system.
Devin Miller
@edwin0258
I opened the image by iteself. It's ok though, I think @khaduch 's solution is better. @rodchsm
Rodney Chism
@rodchsm
@edwin0258 @edwin0258 I have one more question. Why isnt my .backgroundheader image fitting all the space. In other words, why is the full image of the picture not show up to cover the h1 and the button. Is there a solution?
Ken Haduch
@khaduch
@rodchsm - what might have been going on is that when you include the links for the CSS and JS code in the HTML panel is that CodePen will generate the HTML page and things will get loaded in the wrong order. For example, your custom CSS will get loaded in the <head> section, but then the HTML section will be inserted into the output HTML code and probably conflict with your custom settings. By putting the external CSS in the CSS config panel, things get loaded in the proper order. You might be able to see what is going on if you load your page as it is now, and do a "View Frame Source" for the output panel.
Devin Miller
@edwin0258
@rodchsm Only way I can think of is to remove background-attachment and add background-position with a value of center. But in order to cover the area you've specified it has to cut off some of the image.
Rodney Chism
@rodchsm
@khaduch ok its my second time using codepen. Thats great information especially for the first question. However even in dreamweaver the CSS for the .backgroundheader is off. Do I need to use a background-size: contain; or something else to expand the image fully. I have been trying for an hour to fit that image.
@edwin0258 theres no way to fit all? :(
Devin Miller
@edwin0258
There are ways. Like making the container holding background image a larger size.
Ken Haduch
@khaduch
@rodchsm - so you want the full image to be in the rather small space at the top of the page?
Rodney Chism
@rodchsm
@khaduch yes i was going to have it look like my old site techhut.bigcartel.com.
Ken Haduch
@khaduch
@rodchsm - if you shrink the width of the browser window to ba as small as you can get it, you'll see that the picture in the background will resize to be more-or-less showing the full image. The main problem is that the proportions of the image and the area that you are trying to fill are way off.
Rodney Chism
@rodchsm
@edwin0258 Ill try that.
@khaduch oh ok! So, the image's dimensions are the wrong size for a regular browser?
*a browser
Ken Haduch
@khaduch
@rodchsm - yes - your old site had a front page that filled the screen or at least had a much larger size so the images were able to be shown completely.
Rodney Chism
@rodchsm
@khaduch @edwin0258 alright thanks guys. Ill get to work. Is there anything else I need to know?
CamperBot
@camperbot
rodchsm sends brownie points to @khaduch and @edwin0258 :sparkles: :thumbsup: :sparkles:
api offline
:cookie: 812 | @edwin0258 |http://www.freecodecamp.com/edwin0258
Ken Haduch
@khaduch

@rodchsm - some of the settings for the old site for that top section, the selector

.slideshow div.featured_holder {
  background-color: rgba(0, 0, 0, 0.3);
  background: url("//cache1.bigcartel.com/theme_assets/91/1.4.10/images/overlay_pattern.png");
  background-repeat: repeat;
  background-size: 4px;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 100;
}

Has the height and width settings set to 100%, so it fills the screen.

Dr-D-M
@Dr-D-M
hello there!
Rodney Chism
@rodchsm
@khaduch I threw the 100% for width and height into the .backgroundheader declaration section but it seems the image is locked into the div class="backgroundheader" section. Any suggestions?
Dr-D-M
@Dr-D-M
Have you done the wikipedia viewer project?
Devin Miller
@edwin0258
@rodchsm Height of 100% doesn't work, use something like 100vh.
Rodney Chism
@rodchsm
@edwin0258 is that why? I used 350vh and it worked. ha
Devin Miller
@edwin0258
Yeah :) @rodchsm
Rodney Chism
@rodchsm
@edwin0258 ok so what if I wanted to go mobile with the viewport height would mess up the mobile page. therefore, would I just code a seperate page for mobile or something like that/
Devin Miller
@edwin0258
I suppose you could use a @media query to change the height if the size is mobile. @rodchsm
Randy
@rdavidson3
Hello all, I am working on a a bootstrap task and although I have the challlege right It feels as if a div tag is missing. Am I over thinking it? Would anyone mind checking over the code?
Abraham Anak Agung
@AbrahamAnakAgung
@rdavidson3 post your code or link here. Maybe someone able to help
Randy
@rdavidson3

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
h2 {
font-family: Lobster, Monospace;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>

<div class="row">

<div class="col-xs-8">

<h2 class="text-primary text-center">CatPhotoApp</h2>

<div class="col-xs-4"><a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
</div>
</div>

<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera. ">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-info">Info</button>
</div>
<div class="col-xs-4">
<button class="btn btn-block btn-danger">Delete</button>
</div>
</div>
<p>Things cats <span class="text-danger">love:</span></p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality"> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Crazy</label>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</div>

Funny enough after reading it over enough I see where I became confused. that first
<Div class= "row"> isn't a part of the <div class="col-xs-*>. As I read it , It's a box within a box within a smaller box?
1rjun
@1rjun
can anyone suggest my any website to download web development books
for free