by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Lily Romano
    @Lilyheart
    Browsing nonsense in the dark xD
    What’s up?
    Matt Richards
    @mattjrichards
    I'm trying to figure out why when I make changes in my main.css file they don't reflect in the browser. I'm using Atom with Chrome and LiveReload.
    Some changes work, but others don't.
    Lily Romano
    @Lilyheart
    what isn’t?
    @davidjcastner you ever use livereload?
    Matt Richards
    @mattjrichards
    I don't think it's the LiveReload. I think it might have something to do with the links I have in the <head> in my html.
    Lily Romano
    @Lilyheart
    You want to put some of the snippet code here you think is the issue? To put code up type three backticks (grave symbol found on the key with the ~ ) then hit shift enter, put it the code, shift enter again and three more backticks. Put it in an easier to read code block.
    Matt Richards
    @mattjrichards
    ok
    <!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href="main.css">
    
            <!-- Latest compiled and minified CSS -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
            <!-- Optional theme -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
          <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    
        </head>
    Like that?
                <!-- Latest compiled and minified JavaScript -->
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    
            <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        </body>
    </html>
    Then I have this at the bottom of my html.
    Matt Richards
    @mattjrichards
    h1 {
      color: green;
      font-size:4.0em;
      padding:0px;
      margin-top:0px;
    I can change the padding and it works. But if I try to change the color or the font size it doesn't reflect the changes.
    Lily Romano
    @Lilyheart
    Is the code being over written by something else? You wanna just stick the code in a dummy codepen file and i’ll grab it and you can delete the pen?
    I was just trying to mock up some stuff with your code but the actual code might work better.
    Matt Richards
    @mattjrichards
    It works in Codepen, but when I copy and paste the code from Codepen into Atom it doesn't work right. Although, in Codepen I don't have those Bootstrap links in the head. I'll copy and paste exactly what I have in Atom into Codepen. Gimmee a minute.
    Lily Romano
    @Lilyheart
    coolie. then i’ll steal the code and make it local. easy code transferrance xD
    David Castner
    @davidjcastner
    just got home from class
    Lily Romano
    @Lilyheart
    ew
    Matt Richards
    @mattjrichards
    David Castner
    @davidjcastner
    I've used live reload once or twice but not in depth, I'm reading through the convo at the moment
    Matt Richards
    @mattjrichards
    It's doing the same thing in Codepen. I think it may be the Bootstrap links.
    Lily Romano
    @Lilyheart
    got i think, not tested.
    in your code, move your stylesheet link to main.css to after bootstrap
    you are loading bootstrap after and it’s overwriting.
    David Castner
    @davidjcastner
    ^ correct
    Lily Romano
    @Lilyheart
    Screen Shot 2017-01-25 at 10.29.36 PM.png
    David Castner
    @davidjcastner
    lol I was about to screenshot that
    Lily Romano
    @Lilyheart
    If you inspect the element you can see the load order. i changed the color to white xD you can see the white crossed out and bootstrap above it.
    Matt Richards
    @mattjrichards
    Yes!!! You are so awesome!
    Lily Romano
    @Lilyheart
    this is chrome
    we try xD
    when i’m awake tomorrow i can tell you how to load bootstrap onto codepen unless David wants to take over xD. Typing in bed in awkward lol
    Matt Richards
    @mattjrichards
    @Lilyheart Thank you. Awesome. You'll have to show me how you did that.
    ok. don't want to keep u
    Lily Romano
    @Lilyheart
    right click the part misbehaving and select inspect
    David Castner
    @davidjcastner

    css that is declared is after other css takes priority provided the selectors are the same. for example:

    h1 {
        color: green;
    }
    
    h1 {
        color: red;
    }

    in this example h1 will take the color red. Because you loaded Bootstraps css after your css, the bootstrap took priority

    Matt Richards
    @mattjrichards
    So it matters in what order you put stuff in your html
    David Castner
    @davidjcastner
    correct, especially loading other sources like css and javascript
    Matt Richards
    @mattjrichards
    See, I learned this stuff but I forgot. So much info to take in! Thanks @davidjcastner
    David Castner
    @davidjcastner
    That's why javascript files are put at the bottom of the body tag; lots of javascript depends on elements already being part of the DOM to function properly. Otherwise the script will look at the DOM and not find the element.
    Lily Romano
    @Lilyheart
    David Castner
    @davidjcastner
    @kilocycle I recommend looking at a short tutorial about the chrome debugger tool, it will help you greatly. I believe freeCodeCamp has one.
    But you can always loo for a video which might give you a better idea of how to use it
    Matt Richards
    @mattjrichards
    ah ha, i see. I'm so happy right now. I love it when stuff works.
    Ok. I'll check it out.
    Lily Romano
    @Lilyheart
    i do a little dance when things start workin
    David Castner
    @davidjcastner
    Yes there is a section on freeCodeCamp called chrome developer tools (you can find it in the map), I would recommend going and doing as much of that, don;t worry that you're not doing challenges in order
    feel free to tag me if you have any other questions, I'll probably be up for a little
    Matt Richards
    @mattjrichards
    @Lilyheart @davidjcastner Thanks again. I'm going to get back to learning this stuff. I'm usually up pretty late at night into the morning.
    David Castner
    @davidjcastner
    no problem that's what we're here for! oh btw for code pen, codepen takes all the html in the editor and inserts it into the body tag, so there is no need to add the doctype, html, head, or body tags. If you need to insert stuff into the head tag or want to add things like bootstrap, you add them in the settings. See screenshots below