How do I enable the image name under the image in the mobile version. It works great for desktop.

AND Can people place orders via the Mobile?

Edited by

Download this zip file and unzip it to your computer:
http://www.picturespro.com/sy-misc/Photo-Cart-File-Names-Moblie.zip

Upload the included pc_mobile_photos.php into your Photo Cart folder overwriting the existing one.

This file will show photo file names below the photos in the mobile version of Photo Cart

There are not purchasing options in Photo Cart on mobile devices.

Edited by

If I just upgraded yesterday, does this still mean that I must go in and update something else? The numbers aren't showing up for my clients on mobile now.

Edited by

Admin screen -> Customize -> Edit my theme -> Paste this in the "additional css" box. This is all my mobile friendly code. Not perfect, but been used for 2+ years no problem. It also has many tweaks for the desktop site as well, you can go through and remove the ones you don't want. Hope it helps.




/* (min-width:600px) and */
@media (max-width:1080px){


#deleteAllFavs {

}


#notification-bar {
font-size: 0.6em !important;
}

#thirdparty a {
font-size: 1.5em !important;
}


body {font-size: 28px !important;}
h1, h1 a {font-size: 42px !important; }
h3, h3 a {font-size: 42px !important; }
h4, h4 a {font-size: 32px !important; }
a {font-size: 28px !important;}


#nav a {font-size: 36px !important; padding: 24px !important;}

/*#topMainMenuContainer {margin-bottom: 125px;}*/
#topMainMenu li a {font-size: 36px !important; text-transform: none !important; line-height: 80px !important; padding-right: 30px !important;}

#cartTotalDiv {font-size: 42px !important;}

#buy-now { display: none; }
#facebook { display: none; }

.topMainMenuItem, .topMainMenuItemOn {font-size: 54px; line-height: 80px;}
#topMainMenuDropDownItem {font-size: 54px; line-height: 100px;}

.displaygalleryb {width: 250px !important; height: 250px !important; margin-bottom: 80px !important;}
.displaygalleryd img {width: 250px !important; height: 250px !important}
#listCategories a { font-size: 32px !important;}
#listCategories .categoryTitle { font-size: 32px !important;}
#listCategories {margin-top: 120px;}

.testimonial-container {
max-width: 90% !important;
margin: 20px auto !important;
}
.testimonial {
font-size: 24px !important;
border-radius: 10px !important;
padding: 20px 75px !important;
}
.testimonial:before, .testimonial:after {
font-size: 100px !important;
}
.testimonial-name {
font-size: 24px !important;
}


#pageMenu .totalResults { padding: 10px 25px !important; margin-left: 10px; font-size: 32px}
#pageMenu .selectedPage {border: none !important; padding: 10px 25px !important; margin: 0 0 10px 10px !important; font-size: 32px}
#pageMenu .selectPage {border: none !important; padding: 10px 25px !important; margin: 0 0 10px 10px !important; font-size: 32px}

#pageContentContainer {padding: 4px !important;}

.gal_title_normal {font-size: 48px !important;}
.preregisterlink {font-size: 28px !important;}
.pageContent {font-size: 32px !important;}
#listGalleries .thumbContainerFixedOuter { border: none !important; padding: 20px !important; background: black;}
#listGalleries .pageContent { padding: none !important; }


/* #viewImageExtra {display: none;}
*/
#showGalleryTrail { width: 100%; background: #333 !important; }
.gallerySubNav { font-size: 38px; width: 100%; float: left;}
.pageTitle, h1 {font-size: 32px !important;}

.thumbContainer {
-ms-transform: scale(1.9);
-webkit-transform: scale(1.9);
transform: scale(1.9);
margin: 135px 100px 190px 100px !important;
font-size: 50% !important;
}

.thumbicons img {
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
height: auto !important;
}
.thumbicons li {
margin: 10px !important;
}

#photoBGContainer { display: none !important; }
#viewPhotoContainer {
width: 100% !important;
height: 100% !important;
left: 0 !important;
top: 0 !important;
border: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
margin: 0 !important;
overflow-y: auto !important;
}
#photoActionMenu {display: none !important;}
#photoActionMenuRight {display: none !important;}
#imageNames {font-size:32px !important;}
#viewPhotoExit { width: 100px !important; height: 100px !important; background-size: 100px 100px !important; opacity: 0.5;}
/*#prevPhoto {display: none !important; }
#nextPhoto {display: none !important; }*/
#prevPhoto {
position: absolute !important;
left: 0px !important;
top: 200px !important;
text-align: left !important;
opacity: 0.4 !important;
padding: 60px 50px 60px 0;
z-index: 999;
}
#nextPhoto {
position: absolute !important;
right: 0px !important;
top: 200px !important;
/* text-align: center !important;*/
opacity: 0.4 !important;
padding: 60px 0 50px 60px;
z-index: 999;
}
#nextPhoto img, #prevPhoto img {

}

