jQuery included with Genesis?

Community Forums Forums General Discussion jQuery included with Genesis?

This topic is: resolved

Tagged: 

This topic contains 29 replies, has 3 voices, and was last updated by  Gary Jones 1 year, 3 months ago.

Viewing 15 posts - 16 through 30 (of 30 total)
  • Author
    Posts
  • #59044

    johndove
    Participant
    Post count: 18

    Thanks Brad. I was aware of that one, and there’s another one called Responsive Select Menu. These are fine for phones, but no good for tablets. Unfortunately, we’re expected to make it look good on everything from the size of a refrigerator to a postage stamp.

    #59073

    Gary Jones
    Moderator
    Post count: 693

    Unfortunately, we’re expected to make it look good on everything from the size of a refrigerator to a postage stamp

    And media queries are the way to do that. If you need a starting point, then copy and paste the MQ from the bottom of the Sample theme (also Genesis itself) style.css into your child theme, and amend further from there. No JS needed.


    Changes in Genesis 2.1 – the ultimate guide to every single change in Genesis Framework 2.1, 2.1.1 and 2.1.2 (all 90 of them!) | @GaryJ

    #59091

    johndove
    Participant
    Post count: 18

    Okay guys, I’ve spent the past couple of hours on writing my own media queries and with a couple of corrections to my code it won’t look half bad. Even though I know it’s not exactly kosher to post this in a theme-based forum, since you guys have been so nice, I’m wondering if you would take a look and tell me what I need in just a couple of places.

    ‘widths': [240, 320, 480, 640, 768, 960, 1024, 1280, 1440, 1600, 1920, 2400]

    There’s no freakin’ way I can get that granular (though I wish I could). Here’s what I’ve got:

    @media only screen and (max-width: 1024px) – social buttons only

    @media only screen and (max-width: 980px) – search form only

    The main sizes I’m doing are for:

    @media only screen and (max-width: 767px)

    @media only screen and (max-width: 500px)

    Okay, problems (just a few):

    1. I am using Nivo Slider on the home page and I have the Slider Size set to “responsive.” But it isn’t responsive. I have it inside a text/html widget with a width of 63.2%. If I don’t give it a width, it’s width is 100% and that’s no good. Not sure what to do here.

    2. at 767 and 500, my text for the 3 middle modules (Showroom, Photo Gallery, About Wooden Sun – .home-middle-1, .home-middle-2, .home-middle-3) does not wrap naturally (100%) and I don’t have a width on those classes. How do I get the text to wrap?

    3. …and any other advice you’d like to offer. : )

    Thanks very much guys, for your help.

    John

    #59093

    johndove
    Participant
    Post count: 18

    Sorry, the url again is http://wp.woodensun.com.

    #59129

    Gary Jones
    Moderator
    Post count: 693

    When I narrow your site down to 540px, I’m still seeing several fixed widths of 1000px for container classes – these are making all of the 100% widths fill the available space, hence a non-responsive slider. #inner and #featured are both 1000px, #content is still 960px etc. Fix these (and others), and the rest of it will become responsive.


    Changes in Genesis 2.1 – the ultimate guide to every single change in Genesis Framework 2.1, 2.1.1 and 2.1.2 (all 90 of them!) | @GaryJ

    #59228

    johndove
    Participant
    Post count: 18

    Gary,

    I’ve removed all exterior container class widths. The slider is still not responsive and my text isn’t fluid (even if I remove the percentage widths they’re not fluid). – ?

    #59278

    Gary Jones
    Moderator
    Post count: 693

    #featured, #nav, #header and #footer-widgets still have a width of 1000px when viewing the site at ~540px wide (that’s just the width I happen to have shrunk my browser to – the number isn’t special in any way.) This may be forcing body to be bigger than it needs to be, which allows other elements to flow into it, even if you think you’ve got them limited.

    .nivoSlider img has a max-width of none (in the nivo-slider.css), but it should be 100% so set it in your style.css:

    [css]
    .nivoSlider img {
    max-width: 100%;
    }
    [/css]


    Changes in Genesis 2.1 – the ultimate guide to every single change in Genesis Framework 2.1, 2.1.1 and 2.1.2 (all 90 of them!) | @GaryJ

    #59292

    johndove
    Participant
    Post count: 18

    Now absolutely nothing has a 1000px width except the wrapper, and the max-width on the nivoSlider img is set. — No change.

    I’m beginning to wonder if this corporate theme was outfitted with even the most basic responsive code, e.g.:

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    I don’t see it. : /

    #59301

    Gary Jones
    Moderator
    Post count: 693

    Kill off the fixed width 1000px for the #wrap (within the media query) and the slider images, nav and subnav and other bits all fall into place.

    It probably wasn’t built with responsiveness in mind – it’s a relatively old theme IIRC. Add: add_theme_support( 'genesis-responsive-viewport' ); to your functions.php to add the viewport line.


    Changes in Genesis 2.1 – the ultimate guide to every single change in Genesis Framework 2.1, 2.1.1 and 2.1.2 (all 90 of them!) | @GaryJ

    #59305

    johndove
    Participant
    Post count: 18

    …fixed width 1000px for the #wrap (within the media query)

    I’m sorry, I don’t know what you mean. The #wrap is not in any media queries. – ?

    #59307

    Gary Jones
    Moderator
    Post count: 693

    No, you’ll need to add it. Something like:

    
    @media only screen and (max-width: 1024px) {
    
        #wrap {
            width: auto;
        }
    
    }
    

    Once you’ve done that, you can start removing fixed percentages as well, from within a media query. For instance, for the text next to the slider (you seem to have two instances of .textwidget #mainhome {}) you can set the width as auto, same for the .home-widget-1 through 3, then add a style to make the images in those widgets display at 100% (that would be upscaling them, which makes the images look a little fuzzy, but they are visual fluff, rather than something critical to the data being communicated. Or you could hide them altogether, as they don’t seem to be linked anyway). You can end up with something like http://d.pr/i/zt0S .


    Changes in Genesis 2.1 – the ultimate guide to every single change in Genesis Framework 2.1, 2.1.1 and 2.1.2 (all 90 of them!) | @GaryJ

    #59310

    johndove
    Participant
    Post count: 18

    Once you’ve done that, you can start removing…

    I totally get that (the 2nd part) but I’m baffled by the a href mixed in with the media query. I’ve never seen that before. Should it be exactly what you have verbatim?

    Btw, the screen shot is spot on. THAT’s what I’ve been looking for!

    • This reply was modified 1 year, 3 months ago by  johndove.
    • This reply was modified 1 year, 3 months ago by  johndove.
    • This reply was modified 1 year, 3 months ago by  johndove.
    • This reply was modified 1 year, 3 months ago by  johndove.
    #59314

    Gary Jones
    Moderator
    Post count: 693

    Urgh – sorry – that’s the forum messing with my code. I’ve updated the above (although it’s still auto-linked it).


    Changes in Genesis 2.1 – the ultimate guide to every single change in Genesis Framework 2.1, 2.1.1 and 2.1.2 (all 90 of them!) | @GaryJ

    #59318

    johndove
    Participant
    Post count: 18

    HOO-RAY!!!

    Gary, thank you SO MUCH for helping me see this through. I know I’ve been a pain in the ass; I really, really appreciate it. Now that my text is flowin’ and my images resizing, the think the rest is all down hill.

    YOU ARE THE MAN!

    Thanks again.

    John

    #59319

    Gary Jones
    Moderator
    Post count: 693

    Glad we got it working for you. I’ll close this thread as we’ve gone way off track from a question about whether jQuery is included or not, but if you have any further questions (responsiveness or otherwise), then feel free to start a new thread.


    Changes in Genesis 2.1 – the ultimate guide to every single change in Genesis Framework 2.1, 2.1.1 and 2.1.2 (all 90 of them!) | @GaryJ

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

The topic ‘jQuery included with Genesis?’ is closed to new replies.