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
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
like books of html css and javascript
Long Nguyen
@longnt80
some of the best book for js are free to read
1rjun
@1rjun
any website ???
Long Nguyen
@longnt80
and You Don't Know JS
1rjun
@1rjun
to download free material
Abraham Anak Agung
@AbrahamAnakAgung
@rdavidson3 nothing wrong with your code
1rjun
@1rjun
yes i know js
but i want to master it
as well as html and css @longnt80
Long Nguyen
@longnt80
have you read You Don't Know JS?
1rjun
@1rjun
what?
ohkk
Abraham Anak Agung
@AbrahamAnakAgung
@1rjun its a book,
1rjun
@1rjun
suggest me
its link to download