Currently, I am utilizing jqtouch to create a mobile website. In addition to this, I am incorporating a gallery image slider into the website. However, I have encountered an issue where the images do not display when placed between
<div id="project_name" class="page"></div>
.
After spending hours tinkering with it and removing the display: none;
property from the following rule in jqtouch.css:
body > * {
-webkit-backface-visibility: hidden;
-webkit-box-sizing: border-box;
display: none;
position: absolute;
left: 0;
width: 100%;
-webkit-transform: translate3d(0,0,0) rotate(0) scale(1);
min-height: 420px !important;
}
I discovered that removing it allowed the gallery to function properly. However, this caused the rest of the website to stop working. Any suggestions on why this is happening, the purpose of body > *
, and how I can overcome this issue?
You can view the project at
Thank you,
Rich