Here's a curious thing I've noticed in several projects, but I'll use my latest one as an example. All the settings below are in RLMP so when I describe what is happening below, I'm looking at everything in RLMP, not a browser.

Page Max Width: 960px
Top row has two columns: (1) Logo, 3 spans AND (2) Ad, 9 spans.
In the ad column, I have a 468x60 banner.
The banner (image link) has max-width:468; min-width: 350.

Here's the problem.
I want the banner to stay in the top right corner. When I click Float:right on the banner image, the banner shrinks to the min-width automatically. There's nothing that should make it shrink. Neither setting the column min-height bigger or smaller nor changing the column spans larger or smaller affects it.

I also set the banner for width:auto because I want it to be able to shrink depending on the device viewing it. If I make the banner width 100%, it pops right back to full-size (obviously). However, I want the image to adjust itself smaller if it is viewed on a tablet or phone.

So why does floating the image right or left make it shrink to the min-width and is there a fix for it?

Can you zip up your rlmp file and attach it here? Also, a URL to the page would be helpful.

The file is attached. There are two images that are doing it. Both are on DCF - Home.

In the blue section at the top: Large Banner 468x60
In the orange section near the bottom: Small Banner 180x150

This is because the width of the image is being set to Auto when float right is applied. Uncheck the Auto checkbox and all should be well. I will check into this to see if it is something that needs to be corrected.



As to this, the image will shrink no matter if you have auto off. If you turn it on it will shrink to the min-width that you have applied. For this again you would simply need to turn auto width off.

Thanks!

I am also having problems with size of image when viewing on smaller screen.

see kskleinman.com/slc

the main index page pic becomes tiny and floats left in the smaller screen. does't look good. You may notice that the other pages become kaflooey as well at the phone size screen.

all help welcome!

Take a look at your image properties at the lower break points. You need to set the min-width to a higher value so it won't ever shrink below the size that you want.

Why the negative left margins?:

img.image-4-3.image-index {
float: none;
clear: none;
margin: 432px 0 0 -25%; <<< ?
}
Go through your breakpoints and see what happens when you remove the paddings and margins. Try changing your margins to 15px (top-bottom) auto (right-left). Also check your settings on whatever container/row the image is in.

thanks everyone! changing the minimum size helps. I'm also working on using margins less, since they are funky when you start working on the smaller screen layouts.