Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Changes to CSS not doing anything to site

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #203795
    tyson.jewell
    Participant

    I’m very new to CSS, and was struggling. So a while back a great member here named Jerba helped me out a bit and made the code I was trying to make work, work. But I’m having an issue and no matter what I do to the CSS it’s not changing things. Like at all. Messing with padding and margins is effective but it seems like I’m locked out of everything else.

    Pen: http://codepen.io/anon/pen/Ejvmmr

    The layout here is wrong, I assume cause it’s just part of the CSS and html from the site, but that’s OK, that’s not the issue I’m having.

    So they’re basically employee info cards for the website. Big container div with a picture, caption, and short paragraph inside.

    Everything looks good on the actual live site when published but one, or actually apparently two, of the guy’s names is too long, putting their cards out of position. Also the lines are too close together.

    I tried changing the size of h1 under .employee but there’s no change. I tried setting line-height to 120%, nothing.

    Also I notice the text isn’t being transformed to uppercase, which is fine, but confusing since the instruction is there.

    Annnnnd even if I change the px size of the img div within it, the picture always sizes to what the actual .jpg file’s dimensions are.

    What’s going on? And thanks

    #203796
    Paulie_D
    Member

    You had some closing braces } missing / out of place…also the single line comments //…don’t do that in CSS, use proper comment format.

    After tidying all that up it was just a case of using vertical-align:top on the inline-block elements.

    http://codepen.io/Paulie-D/pen/PqKmOW

    #203804
    tyson.jewell
    Participant

    In my defense, I didn’t write those comments, haha.

    Also as far as the actual CSS goes, that looks good but I have some other issues now. One is I forgot he made the pictures circles. I played a bit in the pen and figured out how to fix that. Don’t feel like you have to write the code again, unless you really really love doing it. I don’t mind doing research and learning but I don’t even know what to look up is the issue.

    One is I forgot he made the pictures circles. I played a bit in the pen and figured out how to change that. But still, a minor problem is all the pictures appear that way now. Even ones outside of the employee card. How do I apply those rules for img only inside the “employee” div?

    Reason being we have a bunch of people in the office who aren’t getting a write up, just a picture and a name and I wanted to change the style up a tiny bit for them. Essentially the same just the pictures a little more squared off.

    Thanks again!

    #203805
    Paulie_D
    Member
    .employee img {
      width: 100px;
      height: 100px;
      margin-bottom: 10px;
      border-radius: 50%;
    }
    

    Only images inside the .employee element.

    As for images a little bit more squared. just change the border-radius number

    http://codepen.io/Paulie-D/pen/VLzWLP

    #203807
    tyson.jewell
    Participant

    Annnnnd you’re a genius. I thought it was .employee.img or .img.employee or something.

    When I tried looking it up I got an unfriendly forum using info way above my head talking about em spacing and default styles and inheriting and stuff haha. Obviously went wrong somewhere cause that’s incredibly simple.

    Seriously though, great work and great working with you.

    #203823
    Paulie_D
    Member

    No problem.

    Getting CSS selectors right is often trick since they often appear very similar

    http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize–net-16048

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.