Grow your CSS skills. Land your dream job.

How to change a class positioning via jquery

  • # December 23, 2012 at 3:22 pm

    Hi there,
    I am using some jquery to call another class. Basically – upon clicking h1 it is calling an “expanded” div to show more info ect. I am wondering how I can bump up the expanded paragraph text up into the padding or the h1. I would not want to change all other h1’s properties on the page… if that makes any sense.

    Example here: http://codepen.io/wragen22/full/sqrlD

    # December 23, 2012 at 4:10 pm

    [Like This?](http://codepen.io/joe/full/lmeuo “Like This?”)

    Instead of giving h1 the 50px padding, I recommend giving the article element the padding.

    # December 23, 2012 at 4:31 pm

    I’ve tried that.. for some reason there is no change happening. I wonder if it’s because I’ve added the “pointer” js class. It should just be inheriting h1 properties though. Not sure what is going on.

    # December 23, 2012 at 4:37 pm

    Have you tried this?

    h1 {
    font-size: 2em;
    text-align: center;
    }

    article {
    padding: 50px;
    }

    # December 23, 2012 at 4:43 pm

    So trying that. The font size decreases greatly and space between items increases. By increasing size the padding is still there as well. Forgive my ignorance..

    # December 23, 2012 at 5:05 pm

    I think you may have added the code I gave you to the end of your stylesheet. What I meant was delete padding: 50px; from your h1 class. Then add article { padding: 50px; }.

    Does that help?

    Edit: Did you look at [the changes I made ](http://codepen.io/joe/full/lmeuo)?

    # December 23, 2012 at 5:43 pm

    I did do that. Still having issues.. For some reason the h1 is keeping padding.. the pointer I created is being shown in the chrome inspector. Maybe that has something to do with it.

    # December 23, 2012 at 5:55 pm

    Do you wanna post your updated codepen?

    # December 24, 2012 at 1:07 am

    Weirdest thing..code pen is working with your suggested changes – however my project is keeping the padding. I’ve looked through my css files over and over and cannot find anything that is setting the property. So frustrating.. :-/

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".