Image Float, Shrinking Images

User 10077 Photo


Senior Advisor
1,024 posts

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?
How-To Instructions for Coffeecup Users (tutorials, examples, and downloads)
http://usconsumernet.net/help-for-coffe … -users.php

Personal & Specialized Help for Coffeecup Users
Email me at cchelp@uscni.org or call 865-687-7698
User 103173 Photo


VP of Software Development
0 posts

Can you zip up your rlmp file and attach it here? Also, a URL to the page would be helpful.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 10077 Photo


Senior Advisor
1,024 posts

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
Attachments:
How-To Instructions for Coffeecup Users (tutorials, examples, and downloads)
http://usconsumernet.net/help-for-coffe … -users.php

Personal & Specialized Help for Coffeecup Users
Email me at cchelp@uscni.org or call 865-687-7698
User 2484360 Photo


Registered User
3,293 posts

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.


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. :)

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.


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.
User 10077 Photo


Senior Advisor
1,024 posts

Thanks!
How-To Instructions for Coffeecup Users (tutorials, examples, and downloads)
http://usconsumernet.net/help-for-coffe … -users.php

Personal & Specialized Help for Coffeecup Users
Email me at cchelp@uscni.org or call 865-687-7698
User 2484360 Photo


Registered User
3,293 posts

Brian Durfee wrote:
Thanks!


:P
User 1948548 Photo


Registered User
26 posts

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!
User 187934 Photo


Senior Advisor
18,544 posts

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.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 271657 Photo


Senior Advisor
3,816 posts

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.
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 1948548 Photo


Registered User
26 posts

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.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.