Solved

Image fails to center when screen is very narrow

Posted on 2014-09-12
7
122 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

813 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

17 Experts available now in Live!

Get 1:1 Help Now