#viewPhotoOuter {width: 100% !important; position: relative !important;}
.photoViewContainer { width: 100% !important; position: relative !important; margin: 0 !important; padding: 0 !important; }
.photoView {
width: auto;
max-width: 100%;
max-height: 50%;
margin: 0 !important;
float: left !important;
position: relative !important;
/*max-height: 40% !important;*/
display: block !important;
/* height: auto !important;
width: 100% !important;*/
}
#viewPhotoProducts {margin: 0 auto !important; float: left !important; width: 90% !important; height: auto !important; position: relative !important;}
#viewPhotoInfoContainer {float: left !important; position: relative !important; width: auto !important; margin: 0 auto !important;}
#viewPhotoInfoContainer .pageContent {font-size: 100% !important;}

.packagePadding {padding: 0 !important;}
.packagePadding .icon { width: 100px !important; height: 100px !important; background-size: 100px 100px !important; }
#viewPhotoActionsContainer {display: none !important;}
#viewPackages {z-index: 9000; width: 100% !important; position: fixed !important; top: 0; left: 0;}

/*.showPackages .pageContent {font-size: 75% !important;}*/
.packagePrice {float: none !important;}
.packagePrice h3 {font-size: 80px !important;}

#productListContainer .title { font-size: 130%; line-height: 200%; }
#productListContainer .label { font-size: 200%; line-height: 200%;}
#productListContainer .labelDescription { font-size: 80%; }
#productListContainer .closed { margin-top: 10px; }
#productList .product, #productList .product_hover {
font-size: 150% !important;
line-height: 400%;
}

select, input {
font-size: 50px !important;
padding: 10px;
}


input.submit, .createAccountLoginPage {
font-size: 60px !important;
padding: 30px !important;
margin: 10px !important;
}

#successMessage {display: none !important;}

#popupContainer {
background: black !important;
width: 94% !important;
height: 94% !important;
left: 3% !important;
top: 3% !important;
border: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}

#popupinner>div {
width: 100% !important;
}
#popupinner .icon { width: 100px !important; height: 100px !important; background-size: 100px 100px !important; }
#popupinner .pageContent { font-size: 38px !important; }

form {
margin-top: 40px !important;
}
#loadingMore {
font-size: 50px !important;
width: 400px !important;
margin-left: -200px !important;
padding: 30px !important;
}


/** shopping cart and checkout **/

#eblater {font-size: 40px !important;}

.formLeftCol {width: 95%; margin-bottom: 30px;}
.formRightCol {width: 95%; float: left; margin-bottom: 30px;}

#registerForm {width: 95%;}
#checkoutInfo {width: 100%; border: none;}
#checkoutMenu {width: 95%; border-top: solid 1px #666666; margin-top: 20px;}
#orderCalculation {width: 95%; border-right: none; border-bottom: solid 1px #666666; margin-bottom: 20px; padding-bottom: 10px;}
#orderCalculation table {width: 95%; font-size: 45px;}
#orderConfirmExtra {width: 95%;}

#viewCart .totals {width: 10% !important;}
#viewCart .cartitem {border: none !important;}
#viewCart .items .product {width: 62% !important; margin-left: 2%}
.product h3 {font-size: 30px !important;}
.product .icon {width: 64px !important;}



input[type=radio] {
border: 0px;
-ms-transform: scale(4);
-moz-transform: scale(4);
-webkit-transform: scale(4);
-o-transform: scale(4);
margin: 20px;
}

input[type=checkbox] {
border: 0px;
width: 100%;
height: 2em;
width: 2em;
}
/*
#payment_types_body img {
-ms-transform: scale(2);
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
margin: 10px 15px;
}
*/


#footer-container { display: none; }
#cp-footer {height: 30px !important; background: #080808 !important; padding-top: 5px}
#copyright p {color: #aaa; }
}












/**************************************************************************************************************************************************
**************************************************************************************************************************************************/




