• Registered: 2013-05-07
  • Posts: 6

Topic: Gallery Cut Off

I'm having problems with the gallery I have on my page.
http://www.gofree.com/123-LAC/CollegeGr … gRyenL.php

It is in a responsive site and as you notice, the gallery seems to want to horizontally center itself to the page, no matter whether you make the browser larger or smaller (and it is getting cut off). Is there a way to get the gallery to properly resize and fit in the correct spot (centered within the div)?

Thanks!

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

Re: Gallery Cut Off

Try fixing the HTML errors on your page. (At present, your page looks to be a collection of many different pages as it has several opening <html> and <body> tags.)
Once your page's code validates correctly, your page should be rendered with greater predictability and consistency across different browsers.
You can check your page's HTML code with the W3C Markup Validation Service.
You can also check your page's CSS code with the W3C CSS Validation Service.

Also, as your gallery uses a percentage width, try using inline CSS to define your the width of your gallery's parent container, similar to the percentage height example given here.

  • Registered: 2013-05-07
  • Posts: 6

Re: Gallery Cut Off

Hi Steven,

Thanks for the quick reply. I tried removing all of the excessive <html> and <body> tags (I was using php includes) and I inserted a div with a defined width % but the gallery still seems to get cut off.

I went through the W3C markup validations and CSS one too but couldn't find what is causing the gallery to shift over...

Is there anything else you can think of? I tried aligning everything left in Juicebox and uploading it but everything was still cut off...

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

Re: Gallery Cut Off

Your page still contains a lot of errors which should really be fixed.
Until the code on your page validates, I cannot be sure that the errors on your page are not contributing to the problem.

Have you tried my suggestion of using inline CSS to define your the width of your gallery's parent container?
When increasing the width of the browser window (from a very narrow width), the problem seems to occur when the browser window becomes wide enough to accommodate the second column of your web page, at which point the width of the first column (containing the gallery) is dynamically reduced rather than increasing in proportion with the width of the browser window. Juicebox may not be aware of this reduction in its parent container's width and using inline CSS (as I suggested in my last post) may help.

  • Registered: 2013-05-07
  • Posts: 6

Re: Gallery Cut Off

Hi Steven,

Thanks for the suggestion. Yes, I have placed the gallery in a parent container. But it doesn't seem to work. The gallery always gets cut in the middle (only half of the picture shows) even if I define a parent div width, only half of the image would show up. The gallery seems to ignore the width of the div since I noticed that it always wants to center align with the width of the page (ignoring all of the divs it is in).

I went through the errors that the site lists (all of them) but I don't believe they are contributing to the problem since all of them are "obsolete" tags for example <center> and border tags.... I also placed the gallery on a similar page http://www.gofree.com/123-LAC/CollegeGr … RyenL.html and it seems to fit... does it have something to do with me switching from .html to .php? This is the newer page: http://www.gofree.com/123-LAC/CollegeGr … gRyenL.php I didn't change any of the coding between those two pages other than changing the page from .html to .php and adding some "php includes."...

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

Re: Gallery Cut Off

does it have something to do with me switching from .html to .php?

No. There may be a difference between the code on your HTML page and your PHP page but just changing the file extension from .html to .php will not, by itself, make any difference at all.
Perhaps there is something within your PHP includes that is making the difference.

  • Registered: 2013-05-07
  • Posts: 6

Re: Gallery Cut Off

Thank you Steven for all of your help! After a few hours of closely looking through all of the code, I remembered that I had created a div for a background with a width of 100% to go across the entire page (not just the columns). I think that the Juicebox was taking that width instead of the column that it was in.

I also had to play around with the juicebox container's width... and it somehow worked!

Thanks again for your patience!