responsive images

off.the.walls

Hi guys, am trying to make my images shrink scale themselves down so the website displays correctly, am using a flexi box webkit for the main website and was wondering how do i get the images to scale? is it css or should i be looking at some jquery?

KonFusion

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.

off.the.walls

i'm recoding my own site into a html5 site www.wmdmedia.ie when the sites viewed on a phone the images go 2 up 2 down on a phone

want to get it so as they display straight across

KonFusion

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

KonFusion wrote: »

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)



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.

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

how did you get it to display like that?

KonFusion

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

_ciaran_

If your redesigning you should check out http://www.responsivegridsystem.com/

I find it to be a very straightforward way of making things responsive.

ivanc

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/