Building a Responsive Layout With Skeleton: jQuery Plugins
videos

Building a Responsive Layout With Skeleton: jQuery Plugins

on Mar 27th 2012 with 77 comments
Tutorial Details
  • Topic: Responsive Web Design
  • Difficulty: Intermediate
  • Screencast duration: 54 mins
Download Source Files
Demo View It Online
This entry is part 4 of 8 in the series Building a Responsive Layout With Skeleton

Building a Responsive Layout With Skeleton

Our responsive layout is coming on in leaps and bounds, so let’s crank it up even further! Today we’ll look at various jQuery plugins which we’ll use to pull Twitter and Flickr feeds into our page, plus a responsive slider plugin for our features area at the top.

Preparing the Footer

Before we start implementing various jQuery toys, let’s first tidy up our footer area. We’ll tackle the diagonal line styling behind the h4 elements, place our secondary logo, add the generic dummy content and finish styling the lists.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!

Implementing Tweet! and Flickrush

Having dealt with most of the styling, we can now grab the Twitter and Flickr jQuery plugins which will pull feeds into our document. As we’re starting to add quite a lot of code to the foot of our page, we’ll make a point of compiling that all into a single .js file.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!

Implementing Flexslider

Last, but not least, the responsive slider plugin. We’ll be using the hugely capable Flexslider plugin (recently acquired by WooThemes) and implementing it to show off a few PhotoDune images.

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!

Additional Resources

Some useful links to further build on what’s been covered in these videos.

Images courtesy of PhotoDune.

