Image shifted left in some browsers

HTML & CSS
, ,
1

1044×510 59.9 KB
Can anyone help please?
My website http://www.feng-shui-school.com/index.html has a carousel containing between 2 – 4 images and works fine on most browsers. However, on IE11 through win7 and on several macs and a PC, the main headline image seems to have shifted to the left? I can’t seem to find out why and hoping someone could help please?
Many thanks
Alan

2

Hi Alan, do you have got some specifics regarding the shifting? Like for instance, what resolution do they have?

Just peeking at the code, I can tell you this:
It makes a fixed width for the slide.
The position of the slides are set to be absolute.
The “left” position is set to 0.

This are not bad things, but it may explain why it shows it that way. Are you using a specific slider or did you made it yourself?

What I think is, if the user screen is higher than the width of the slider, it will be shown to the left, not centered.

3

You could just center it like the other elements on the page:

.viewer {
    width: 1000px;
    margin: 0 auto;
}

Setting fixed widths these days is not very popular, though. There are some good image gallery scripts that incorporate responsiveness.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.