• Registered: 2012-12-04
  • Posts: 6

Topic: Splash image is not displaying correctly

The splash image for all my galleries is not displaying correctly when the site auto displays for small screens.
It seems to have the image way off to the left -only sometimes is even a small portion of the image visible at all.  How do I fix this?

See examples at any of the posts listed here:

http://downtowngroup.com/test/wordpress/residential/

Thanks for your help!

  • Registered: 2012-04-24
  • Posts: 5,906

Re: Splash image is not displaying correctly

There may be a conflict between the CSS of your current WordPress theme and the CSS of the Juicebox-Pro gallery itself.
If there are any generalized CSS rules within the theme which apply, for example, to all divs or all images on the web page, then they will also apply to all divs or all images within the Juicebox-Pro gallery on the web page.
If possible, ensure that CSS rules are applied to only those elements on your web page that require them through use of classes and ids.

Try temporarily reverting to the default WordPress theme to see if this makes a difference.

If there is a CSS conflict, one way to isolate a Juicebox gallery from the rest of your web page is to embed the gallery in an iframe, documented as Option #2 here.

3 Reply by pholtzman (edited by pholtzman 2012-12-07 19:16:52)

  • Registered: 2012-12-04
  • Posts: 6

Re: Splash image is not displaying correctly

There does seem to be a css conflict.  My site is Headway based, so an iframe is not the best solution for me.  I am not very experienced, but very willing to muck about editing the css for this - are there any things you could tell me to look for that might be causing this?

edit: I played a bit with firebug to see what I could find.  This seems to be at least part of the problem:

<td class="jb-splash-holder">
<img src="http://downtowngroup.com/test/wordpress/wp-content/uploads/2012/11/DSCN2395.jpg" style="position: absolute; left: -368px; top: -500px; width: auto; height: auto;">                     

these large negative postions - "left:-368px and top:-500px (which are relative to the window size) are putting the splash  out of view. 

This seems to be related to Headway's Responsive Grid, upon which my site is heavily dependent.

Any thoughts as to what css I need to edit to fix this? Can I disable the responsive grid for the content block on this page?

Thanks!

  • Registered: 2012-04-24
  • Posts: 5,906

Re: Splash image is not displaying correctly

Can I disable the responsive grid for the content block on this page?

It is unlikely that a WordPress theme would have a setting to selectively ignore a specific element on a web page.

are there any things you could tell me to look for that might be causing this?

Try looking for (and temporarily removing) generalized CSS rules which apply to entire tags such as 'div' or img' rather than specific instances of containers which already use classes or ids. There seems to be a lot of generalized CSS rules at the top of the following file: http://downtowngroup.com/test/wordpress … ;ver=3.4.2

5 Reply by pholtzman (edited by pholtzman 2013-01-08 01:54:42)

  • Registered: 2012-12-04
  • Posts: 6

Re: Splash image is not displaying correctly

I've been tinkering with this and narrowed it down to this peice of the generated HTML:

<td class="jb-splash-holder">
<img style="position: absolute; left: -265px; top: 0px; width: auto; height: 600px;" src="http://downtowngroup.com/web/wp-content/uploads/2012/11/Living-Room-I3.jpg">

If I could specify that the image postion is left: 0px, this will give me a roughly acceptible (but not ideal) result.  I've poked about with the theme.css file in jbcore, but to no success.  Any pointers?

Thanks!

  • Registered: 2012-04-24
  • Posts: 5,906

Re: Splash image is not displaying correctly

You could perhaps try adding CSS such as the following to the end of the 'jbcore/classic/theme.css' file (though please note that this is untested and I do not know if it will work or will have any unwanted knock-on effects).

.jb-splash-holder img {
    left: 0px !important;
    top: 0px !important;
}
  • Registered: 2012-12-04
  • Posts: 6

Re: Splash image is not displaying correctly

Success! 

Thanks so much, Steven!

Peter