1 Topic by KoshaK (edited by KoshaK 2016-01-30 22:46:27)

  • Registered: 2016-01-30
  • Posts: 2

Topic: first page of the gallery shirked in mobile view

Hi,

have a new version 1.4.4
it's all works fine, but only in mobile view.
when I navigate to the page with the gallery it's appears shrink-ed on the screenshot bellow. both on iOS Safari and Android Chrome.
http://www.fantasticvilla.com/2016-01-30_22.23.45.png

if I click the shrink-ed image, then the Gallery opens fine.

link to the gallery page: http://www.fantasticvilla.com/Gallery.html

any ideas why?

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

Re: first page of the gallery shirked in mobile view

It looks like the problem is that your gallery is inheriting some CSS from your 'style.min.css' file, specifically the 'max-width' entry in the code below (about half way down your 'style.min.css' page).

.bd-tagstyles:not(.bd-custom-image):not(.shape-only) img{max-width:100%;vertical-align:middle;display:inline-block;text-align:center}

This CSS is affecting the Splash Page image. It is not possible to isolate a Juicebox gallery (or any other HTML element) from global CSS and the gallery has no option but to inherit such rules.
I do not know how important this CSS rule is to other images on your page so I do not know if you could safely remove it.
Perhaps the best course of action would be to apply your custom CSS rules to only those elements on your web page which require them through use of further CSS selectors (classes and ids).

  • Registered: 2016-01-30
  • Posts: 2

Re: first page of the gallery shirked in mobile view

ah, I see....
Ok... maybe, I can add custom Class to the Splash element and add the same in your CSS ? can you, please,  advice what I'm looking for? or, maybe add !important in to your CSS ?

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

Re: first page of the gallery shirked in mobile view

Try adding the following CSS to your web page (or at the bottom of your gallery's 'jbcore/classic/theme.css' file):

.jb-splash-holder img {
    max-width: 40px !important;
}

This should hopefully prevent your custom CSS rule from affecting the Splash Page image in your gallery.