jQuery included with Genesis?

[johndove]

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). - ?

[Gary Jones]

#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:

.nivoSlider img {
    max-width: 100%;
}

---

WordPress Engineer, and key contributor the Genesis Framework | @GaryJ

[johndove]

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. : /

[Gary Jones]

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.

---

WordPress Engineer, and key contributor the Genesis Framework | @GaryJ

[johndove]

...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. - ?

[Gary Jones]

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 .

---

WordPress Engineer, and key contributor the Genesis Framework | @GaryJ

[johndove]

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!

[Gary Jones]

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

---

WordPress Engineer, and key contributor the Genesis Framework | @GaryJ

[johndove]

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

[Gary Jones]

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.

---

WordPress Engineer, and key contributor the Genesis Framework | @GaryJ

[Author]

Posts