CSS Error

[jcvenom]

I'm doing work for a client and for some reason my css looks weird. When minimized by pressing CTRL + (-) it decreases in the top left corner of the page, rather than decreasing in the center unfortunately I can't show the code nor the url due to people copying my work, I can only show the url to some people I trust here anyways here's a screenshot of the issue and fix or suggestions would be grateful thanks :) [ATTACH=CONFIG]1771[/ATTACH][ATTACH=CONFIG]1772[/ATTACH]

[Coly010]

Without seeing the code I can only speculate. For one, your background image appears to one, be fixed and two, be using the background-size: cover; so that will create an illusion of just the elements shrinking in size.

Another thing, and again i can only speculate without seeing the code, i would assume that you have a wrapper div which when you use CTRL + (-) is decreasing in size, therefore your image is actually still technically in the centre of the parent div.

My suggestion is to give your image the following css :

 

.img {
  position: absolute; (or fixed)
  margin: 0 auto;
  top: calc( 50% - *half_img_height*);
}

 

*half_img_height* - replace this with half of your image height.

IF your images are added dynamically, part of an image gallery and it isnt practical to set half the height of each image then jquery will sort this out. You just need to add an onclick event to your galleries navigation arrows:

 

function onGalleryNavClick(){
  var t = $(document).height() - $("gallery img").height() / 2;
  $("#gallery img").css({top: t});
}

 

not overly confident on that piece of jquery, but im pretty sure you can understand what I'm getting at.

[jcvenom]

I've sent you a PM of the url

[Coly010]

I've sent you a PM of the url

ok I'll take a look and see what I can do, gotta love chrome dev tools though :D

[Coly010]

[MENTION=69823]jcvenom[/MENTION]

clear your inbox, you've run out of space so i cant pm you the css that should most likely work...

[jcvenom]

[MENTION=69823]jcvenom[/MENTION]

clear your inbox, you've run out of space so i cant pm you the css that should most likely work...

I appreciate the help and i've cleared my inbox