Solved

Image fails to center when screen is very narrow

Posted on 2014-09-12
7
120 Views
Last Modified: 2014-09-17
This is the page I am testing:
http://secure.bbdesign.com/herbeinwealth/

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]
</div>

Open in new window


Here is the CSS for under 700px wide:
div#homebg{position:fixed;top:0;left:50%;width:100%;height:100%;}
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?

Thanks!
1.jpg
0
Comment
Question by:bbdesign
  • 3
  • 3
7 Comments
 
LVL 33

Expert Comment

by:Slick812
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.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
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.

Cd&
0
 

Author Comment

by:bbdesign
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!
0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 33

Expert Comment

by:Slick812
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.
0
 

Author Comment

by:bbdesign
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:

http://secure.bbdesign.com/herbeinwealth/test.htm

<!DOCTYPE html>

<html>
<head>
<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">
</head>
<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" />
</div>

</body>
</html>

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.

Thanks!
0
 
LVL 33

Accepted Solution

by:
Slick812 earned 500 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.
0
 

Author Comment

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

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

757 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now