@media screen and (max-width:599px) {
#cartTotalDiv {font-size: 18px !important;}
#nav a {font-size: 18px !important;}
#menu li a {line-height: 20px !important;}
#topMainMenu li a {font-size: 18px !important; text-transform: none !important; line-height: 50px !important; padding-right: 30px !important;}
#topMainMenuDropDownItem {font-size: 30px; line-height: 50px;}

.thumbContainer {
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
/*margin: 135px 100px 190px 100px !important;*/
font-size: 50% !important;
}

.thumbicons img {
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
height: auto !important;
}
.thumbicons li {
margin: 10px !important;
}

.gal_title_normal {
font-size: 20px !important;
}
}




/**************************************************************************************************************************************************
**************************************************************************************************************************************************/






/***************************** Full size code ******************************/

#thirdparty a {
font-size: 1.5em !important;
line-height: 55px;
}


.testimonial-container {
max-width: 60%;
margin: 10px auto;
}

.testimonial {
margin: 0 auto;
background: #558DA0;
padding: 10px 50px;
position: relative;
font-family: Georgia, serif;
color: #fff;
font-size: 16px;
border-radius: 5px;
font-style: italic;
display:inline-block;
}

.testimonial:before, .testimonial:after {
content: "";
position: absolute;
font-size: 80px;
line-height: 1;
color: #bbb;
font-style: normal;
}

.testimonial:before {
top: 0;
left: 10px;
}

.testimonial:after {
content: "";
right: 10px;
bottom: -0.5em;
}

.arrow-right {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #558DA0;
margin: 0 0 0 25px;
}

.testimonial-name {
margin: 0 0 0 20px;
font-family: "Lucida Grande","Trebuchet MS", Tahoma,Arial,Verdana,sans-serif;
color: #ccc;
text-align:left;
font-size: 16px;
}


















#eblater {float: right; background-color: #dec99c; font-size: 20px; padding: 10px; color: black}
.ebhighlight {background-color: #dec99c; color: black}

.thumbContainerFixedOuter { border: none !important; background-color: #000 !important;}

.notes {display: none; }
.inner {display: inline; }

.productDescription img {
width: 100%;
}

#imageNames {
font-size:18px;
}

#photoCount {
display: none;
}
.selectPage {
background-color: #D4C981 !important;
color: #242424 !important;
}

#pageMenu {
float: left !important;
}

#listCategories a:link, #listCategories a:visited {
font-size: 14px;
}


#viewPhotoProducts {
overflow-y: auto !important;
overflow-x: hidden;
}
#viewPackages {
overflow-y: auto !important;
}

#addCouponLink a {
font-size: 18px;
}


html, body {
}

h1, h2, h3, h4 {
}

h4 {
font-size:18px;
color: #F88017;
}

::selection {
background: #dec99c;
color: white;
text-shadow: none;
}

textarea, input, select {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
font-size: 16px;
}

.createAccountLoginPage {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}

/*************************** Main Menu ***************************/

#nav {
background: #444 !important;
height: auto !important;
}

#cart_info {
border-top: none;
border-right: none;
}

#topMainMenuContainer {
background: #000 !important;
}

#topMainMenuDropDownItem a:hover { color: #fff; }

#topMainMenu ul {
margin-left: 0px;
}

#topMainMenu li:hover {
color: #ffffff;
background-color:#BDA56F;
-moz-transition: background-color .1s linear;
-webkit-transition: background-color .1s linear;
transition: background-color .1s linear;
}
#topMainMenu li {
-moz-transition: background-color .1s linear;
-webkit-transition: background-color .1s linear;
transition: background-color .1s linear;
}

#topMainMenu li a {
text-transform: uppercase;
font-weight: bold;
letter-spacing: none;
padding-left:10px;
padding-right:10px;
/* text-shadow: 1px 1px 2px #000;*/
}

#topMainMenu li a:hover {
text-decoration: none;
}

/*************************** Body ***************************/

#pageContentContainer {
min-height: 500px;
}

#show_cartSuccess_255, .successMessage, #earlyBirdSpecial, #specialMessage, .errorMessage, .tooltip {
text-shadow: none;
}

#galExpire, #galInvite, #galSearch, #navSubGalleries {
padding: 4px 6px !important;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}

#cart_info {
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
border-radius-bottomleft: 4px;
}

#cartTotalDiv {
padding: 6px;
}

.selectPage:hover {
text-decoration: none;
color: #ffffff !important;
background-color: #484848 !important;
-moz-transition: color, background-color .1s linear;
-webkit-transition: color, background-color .1s linear;
transition: color, background-color .1s linear;
}


