cant resize images

This site is best viewed in a modern browser with JavaScript enabled.

jagguy

Hi,

When I resize my webpage, the row of 4 images in the heading dont resize and they go on another line.
I just want the images to reduce in size as the browser reduces.

http://www.mymrt.net/ComputerTraining/comptest.html

MrPaulius

I think one option would to set min width of body or wrapping div.

tracknut

Another option would be to set a width on the images, like: width:10% or whatever works, so that they scale down as the browser does. Right now you have no width stated, and they are just the width of the actual image file.

Dave

auntnini

See "responsive" designs (that resize) at
http://www.auntnini.com
http://www.josephdenaro.com
http://www.lapearldesigns.com

These use "contextual" image CSS of a certain percent and hmin-width and max-width

jlynn

i am having the same issue and its more complicated then it seems..

jagguy

I solved it and a post above has the right idea.
img, embed, object, video {

max-width: 100%;

}

/*********************************************************************************
MEDIA QUERIES
**********************************************************************************/

@media screen and (min-width: 981px)
{
#heading{
height:240px;
/ width:980px;/
background-size:100% 100%;
background-image:url(images/head7.png);
background-repeat:no-repeat;
}