Any ideas why this code won't work? body > *

I am using jqtouch to make a mobile website. I am also implementing a gallery image slider within the website, however when the gallery is put where I need it (inbetween <div id="project_name" class="page"></div>, the images won't display.

After tinkering for hours, removing display: none; from jqtouch.css rule:

body > * {
    -webkit-backface-visibility: hidden;
    -webkit-box-sizing: border-box;
    display: none;
    posit开发者_高级运维ion: absolute;
    left: 0;
    width: 100%;
    -webkit-transform: translate3d(0,0,0) rotate(0) scale(1);
    min-height: 420px !important;
}

Makes the gallery work, but obviously means the website doesn't work. Any ideas why this is happening, what body > * does and how I can get over it?

Project is at http://djrb.co.uk/mobile/portfolio.php#home

Many thanks,

Rich

The selector body > * matches any element that is a child of body. The right-angle bracket is the child selector. The star matches any element.

You probably want to include a more specific selector for your gallery div and apply the appropriate styles in a separate declaration block. Something like this:

#project_name {
    /* properties */
}