Image issues with responsive layout

Hi,

Site is: www.internet4success.co.nz

The issue is:
When the site width is reduced to invoke responsive layout some images are scaled down while others are enlarged.

If you look at the home page of the above site, the Header image in the template reduces well below display width.

Some images in articles are enlarged - refer image in blog titled "plain english"

Whilesome images in modules are also enlarged see image in Newsletter subscription. While those in contact me on" module are scaled correctly. see attached image.

The enlargement of some images is the main issue.

Thanks

This html you put:

<table style="width: 705px; height: 314px;">
...

is nightmare for responsive layout. Use UL instead of TABLE.

<ul class="banner-table">
<li>
...
</li>
...
</ul>

then in template_css.css add:

UL.banner-table{
width:100%;
display:block;
}

UL.banner-table > LI{
float:left;
display:block;
}

UL.banner-table > LI{
width: 99%;
}


@media screen and (min-width: 768px){
UL.banner-table > LI{
width: 49%;
}
}

@media screen and (max-width: 1024px){
UL.banner-table > LI{
width: 33%;
}
}

Hi,

Thanks for that - however thats not causing the issue.

I removed the table and the other images which I was referring to didn't change.

The header/logo image reduces to a very small size.

and the icon images in modules increase in size when width hits 450px - refer screen shot in previous post.

Thanks

On images you want to limit in size, like one you have for 'Plain English' , you can set max-width property :

<img style="float: right;max-width:200px;" src="/images/winny.gif" alt="winny">

Thanks - that works well.