.selectPage {
margin: 2px 4px !important;
padding: 2px 6px !important;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-transition: color, background-color .1s linear;
-webkit-transition: color background-color .1s linear;
transition: color background-color .1s linear;
}

#earlyBirdSpecial { padding: 20px !important; border: none !important;}


.preregisterlink {
font-size: 14px;
}

/*************************** Thumbnails ***************************/

#loadingMore {
background-color: #D4C981 !important;
color: #000 !important;
font-size: 18px;
}

#showGalleryTrail a {
text-shadow:none;

}

.thumbContainerFloating {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;

}

.thumbContainer {
height: 230px !important;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
border: none !important;
background: none !important;
padding-top: 16px !important;

}

.thumbnail {
border:1px #222 !important;
-moz-transition: border .1s linear;
-webkit-transition: border .1s linear;
transition: border .1s linear;
}

.thumbnail:hover {
border:1px #D4C981 !important;
-moz-transition: border .1s linear;
-webkit-transition: border .1s linear;
transition: border .1s linear;
}

.addToPackageButton, .removeFromPackageButton {
border: 1px solid #393939;
background-color: #2F2F2F;
color: #797979;
padding: 4px 4px !important;
font-size:14px;
line-height: 12px;
margin: 0px;
float: left;
position: relative;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;

}
.addToPackageButton:hover, .removeFromPackageButton:hover {
background-color: #444;
}

/*************************** Main Image View ***************************/

#myPackages {
background-color: #fff !important;
background-color: #D4C981 !important;
color: #000 !important;
}
#myPackagesDiv a {
color: #000 !important;
}

#viewImage {
width:75% !important;
}

.addToPackage {
/* background-color: #F88017;*/
}

#openframelarge {
width: 900px;
height: 90%;
}

a.addToPackage:link, a.addToPackage:visited {
font-size: 16px;
}

.mainImage {
}

#viewProducts {
width: 23%;
max-width: 500px;
}

#productList .closed, .hover {
-moz-transition: border, background-color .2s linear;
-webkit-transition: border, background-color .2s linear;
transition: border, background-color .2s linear;
}

#productList .closed {
-moz-transition: border, background-color .2s linear;
-webkit-transition: border, background-color .2s linear;
transition: border, background-color .2s linear;
}

#productList .open {
border: 1px solid #383838;
margin: 0px;
}

#productList .product, .product_hover {
border-bottom: 1px solid #383838;
border-right: 1px solid #383838;
border-left: 1px solid #383838;
margin: 0px !important;
-moz-transition: background-color .2s linear;
-webkit-transition: background-color .2s linear;
transition: background-color .2s linear;
}

#productList .product {
border-bottom: 1px solid #383838;
border-right: 1px solid #383838;
border-left: 1px solid #383838;
margin: 0px !important;
-moz-transition: background-color .2s linear;
-webkit-transition: background-color .2s linear;
transition: background-color .2s linear;
}

#thisProduct, #packageNoLabel, #thisProductNoLabel {
-moz-border-radius-bottomleft: 12px;
-moz-border-radius-bottomright: 12px;
-webkit-border-bottom-left-radius: 12px;
-webkit-border-bottom-right-radius: 12px;
border-radius-bottomleft: 12px;
border-radius-bottomright: 12px;
border-bottom: 1px solid #383838;
border-right: 1px solid #383838;
border-left: 1px solid #383838;
border-top: none;
margin: 0px !important;
}

/*************************** Shopping Cart ***************************/

.navagation_table {
-moz-border-radius: 12px; /* FF1+ */
-webkit-border-radius: 12px; /* Saf3-4, iOS 1+, Android 1.5+ */
border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
padding: 0 7px 1px 7px;
margin-top: 10px;
background-image: -moz-linear-gradient(top, #000000, #303030); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000000),color-stop(1, #303030)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(#000000, #303030); /* Chrome 10+, Saf6 */
background-image: linear-gradient(top, #000000, #303030);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#000000', EndColorStr='#303030'); /* IE6–IE9 */
}

.formLeftCol {width: 95%;}
.formRightCol {width: 95%; float: left;}

input[type=radio] {
border: 0px;
-ms-transform: scale(2);
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
margin: 20px;
}

input[type=checkbox] {
border: 0px;
width: 100%;
height: 2em;
width: 2em;
}


#orderCalculation {
font-size: 170% !important;
}






#notification-bar {
font-size: 100%;
background-color:#f0e496;
text-align:center;
color: black;
padding: 5px 0;
}



#viewCart li {
font-size: x-large !important;
background-color: yellow !important;
}

Edited by