responsive images

This might be of use.
http://css-tricks.com/which-responsive-images-solution-should-you-use/

Alternatively, I'd ask for a link to the site and the specific images.

If you don't feel like sharing the site, share an example via codepen or something.

I find it sometimes hard to give arbitrary advice on a specific requirement.

So what you want is the 4 #buttons to display horizontally on a phone, rather than vertically?

At the moment it's like this: (img will expire in 3 days Edit: or sooner, apparently :P)



So you want them to all be inline?

Like this:



Excuse the rest of the content in the image above. As you can see in the above image it displays differently on a phone, I'm using it purely for illustration.

off.the.walls wrote: »

exactly!! and the rest of the content to squeeze down with it.

how did you get it to display like that?

#buttons img {
max-width: 69px; *
padding-left: 6px; **
}

#buttons {
position: relative;
padding: 30px 0px 25px 0px;
max-width: 100%;
}


It's not a proper solution though as the images aren't responsive, I just made them smaller to fit in the container, so to emulate that and also make them responsive, make the changes below, and tweak it to suit your needs.

* So change that to max-width: 22%;
** And that to 1%; (or 2%, can't remember now)

Remember, em's and %'s are your friend. Not px's

Combining Whartman's Base framework with the Responsive Slide .js should give you the result you're looking for.

http://matthewhartman.github.com/base/

http://responsive-slides.viljamis.com/