Image fails to center when screen is very narrow

Posted on 2014-09-12
Medium Priority
Last Modified: 2014-09-17
This is the page I am testing:

I have CSS media queries setup for anything under 700px wide. My problem happens at narrower than that, though. See attached screenshot, the image is not centered properly (the divider line between the two halves of the image should be in the middle).

Here is the HTML:
<div id="homebg">
	<img src="img/ph_home1.jpg" alt="We Provide Direction: We chart a financial course that reflects your family, career, 401(K) plans, charitable aspirations and much more." />
	[two more images]

Open in new window

Here is the CSS for under 700px wide:
div#homebg img{position:absolute;top:0;left:-100%;width:auto;height:100%;min-width:initial;min-height:initial;}

Open in new window

Have I reached a limit in my browser? Or is there some way to fix this in my code?

Question by:bbdesign
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
LVL 34

Expert Comment

ID: 40320911
greetings bbdesign, I looked at the .jpg  image you have as  1.jpg  and also the TWO lines of CSS for the Div id of  "homebg", , and I may not be able to understand your Browser display output, or help much with this. But I do have questions about your display problems you have below the "700px wide".
In Your Image 1.jpg , there are Display adaption changes with the different widths you have in the 4 displays there.
There is a top navigation bar that is "white" with a "Herbein Mangement" label, and the smaller ones, collapse the bar choices to a single touch MENU , this shows me that there is more complex width "Responsive" engine for your display.

As to your - Div id of  "homebg" - problem, you have CSS That I simply do not understand, as -
    { top:0; left:50%; width:100%; }

It changes the Left-positioning to the 50% spot, of the container's width, and then trys to use a width of 100%, Shouldn't the width be 50% or less if the left position is 50% ? ?  BUT in all of the 4 images the background image (images) is ALWAYS showing at the far left (css left:0;) of the display, so I wonder why it sets
     { left:50%; width:100%; }
and in the css for images it has -
     { position:absolute;  top:0;  left:-100%; }
it uses a LEFT positioning as left:-100%;  a NEGATIVE number, is a negative used here to compensate for the {left:50%;} used in the DIV ? ?

there is also the image css of {min-width:initial;}
which may or may not be part of your problem, as I have used the css keyword "initial", I take it to mean that your image width will NEVER go below the first width specified in the CSS or the image's actual width. This seems to be contrary to any Resonsive design, as you need the image to go as small as needed.

But My Main Concern here is that this is a "Layered" display with the <div id="homebg"> has a  {z-index:0;} and the DIV that displays the "We See Potential" has a higher z-index.
For Me, the layered display is a bit more difficult to have a correct "Responsive" output than a non-layered display.
Maybe you can give more info about the relationships of the layers, and at least some info about the css logic for the images -
    div#homebg img{position:absolute;top:0;left:-100%; ...
css settings for 700px?

Also in using Images, and wanting to have the Images centered, you need to have either the width OR height be responsive but the way you seem to do it it adjust the height, and then the image is TOO WIDE and not centered.
LVL 53

Expert Comment

ID: 40320939
The confused results you are getting are because the browser is confused by the incomprehensible CSS.

The validator reports 17 errors in main.css which may be contributing.  I cannot understand why you are use an adaptive unit like percentage instead of responsive units vh and vw for widths and positioning.  Percentages always distort at some point when they are used for positioning and trying to maintain relationships.  I would suggest you cleanup the CSS first, and then we will have a better idea of what is warping the relationships.


Author Comment

ID: 40321200
I haven't used VH and VW because of the bad browser support (so far). I will look into the CSS problems. I am using a percentage, but I am only using 50%, no oddball percentages like 23.194837384, so I thought that would be safe enough. As I said, it works perfectly up until the browser reaches a certain (narrow) size.

I will check into the other suggestions as well. Thanks for looking!

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

LVL 34

Expert Comment

ID: 40321321
Now that you mention it, It does keep the image centered, in some of the widths, But it does not seem to be consistent for that all the time, I feel that there are more than one CSS change (alteration as changing) for height, width and left placement, that some how conflict with other changes at certain points of variance, and I see the image center move right-wards. If I were debugging this CSS, I would remove a CSS change factor (width or height, or left-placement) and see what it effects. If it was me, I believe for widths below 700px, I would NOT change the left-positioning, but place it a left zero, and adjust the height AND width to 100% , although there would be rendering image stretch distortion , It may be a better view, than the reduced display (crop) that now is suppose to happen.
Also I would think that a much larger image in height, would allow just width size adjustment (100%) and have it cover the area even though it was in mobile portrait view.

Author Comment

ID: 40321655
To better illustrate what is going on here, I setup a test page and removed all the external file references. Here is the URL and the complete HTML with inline CSS:


<!DOCTYPE html>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<body style="margin:0;padding:0;">

<div style="position:fixed;top:-50%;left:-50%;width:200%;height:200%;">
	<img style="position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;min-width:50%;min-height:50%;" src="img/ph_home1.jpg" />


Open in new window

This technique (which I originally got from http://css-tricks.com) works until the browser window gets to a certain (small) size. Then the image stops reducing, I guess this is related to the min-width and min-height. However, those settings are what makes this work at the larger screen sizes.

I would love if I could get this technique to also work on small devices, as I am trying to make this responsive.

LVL 34

Accepted Solution

Slick812 earned 2000 total points
ID: 40323533
OK, , I worked on this some yesterday and today, however, this uses "Tricks" and CSS settings that I was not familiar with. I had not worked with a CSS setting of "fixed" and have the inner elements as "position:absolute;", this uses a "trick" to have the container <div> and the inner image be somewhat responsive, by having a "complex" dependency for browser display "width" and "height" and then moving the image placement farther to the left, as the height seems to be set at around 100% , , and the width is larger than the display width, , to center the image.

As your problem is for smaller display widths, I could not figure out the CSS tricks for the use of several settings like -
    "min-width:initial;  min-height:initial;"

however, my problem was have any consistency in various css settings for smaller display, as there are "Overlaps" for widths-heights in landscape and portrait modes of mobil devices, which I do not see a way to have an easy fix and keep the "concept" of the changing size image, that is always centered in landscape or portrait mode.

I just do not have the time to to keep experimenting with this concept, I do not feel that this technique from css-tricks was developed for mobil devices, but I could be wrong.

I looked at the browser display for your last CSS where you change the div css to -
     top:-50%; left:-50%; width:200%; height:200%;

I did not see this as being a very effective set up to get what you want for smaller widths.

you may be able to incorporate the CSS device selectors like -
      @media  (max-device-width: 700px) and (orientation: landscape) { img{left:0; top0; width:100%; height:100%; } }

which, may set the Image to the top left of display, and have the width and height as 100% . which seems acceptable in wider displays.

but as I said, doing a workable setting for portrait mode, will take some time and considerations on what you may have to compromise on the image (stretch or crop) to get a workable display.

as I said before the css tricks (left:-100%;) to get the left to change with the changing image size, is a bit more than I can figure to work all the time every time (landscape AND portrait), but I do not have so much time.

Author Comment

ID: 40328528
Thanks for looking, guys. I agree that the technique does not seem to be applicable to mobile devices.

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month7 days, 23 hours left to enroll

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question