Series Navigation<< Building a Responsive Layout With Skeleton: NavigationBuilding a Responsive Layout With Skeleton: Finishing Off >>

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Hi there! My name's Ian Yates. Welcome to Webdesigntuts+ :)  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • ragzor

    HEY!!
    i chose not to use any framework for my web designs because i was too lazy to go through the documentation but your tut made it soo easy and convinient to understand this skeleton.. i cant wait for the next screencast already!!

    thanks ALOT!!!!!!!

  • SMHVL

    So nice! Thanks for the new part!

  • supprof

    thank you body
    very nice series

  • Anderson Lucas

    Still learning, more and more!
    Nice tutorial… great work and thanks!!!

  • Pingback: Building a Responsive Layout With Skeleton: jQuery Plugins | Shadowtek | Hosting and Design Solutions

  • dj

    @ian… I’m sure that you don’t need all of us to tell you that these tuts are not only on a highly relevant and timely topic but that you are doing an excellent job in organizing and delivering them.

    I did hear you let slip something about the graphic’s being “as large as they are currently… but will talk about it later” – which I’m assuming (hopefully) will be instructions about modifying the framework to cover “real desktop” monitor sizes? Hope so…

    Also… don’t mean to take more than my share of your time; but, it seems to me that the same rationale that you gave in your first tut about why you decided to do this series from what was originally meant to only be a photoshop tut, holds true for deciding to continue this onto a wordpress example.

    To add a little credibility to my request – I wonder if you remember back when Jeffery was doing basically the identical thing to what you are doing now, only with a much more simple (and less attractive) psd file. He made the promise that “if we can get to over 80,000 subscribers – I will continue this on to WordPress.” Well, it took a little longer than anticipated, and Nettuts+ was “forked” into Webdesigntuts+ BUT NONETHELESS – nettuts+ is well over 80K now and the promise has never been fulfilled. (Us OCDs never really forget a promise).

    From my point of view, YOU could wipe out any unfulfilled promise, and get Jeffery out of the doghouse, by continuing this particular site onward, clear through coding for WordPress [even if it meant that you needed to do a guest post on WPtuts+]. It’s a great example site to use for a WordPress series, containing all the common elements; AND what a benefit it would be to carry a single example clear through the entire webdesign process from beginning to end! (Something I’ve not been aware that Envato has ever done yet.) And, humbly, I suggest that, with your style, you should be the one to deliver it.

    • http://www.snaptin.com Ian Yates
      Author

      So it’s down to me to fulfill Jeff’s promises?! I’ll certainly see what I can do.

      There’s the matter of finishing up this layout, then examining a wide screen version (so we’re looking at possibly two more posts) by which time the whole Envato team will be together for the Kuala Lumpur 2012 meetup – if I don’t come back from that with a zillion other things on my plate I’ll see about the WordPress theme!

      Glad you’re enjoying the series in any case :)

      • http://Leivreed.no Leiv

        What an amazing resource this tut has been! He’s got a point about the WordPress part (but there are a few ones out there) – I’d love to follow the whole process up to the finished product:)

        Thanks again! This is why the www is so amazing!

  • John

    Nice set of tutorials! About the slider… is the “Flexslider” the key to a responsive slider, or will most any slider plugin also be responsive by default?

    • http://www.snaptin.com Ian Yates
      Author

      A lot of the jQuery slider plugins that people have been leaning on for a while (such as Nivo and Cycle) aren’t yet catering for responsiveness out of the box. They’re still very good packages, don’t get me wrong, but they rely on fixed dimensions to work properly.

      There are several responsive options out there (like Blueberry, wmuSlider and the touch-enabled RoyalSlider) but I’m a big fan of the simplicity Flexslider offers.

  • jk

    I concur with dj, the promise of “reach 80k & get WordPress tuts’ never been realized. Also agree that it would be nice if Ian would convert this amazing tutorial into WordPress. I am sure people will agree, don’t you!

  • http://codendesign.blogspot.com nXqd

    Very nice tutorial .
    @John: I don’t think most other slider plugins is responsive by default. Fexslider is on of responsive slider out there :)

  • Pingback: Responsive based layouts | Pearltrees

  • http://coder-design.com/ coder-design

    This is very nice website. Thanks for sharing.

  • urbgimtam

    I have to state this: what a great series!

    I’ve been following Envato for quite some time, and I’m always eager to see what they’ve came up with. But this is one of the best tutorials I’ve read. Well made, organized, clear and to-the-point.

    The techniques you show positively influenced a project I started last week, where most of what I’ve learned here went into a drupal website, and the results have been quite amazing for me. As I’m not so much into wordpress, I love these pure html tuts, which I can easily convert to my desired system.

    Thank you so much for your effort. Helped me allot.

    • http://www.snaptin.com Ian Yates
      Author

      Great to hear – I’m glad you’re enjoying the series and are able to put what you learn to practical use! That’s what we aim for :)

  • Pingback: Building a Responsive Layout With Skeleton: jQuery Plugins | Webdesigntuts+ » Web Design

  • http://themeforest.net/item/autum-multipurpose-html-template/1694773?ref=UniquePixelWeb UniquePixelWeb

    Great tutorial. Helped me lot to create my first ever responsive layout.
    Thank you so much!

  • Ben L

    This series of Tuts is one of the most useful i have found since starting to learn web design.

    I’ve followed it from designing the web page in photo shop through to this, its helped me learn a lot about implementing code, i’m about halfway through the coding and using the skeleton is making things a lot smoother and faster as i was working up the psd on my own before i found these tuts.

    what i’ve been wondering is how I would add a user end to the blog area so you can upload images and news without the user needing to update the code themselves.

    thanks a lot for the time you’ve spent.
    Ben.

    • http://www.snaptin.com Ian Yates
      Author

      Hi Ben – I hope to find time to demonstrate how we can implement WordPress using this as a theme. That should sort your user backend out :)

  • Benny

    I am pretty new to programming and was quite prepared to throw in the towel from frustration and information overload, (been trying to get my code to work. a classic example is the “text indent issue”)

    but Ian, you made me take a second look!

    Your relaxed way of explaining techniques and codes and the fact that you actually built a “complex site” in this tutorial has energized me.

    I add a voice here though…I am hoping for a wordpress tut on this too…. call it ” the Oliver Twist factor”

    Thanks a million!!!

  • http://paintndesign.com phil

    Thanks Nice series, can you explain how resizing images works. looking forward to the completion of series

    • http://www.snaptin.com Ian Yates
      Author

      Thanks Phil :) Flexible images is a simple enough concept and is pretty key to the whole responsive Web Design principle. By setting:

      img {
max-width: 100%;
}

      we’re saying that no image will ever be larger than its parent container. When the layout shrinks, so too do the images within it. There are lots of other aspects to consider where images and RWD are concerned, but max-width is the fundamental starting block.

  • Karam S

    @IanYates could you give us a rough estimate of when this series will be completed, and how many more posts there will be? The tutorials are great, i’m definitely learning a lot!

    • http://www.snaptin.com Ian Yates
      Author

      Thanks Karam, I’m glad you’re getting a lot out of it :)

      We’re looking at (I think) two more posts. One will be to finish off the design as we know it, talk about nesting columns in the Skeleton Boilerplate and look at flexible video embeds. The next (and final) video will look at altering the make up of Skeleton to cater for larger screen sizes (no-one can ever say I don’t listen to the audience!)

      I hope to be publishing the next one very soon, the last one coming before the end of April.

      Cheers.

  • Erick

    @IanYates or anybody that can help :)

    I am following the tutorial and I have learned ALOT, but one thing is bothering me. The slider does not display correctly. Here is a link to my test site please have a look. http://www.musicadiccion.net/

    Thanks for your time
    Erick

    • http://www.snaptin.com Ian Yates
      Author

      Hi Erick,

      This is one of those things which can drive you nuts if you don’t find what’s wrong! A simple case of a typo – the ul within the .flexslider div needs to have a class of slides, not slide. Subtle, but crucial :)

      • Erick

        hah so simple yet frustrating XD Thanks for the tut, cant wait for you to finish the series ! :D

  • Pablo

    Wow! This tutorial is just epic! Really helped me alot, and it looks great.
    One thing I can’t get managed though…
    I want to change to hover color of the navigation. I already changed the main color to blue, but when I hover, I still get a darkgrey hover color. I just can’t manage to find where to change this…

    • Pablo

      And I also want to change the body color. It is white now, but I want to make it black. It seems that because of the .band in combination with the bg_dark.png (or whatever) everything is pushed aside. Am I correct or is there a way to change the color. Neither body or html { background-color: black; } is working.

      • http://www.snaptin.com Ian Yates
        Author

        Hi Pablo – glad to hear you’re enjoying this :)

        I’m not sure what the hover issue could be on your navigation – perhaps if you post the result online somewhere I could take a look?

        As far as the background is concerned, changing the background property of body or html will have no effect whatsoever.. They’re both completely covered by the band divs, so you’ll need to alter the background of them instead. Head over to .band in your css and change the background to whatever you want. It should sort your problem out..

        Thanks :)

        • Pablo

          http://dl.dropbox.com/u/37503007/dhgamache-Skeleton-94ce270/index.html

          I hope this link works…

          You see that whenever you hover, a darkgrey background appears, I want it to be lightblue or something.
          Black main background was ugly, so I leave it white :)

          It is a shame that the last episode is coming end of april, I am making this website for a school project, which needs to be finished coming thursday. The project is making a campaign for a electric-shaver. Everything needs to be English (I’m from the Netherlands btw :) ) One of the main things that needs to be on the website was a search button, but when I try to copy evrything from the Demo website the search button isn’t clickable at all, I’m guessing its Jquery ? :(

          Thanks for your help anyway.

          • http://www.snaptin.com Ian Yates
            Author

            Hoi Pablo :)

            I see what you mean now. We didn’t actually define a specific hover state for the submenu items, we were just relying on the general hover state for all anchors in the navigation.

            Easily fixed though, all you need to do is add an additional style, at the bottom of all your navigation rules:

            nav.primary ul ul li a:hover {
	background: lightblue; /*whatever background colour you want of course*/
}

            The last tutorial you’ll really need is coming on Monday. After that, I hope to record some additional screencasts for ‘extras’. There’s no jQuery involved in the search button, you’ll see on Monday how that’s all done.

            Groetjes!

  • Pablo

    Haha you got some Dutch skills :)
    Thanks for your help. It didn’t worked out like planned. The only thing that has changed is the hover color of the sub menu, the main navigation hover stays dark-grey. But it is fine as it is now, I keep it like this. Im happy enough….

    If I can bother you with 1 more question I would be very gratefull, it has to do with a custom font.
    At the end of the layout.css is see this :

    /* #Font-Face
    ================================================== */
    /* This is the proper syntax for an @font-face file
    Just create a “fonts” folder at the root,
    copy your FontName into code below and remove
    comment brackets */

    @font-face {
    font-family: ‘mensch-wf’;
    src: url(‘../fonts/mensch-wf.eot’);
    src: url(‘../fonts/mensch-wf.eot?iefix’) format(‘eot’),
    url(‘../fonts/mensch-wf.woff’) format(‘woff’),
    url(‘../fonts/mensch-wf.ttf’) format(‘truetype’),
    url(‘../fonts/mensch-wf.svg#webfontZam02nTh’) format(‘svg’);
    font-weight: normal;
    font-style: normal; }

    As you see I already changed everything to my own font. It isn’t from google fonts but from losttype.com I made a folder called fonts (not Fonts) changed the font-family into ‘mensch’ ‘mensch-wf’ , but still when watching the site from another laptop/pc the font won’t show up. I don’t know if this is relevant to this whole tutorial, but I would be gratefull if you can tell me if it is possible to embed this font.

    THANKS!!

    • http://www.snaptin.com Ian Yates
      Author

      You wanted to change the hover state of all links within in the menu? Well then you need to alter the nav.primary ul li a:hover { rule..

      As far as your @font-face goes, as long as the paths are correct, the filenames are correct, and you’re using font-family: "mensch-wf" for elements where you want it applied, it should be fine.

      There’s no reason why looking on another computer should make any difference, even IE8 and earlier will be fine as they support the .eot format. Perhaps it’s something to do with having changed the filenames? There could be a glaring error which I’m not seeing – try using everything exactly as you get it from LostType and take it from there..

  • Marko

    Great tutorial, I just finish mine!
    Learned so much!

    THANKS Ian :)

    I got one question. Is it possible for that photos in flickr feed to be links
    to larger photos(on flickr.com)?!

    What to google, what to search?! :)

    sry for lame English!! ;)

    • http://www.snaptin.com Ian Yates
      Author

      Hey Marko, it’s not possible with this particular plugin, but there are others you could play with (perhaps this?)

  • Natasa

    Hullo Ian!
    Your tutorials are the best out there – very comprehensive, easy to follow, the latest stuff. I started from scratch and I can’t believe how far I got with your help. Thank you loads!
    Most of my content will be presented with flexislides and if you’d have any tips on how to go about adding thumbs that would be fantastic!
    Enjoy Kuala Lumpur,
    Natasa

  • Elia

    Hi,

    Fantastic series. Thank you.
    One issue I am having is that if I pull in my own images from flickr they are different sizes and throw the div boxes off. Width stays the same but height is different and can cause one column to hold 4 images and the other two. Even if they have three in each column the height differs to dramatically. How can I make the height of each come out the same despite the different sizes of the original flickr images? I tried max-height in div.flickr img of the layout.css with no effect.

    • http://www.snaptin.com Ian Yates
      Author

      Hi Elia, unfortunately the flickr plugin I used is fairly limited (simple, but limited). It literally just throws out a pile of images, with very little in the way of control. I would have thought you could specify the height of each image via css, but that would result in squashing.. Your best bet would be to try an alternative plugin – such as this one? Let me know how you get on :)

  • http://www.morganfeeney.com Morgan Feeney

    Hi Ian

    I’ve been trawling through the net looking for a solution to my conundrum, I am using the Skeleton WordPress Theme and want to utilize the pre-installed tabs but add different sliders inside two tabs. One is for gallery type purposes where I will add Fancybox or something with a modals, and the other will be as is.

    I added Flexslider (the one via WP Tuts) but found it really limited in terms of doing everything from the dashboard in WordPress, i.e. you can only add a photo to each slide and that photo fills the whole slide. DO you know of anything that is more flexible?

    Thanks for your great resources ;)

    P.S Elia, just off the top of my head – have you tried overflow hidden if the photos from flickr are inside containers, and also giving the containers the same percentage size?

    Cheers

  • Michael

    I’ve found when following along with the Flexslider video that:

    .flex-control-nav li a:active {background: #f1f1f1;}

    would not work, I had to change it to

    .flex-control-nav li .flex-active {background: #f1f1f1;}

    In order to get the active slide link to display correctly. Any idea why that might be?

    • http://www.snaptin.com Ian Yates
      Author

      I assume you meant to type a.active (not a:active) but in any case, I’ve no idea why your copy of flexslider is adding the class flex-active?! Are you sure?! If you have a demo somewhere I’ll take a look, but as long as it works that’s the main thing :)

    • http://www.snaptin.com Ian Yates
      Author

      Aha. It seems Flexslider has updated (Flexslider 2 beta), bringing with it some name changes. The active navigation buttons are now given the class flex-active.

      Thanks for bringing this to my attention :)

    • http://igerli.com Stefano

      Thanks, I had the same problem and You save me.

  • Angel

    I’m currently updating the company’s website to skeleton framework. following your navigation video it can’t seam to work in IE8. When I preview in IE the sub-menus are out of order. the site is not currently live but do you know how to fix this issue? I can send you a screen shoot to your email of what I have if need me to

    Thanks a lot for this videos

    Angel Medina

    • http://www.snaptin.com Ian Yates
      Author

      Hi Angel – feel free to post some screenshots, or send me the source files if you like (webdesign[at]tutsplus[dotcom]) and I’ll take a look.

      I’m getting some imperfections in IE8 too, but nothing’s wrong with the navigation from what I can see:

  • Rich

    …first of all great work! love the tutorial and as a novice web designer, i’ve found the tutorial easy enough to follow along so far but have yet to finish the whole thing! so i just thought i’d test the site in ie 8 as i use firefox and the first thing it asks, is about security, allowing blocked content and active x controls! would all users of ie 8 experience this message, as they could find it quite concerning? and also, the page has not rendered correctly? the layout is correct but the navigation, background colors and logo have not displayed correctly? has anyone else had this experience this issue or have i missed something to help with ie 8? any advice greatly appreciated! looking forward to finishing the tutorial!

    brilliant work by the way!

    cheers!

    rich

    • http://www.snaptin.com Ian Yates
      Author

      Hi Rich, glad you’ve enjoyed the tutorials so far :) IE8 is causing a couple of issues, but nothing major. I don’t get any warnings about dreaded ActiveX Controls, perhaps that’s a personal settings thing? I’m not sure what would trigger that; I can only think it’s the embedded Vimeo.

      You shouldn’t be getting any problems with the logo or the background colours, and the only layout issue is increased margins on the Flickr images which is forcing them into a single column (easily remedied). This is what I see:

      Any chance of a screenshot from your end?

  • Rich

    Thanks for the quick response Ian! Maybe I’ve missed some code somewhere? I’ll finish up the tutorial and get back to you to let you know how I get on? All the best!

    Cheers!

  • http://prodigalconcepts.com/ rod rodriguez

    Hello Ian,

    I’m hooked on this series, best tutorial I’ve seen in awhile. But I’m having issues with my Flickr images because they are not all square, so the thumbs don’t come out square either, what can I do to make it work.

    Thank you,

    • ianyates

      Hi Rod, sorry for the late reply :) This is an awkward one because the Flickr plugin we use simply churns out the images, there’s no way to use them (for example) as the background for a perfect square etc. My best advice would be to hit Google and find a more suitable plugin!

  • kuvirok

    Hi, Ian!
    Great series, big thanx!

  • Pingback: Building a Responsive Layout With Skeleton : Widescreen | JDesign's Blog

  • peter

    Hi, Ian! Thank you for the great tutorial. I learned so many things!

    I have one little question. When viewing the site in IE8, the flexslider is little jumpy (with one pixel) when changing images. How can this be fixed?

    • ianyates

      Hmmm, testing on browserstack I don’t see the issue you’re describing (?)

  • Sara

    Hello! Thank you so much for this great tutorial. I can’t learn enough with a teacher like you:-)

    Everything works great from the beginning to the end, but one small thing: the javascript snippets have to be placed below the external source file placed in the body of the page. In yours, you have the snippets in the “whatever.js.” I tried to separate them, so that I don’t have to write the snippets for every page-it makes sense-but, it doesn’t works. In fact, the flexslider and the dropdown menu disappear.

    What am I doing wrong?
    Thank you for whatever help:-)

    • ianyates

      It’s difficult to say without seeing your project.. Are you sure the file is being successfully pulled into the page? If so, perhaps you have a syntax error within the file itself? Use Firebug or Chrome Developer tools to debug what’s going on :)

      • Sara

        Ian,

        sincere thanks for your reply. I know I’m a total newbie here, but this is the code errors I get when I try to debug the page.

        Uncaught ReferenceError: jQuery is not defined jquery.flexslider.js:581

        Uncaught ReferenceError: $ is not defined whatever.js:3

        I separated the snippets from the source files that go at the end of the page and placed them in “whatever.js,” but, as I said before, everything disappears-the flexslider and the dropdown menu for the mobile version. I read posts on this topic in StackOverflow, but it doesn’t help:-( It’s like reading Japanese when you barely know English:-)) Any suggestion?

        Ciao and grazie,

        Sara

        • ianyates

          It sounds to me like you’ve forgotten to include jQuery before all your other js bits and pieces. In this tutorial we use
          to pull jQuery in – download the source and take a look. Hope that solves it!

          • Sara

            Hello Ian,
            yes, I did miss the jQuery, but now everything works only in Dreamweaver, when I open the file in the browser the slider and the dropdown menu are not there. What am I still missing? We’re getting there:-) Now, at least, it works in DW:-)

            Grazie.

          • Sara

            Gosh! I found the problem: I had left the hook up for the tweet and flickr in the “whatever.js” and since I don’t need them, they were interfering with all the rest.

            Many, many thanks. If this site sees the light, I’ll post the link to show you how I used your teaching:-)

            Grazie again.

          • ianyates

            Well done! Top debugging..

          • ianyates

            Oooh… Dreamweaver has a nasty habit of adding its own markup, perhaps something has been added which is tripping things over (?) If you send your source code over (webdesign[at]tutsplus[dot]com) I’ll take a look – it’s difficult to fix from afar……

          • Sara

            Ian,
            you’re really cool! but I solved the problem. You can see in the post below. I had other stuff in the .js file that I didn’t need and interfered with the rest. I’d be happy to show what I’ve done with your teaching when I’m done:-)

            Ciao.

  • Szyam

    Have re-watched these several time, super helpful! I noticed you set a

    min-width: x%; ( and ) max-width: x%;

    on some of the images, like the flickr ones for example. Wouldn’t the same effect be achieved by just using

    width: x%;

    or am I over looking something?
    Thanks again!

    • ianyates

      Not really – you’d then be setting an absolute fixed width, whereas using min-width and max-width allows images to fluidly grow and shrink within those boundaries. Hope that helps!

  • ianyates

    Hi Mike, this is a specificity thing. Earlier in the layout.css file we’d set:

    div.last-credit {
    text-align: right;
    }

    in order to send the last credit over to the right of the screen. When we centered the footer with:

    .bottom footer {
    text-align: center;
    }

    it actually wasn’t specific enough to override the text-align: right. In actual fact, what you’ve done is a perfectly decent way of setting the .last-credit text centered when needed :)

  • steve

    Great tutorial, but i could not get the twitter feed to work.
    help.

  • http://sparrowinspace.com/ Nick Rutten

    The class of .flex-control-nav li a.active has been changed to .flex-control-nav li a.flex-active in the latest version of Flexslider.

    Great tutorial!

  • Jonathan Beech

    Hi Ian, excellent tutorials. Well done! About thirty seconds in to the flexslider video, you seem to use a chrome extension that shows the window and viewport size. Whats that called so I could install it? There seems to be lots to choose from on the Google extensions site but I guess you’ve decided on that one for sound reasons.

  • Pingback: 20 Web Design Tutorial Roundup. | SplendidHub

  • Pingback: 60+ Responsive Web Design Tutorial Roundup – Spoil Your Mobile visitors! | Good Favorites

  • Joe

    Since I moved the responsive navigation js code into a new .js file It will not work at all! I’ve checked and double checked the references and everything and still nothing but when I copy and paste it back to the HTML file everything works again!

    • Joe

      nevermind!

      • ianyates

        OK :)

  • bromsulaiman

    Hi Ian,

    Seriously good tutorials! Much appreciated.

    Anyway, I may be a bit late on this one, but just in case you’re still there! I’m designing a site for a client at the moment, and am using Flexslider 2 for a rotating list of testimonials. Works fine in a full screen browser, but as I resize the browser, the content get knocked out of alignment. It looks like some sort of width issue, but I can’t figure out exactly what’s going on! Here’s the dev of the site: http://pixelbulb.com/pjt/

    • ianyates

      Glad you enjoyed the series :) As for your demo (nice work, by the way) I’ve played with it for a few minutes and can’t immediately see what the issue might be.. It’s going to take a bit more debugging I’m afraid. I’d start by removing chunks of your CSS and seeing how the slider is affected, perhaps some rogue styling is upsetting things. Sorry I can’t be more help at this point!

      • http://www.pixelbulb.com/ Brom Sulaiman

        Thanks Ian. I’ll have a CSS debug day! Love the Skeleton framework by the way. Found your post while searching for a responsive framework to add to my arsenal. I’m assuming that WordPress theme integration is pretty easy too. I didn’t see anything in there that would cause any headaches!

  • http://www.clippingpathindia.com/image-masking.html Image Masking

    Thank you so much for this plugin ….

  • Elena Donchenko

    Thank you!!! You saved my day with the Flexslider tutorial. :)