Image jumps out of div when browser is resized

Question

I have an image that jumps down and out of its div when I narrow my browser. I've tried all kinds of things to prevent this from happening and haven't been able to turn the right key (I'm not taking to responsive web coding very naturally. I might have hit my limit here....).

Any suggestions are welcome.

It's the contents of the <div id="fadeshow"></div> that jump downward upon narrowing the browser.

Here's the site: http://giveitform.com/ - taken from question to avoid being closed for being about one particular site. — closetnoc, Mar 29 '15 at 22:08
I like your website!! I would advise munging your mailto link. I have a munge tool you can use. You can get to my site via my profile and look for mungeMaster. It is free and totally anonymous. I hesitate linking to it here, but I assure you it will help stop your e-mail address from being picked up from harvesters. Just please forgive my ugly site. It will improve soon. — closetnoc, Mar 29 '15 at 22:26
Oh! I didn't realize that a question couldn't be about a particular site! I didn't see that in the rules I read, and I've seen other questions that were answered by people asking for a link or some code, so they could see the problem. I guess I should delete the second-to-last paragraph, too, since the div code isn't something that anyone will be able to find out of context. Will look into your email munging suggestion...thanks! — Lisa Perkins, Mar 30 '15 at 00:01
You can leave it since I added your domain name in the comment. Generally, how this works is the question should not be about a particular site. Sometimes this is ignored by the moderator for a period and sometimes we just plain ask for it and it appears in a comment or in the question. So it can be really confusing for people. I just wanted to help you avoid being put on hold. I do not have a cell phone or tablet so realistically, I cannot see what you see. If you can add a snap-shot that would help. I am only just starting on the whole mobile thing so I am not sure I can give a good answer. — closetnoc, Mar 30 '15 at 00:17

score 0 · Answer 1 · answered Mar 30 '15 at 00:26

0

At first glance I'm thinking it has something to do with the min-width setting in the #fadeshow div. If you notice the min-width is set to 580px which is about where the image jumps when downsizing the browser. Is there a particular reason for the min-width setting and can it be removed?

#fadeshow {
    max-width: 800px;
    margin: 0 auto;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    min-width: 580px;
}

answered Mar 30 '15 at 00:26

Todd Day

53
1
11

Thank you, Todd. I just removed that min-width setting, and the image still jumps. – Lisa Perkins Mar 30 '15 at 00:35
I'm wondering if this has anything to do with relative or absolute positioning (a concept that I've always had trouble grasping...)? – Lisa Perkins Mar 30 '15 at 00:35
@LisaPerkins did you try my suggestion above? – Steve Mar 30 '15 at 01:28
Thank you, Steve! Your suggestion was on target. What I did was to remove the .inner from the .outer .inner class, and that did the trick! – Lisa Perkins Mar 30 '15 at 12:04
Glad to see you got the solution!! The incredible people who use Stack Overflow have helped me time and time again as I grow as a web developer. Good luck as you carry on! – Todd Day Mar 30 '15 at 17:00

score 0 · Answer 2 · answered Mar 30 '15 at 00:29

The problem is that the 'outer' div in which the image is contained does not have a CSS min-width.

So when the screen size is reduced so that the screen width is less than the width of the image (580px), the outer div keeps shrinking and the image pops out.

If you add min-width: 590px; to the .outer style you should find that the problem is fixed.

I tested it in developer tools and it was fine.

score 0 · Answer 3 · answered Mar 30 '15 at 06:05

the problem is with this line

<div class="emptyDiv verticalCenter"></div>

i dont know why u have included this but surely its the reason your image jumps downward upon narrowing the browser.

and foraligning your image in the center u can change the

.outer .inner {
   padding: 10px;
}

to

.outer .inner {
  padding: 45px; //or whatever suits your design
}

Image jumps out of div when browser is resized

3 Answers3

Linked