Grow your CSS skills. Land your dream job.

twentytwelve theme css mess

  • # March 13, 2013 at 2:17 am

    No CSS?

    # March 13, 2013 at 2:22 am

    First thing in the morning. I plan on asking for your assessment when I’m done, if you don’t mind. Appreciate it.

    # March 14, 2013 at 10:12 pm

    I did the best I could on that header. I left the css to a minimum to get clean feedback.

    Still compacted on iPhone but I didn’t replace hgroup with a class like Aaron suggested. I thought hgroup was an important mobile tag? Should I just create another class?

    [Your text to link here…](http://www.proto.annethullfineartdesigns.com/anne-thull-fine-art-designs/ “Website”)

    [Your text to link here…](http://codepen.io/doublea79/pen/ItJFj “CodePen”)

    # March 14, 2013 at 11:37 pm

    jk ,

    line 138 on your style.css



    .site-content {
    width:725px;
    }

    This should be removed or converted to %;

    # March 15, 2013 at 12:14 am

    That helped on the iPhone.
    How do you suggest I move the .site-header h2 up under the title
    and the .extra-menu-top up more.

    Also, do you see any issues with .menu-main-container?
    What’s the proper way to move it up? and should I adjust the height?

    Thanks Aaron!

    # March 15, 2013 at 7:35 am

    The h2 will, unfortunately, need to be moved padding-left & negative margin..(I think that’s the best way).

    Try this:

    .site-header h2 {
    color: #000000;
    font-family: “jbt-annabelle”, sans-serif;
    font-size: 20px;

    padding-left: 75px < --
    margin-top: -25px; < ---
    }

    # March 15, 2013 at 7:40 am

    On your searchform

    #searchform {
    float: right;
    clear: right;
    top: 55px; < -- this is doing nothing...you can remove it
    }

    # March 15, 2013 at 7:46 am

    On the menu, I do think you should remove the ‘red’ bg image from the [body] and apply it to the .main-menu-container element.

    We can work on the full width after it’s in the right place.

    Let me work on something…

    EDIT: Here we go…http://codepen.io/anon/pen/EvcCg

    Preserves your current wrapper system…

    # March 15, 2013 at 2:01 pm

    I’ve follwed your css instructions. That link you gave is empty.

    The fade.jpg used to be on the html tag. Now it’s on the body tag. Hope that’s pro.

    Will negative margins cause the page on the iPhone to move horizontally?
    Maybe just left and right?

    I’m new to twentytwelve theme also but on the iPhone there’s a mobile menu button that doesn’t do anything. Looks like the menu is already expanded.

    # March 15, 2013 at 3:11 pm

    Sorry: http://codepen.io/Paulie-D/pen/EvcCg

    # March 15, 2013 at 5:54 pm

    Hey Paulie. Still nothin there?

    # March 15, 2013 at 7:03 pm

    Try it now….I had it marked as Private for some reason.

    Give it a second or two to access your bg image too.

    # March 17, 2013 at 4:03 am

    [Your text to link here…](http://www.proto.annethullfineartdesigns.com/anne-thull-fine-art-designs/ “http://www.proto.annethullfineartdesigns.com/anne-thull-fine-art-designs/”)

    Please check now. Something is not taking.

    # March 17, 2013 at 5:00 am

    You need to remove ‘overflow: hidden’ from line 1435 of your CSS under the .site class.

    # March 17, 2013 at 12:32 pm

    I can’t just remove it since it’s a child theme. Do you want me to set it to auto? I tried that and there’s no improvement. Now there’s a large horizontal scroll on mobile.

    .menu-main-container, .main-navigation ul.nav-menu, and .main-navigation div.nav-menu > ul
    are the classes that make up the nav. Do you see these classes in Firebug?

Viewing 15 posts - 16 through 30 (of 42 total)

You must be logged in to reply to this topic.

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