Responsive Apparel Boutique Template

zzbchu:

I would like to know under the mobile ver., why the images in the product listing page were so small compare to the images under "New Products" or Monthly Specials"?

Can I amend the image size under product listing page in the mobile ver.?

Edit the includes/templates/apparel_boutique/css/responsive.css file.

Thanks,

Anne

picaflor-azul:

Edit the includes/templates/apparel_boutique/css/responsive.css file.

Thanks,

Anne

Dear Anne,

Can you please show me where should adjust the product list image size?

.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";}
.clearfix:after{clear:both;}

img{max-width:100%;height:auto;border:0;}

.leftBoxContainer {
margin-left:0.5em;/added for responsive view (removes if COLUMN_WIDTH = 0)/
}

.onerow{margin-left:-5px;zoom:1;}
.onerow:before,.onerow:after{display:table;content:"";}
.onerow:after{clear:both;}
[class="col"]{float:left;margin-left:5px;}
.col1{width:75px;}
.col2{width:155px;}
.col3{width:235px;}
.col4{width:315px;}
.col5{width:395px;}
.col6{width:475px;}
.col7{width:555px;}
.col8{width:635px;}
.col9{width:715px;}
.col10{width:795px;}
.col11{width:875px;}
.col12,.row-col-wrapper{width:960px;}
.offset1{margin-left:85px;}
.offset2{margin-left:165px;}
.offset3{margin-left:245px;}
.offset4{margin-left:325px;}
.offset5{margin-left:405px;}
.offset6{margin-left:485px;}
.offset7{margin-left:565px;}
.offset8{margin-left:645px;}
.offset9{margin-left:725px;}
.offset10{margin-left:805px;}
.offset11{margin-left:885px;}
.onerow-fluid{width:980px;zoom:1;background: #fff;margin:0 auto;}
.onerow-fluid:before,.onerow-fluid:after{display:table;content:"";}
.onerow-fluid:after{clear:both;}
.onerow-fluid>[class="col"]{float:left;margin-left:0.5208%;}
.onerow-fluid>[class*="col"]:first-child{margin-left:0;}
.onerow-fluid>.col1{width:07.8125%;}
.onerow-fluid>.col2{width:16.1458%;}
.onerow-fluid>.col3{width:24.4792%;}
.onerow-fluid>.col4{width:32.8125%;}
.onerow-fluid>.col5{width:41.1458%;}
.onerow-fluid>.col6{width:49.4792%;}
.onerow-fluid>.col7{width:57.8125%;}
.onerow-fluid>.col8{width:66.1458%;}
.onerow-fluid>.col9{width:74.4792%;}
.onerow-fluid>.col10{width:82.8125%;}
.onerow-fluid>.col11{width:91.1458%;}
.onerow-fluid>.col12{width:99.9999%;}
.row-col-wrapper{width:960px;margin-left:auto;margin-right:auto;*zoom:1;}
.row-col-wrapper:before,.row-col-wrapper:after{display:table;content:"";}
.row-col-wrapper:after{clear:both;}
.row-col-wrapper-fluid{padding-left:20px;padding-right:20px;*zoom:1;}
.row-col-wrapper-fluid:before,.row-col-wrapper-fluid:after{display:table;content:"";}
.row-col-wrapper-fluid:after{clear:both;}

@media (max-width:480px){.nav-collapse{-webkit-transform:translate3d(0, 0, 0);}
img.listingProductImage{max-width:350px;height:350px;}
div#navMainSearch, div#navMain, div#navMain ul {float:none;text-align:center;padding:0;margin:0;width:100%!important;}
#headerWrapper,div#logoWrapper {height:auto;}
div.centerBoxContentsProducts.centeredContent, div.centerBoxContentsNew.centeredContent, div.categoryListBoxContents.centeredContent, div.centerBoxContentsAlsoPurch.centeredContent, div.centerBoxContentsFeatured.centeredContent, div.centerBoxContentsSpecials.centeredContent, div.specialsListBoxContents, div.categoryListBoxContents {clear:both;width:100%!important;height:auto;}
.centerBoxContentsNew{clear:both;float:none;}
.centerBoxHeading{clear:both;}
div#logo IMG {clear:both;}
.centerColumn{padding:0 0.5em 2.0em 0.5em;}
table#cartContentsDisplay IMG, table#cartContentsDisplay input[type="image"] {width:12px;height:12px;}
.cartProductDisplay {text-align:left;padding:5px;}
.cartQuantity INPUT {width:75%!important;}
td.productListing-data INPUT {width:20%!important;}
div#checkoutShipto IMG,div#checkoutBillto IMG {clear:both;position:relative;left:20px;}
div#checkoutBillto, div#checkoutShipto,div.floatingBox{font-size:10px;}
.leftBoxContainer, .rightBoxContainer {margin:0.5em;}
input[type="text"],input[type="password"],select {width:85%;}
div#advSearchDefault.centerColumn fieldset {clear:both;float:none;width:95%;}
.cartProductDisplay IMG,span#cartImage.back {display: none;visibility: hidden;}
.cartProductDisplay {text-align:left;padding:5px;}
.cartProductDisplay ul,span#cartProdTitle {text-align:left;padding:0px;margin:0;}
div#checkoutBillto.back, div#checkoutShipto.forward,div#accountLinksWrapper {clear:both;float:none;width:95%;}
th#thcol1,th#thcol3,td#tdcol1,td#tdcol3,.minWidthHide {display:none;visibility:hidden;}
.minWidthShow {display:block;visibility:visible;}
dd.fourth, dd.first, dd.second, dd.third {display:none;}
#footer dl{height:30px;}
#social-media{clear:both;width:100%!important;margin-left:0px;border:none;height:auto;flot:none;position:relative;top:-30px;}
#siteinfoLegal{clear:both;width:100%!important;margin-left:0px;border:none;height:auto;text-align:left !important;margin-top:50px;float:none;margin-left:10px !important;margin-right:10px !important;}
#footer{padding-bottom:20px;}
.vDotLine, .hDotLine{display:none;}
#main-container{margin-top:0px;}
#navMain ul, #header-lan-curr{display:none;}
#logo{float:none;}
#navMainSearch{display:none;}
.mobile-search input[type=text]{height:18px;width:60%;margin-left:20px;margin-top:30px;margin-bottom:30px;}
.mobile-search input[type=image]{vertical-align:middle;}
#categoryIcon{display:none;}
.heading{display:block;}
#p-left{margin-top:20px;margin-bottom:20px;}
#p-right{float:none;clear:both;}
#productName{text-align:center;}
#navBreadCrumb{display:none;}
.listingDescription{display:none;}
.centerBoxContentsProducts input[type=text]{width:25%;}
.m-cart{float:right;}
.m-home{float:right;margin-left:20px;}
#scUnitHeading, .cartUnitDisplay{display:none;}
#shoppingCartDefault .forward, #shoppingCartDefault .back{float:none;}
#cartContentsDisplay{}
#BackToTop{z-index:100000;}
#moduleMenu span a {padding-left:20px;}
.container{width:auto;height:332px;}
#moduleMenu-wrapper{margin-top:40px;}
#home-text{margin-top:-100px;}
}

@media (max-width:767px){
.row-col-wrapper{width:auto;padding:0 5px;}
.onerow-fluid{width:100%;}
.onerow{margin-left:0;}
.onerow>[class*="col"],.onerow-fluid>[class*="col"]{float:none;display:block;width:auto;margin:0;}
img.listingProductImage{width:50px;height:50px;}
div#navMainSearch, div#navMain, div#navMain ul {float:none;text-align:center;padding:0;margin:0;width:100%!important;}
#headerWrapper,div#logoWrapper {height:auto;}
div.centerBoxContentsProducts.centeredContent, div.centerBoxContentsNew.centeredContent, div.categoryListBoxContents.centeredContent, div.centerBoxContentsAlsoPurch.centeredContent, div.centerBoxContentsFeatured.centeredContent, div.centerBoxContentsSpecials.centeredContent, div.specialsListBoxContents, div.categoryListBoxContents {clear:both;width:100%!important;height:auto;}
div#logo IMG {clear:both;}
.centerColumn{padding:0 0.5em 2.0em 0.5em;}
table#cartContentsDisplay IMG, table#cartContentsDisplay input[type="image"] {width:12px;height:12px;}
.cartProductDisplay {text-align:left;padding:5px;}
.cartQuantity INPUT {width:75%!important;}
td.productListing-data INPUT {width:20%!important;}
div#checkoutShipto IMG,div#checkoutBillto IMG {clear:both;}
div#checkoutBillto, div#checkoutShipto,div.floatingBox{font-size:10px;}
.leftBoxContainer, .rightBoxContainer {margin:0.5em;}
input[type="text"],input[type="password"],select {width:85%;}
div#advSearchDefault.centerColumn fieldset {clear:both;float:none;width:95%;}
.cartProductDisplay IMG,span#cartImage.back {display: none;visibility: hidden;}
.cartProductDisplay {text-align:left;padding:5px;}
.cartProductDisplay ul,span#cartProdTitle {text-align:left;padding:0px;margin:0;}
div#checkoutBillto.back, div#checkoutShipto.forward,div#accountLinksWrapper {clear:both;float:none;width:95%;}
th#thcol1,th#thcol3,td#tdcol1,td#tdcol3,.minWidthHide {display:none;visibility:hidden;}
.minWidthShow {display:block;visibility:visible;}
.cart-icon{vertical-align:middle;}
#container {display:block;}
.active {display: block;}
.nav > li {float: none;}
.nav > li > .parent {background-position: 95% 50%;}
.nav li li .parent {background-image: url("../images/downArrow.png");background-repeat: no-repeat;background-position: 95% 50%;}
.nav ul {display: block;width: 100%;}
.nav > li.hover > ul , .nav li li.hover ul {position: static;}
.m-cart{float:right;}
.m-home{float:right;margin-left:20px;}
dd.fourth, dd.first, dd.second, dd.third {display:none;}
#footer{padding-bottom:20px;}
#social-media{clear:both;width:90%!important;margin:0 auto;border:none;height:auto;float:none;position:relative;top:-30px;}
#siteinfoLegal{clear:both;width:100%!important;margin-left:0px;border:none;height:auto;text-align:center;margin-top:10px;}
dl{height:30px;}
#navMain ul, #navMainSearch, #header-lan-curr{display:none;}
#main-container{margin-top:0px;}

}

@media (min-width:768px) and (max-width:979px){
.onerow{margin-left:-5px;zoom:1;}
.onerow:before,.onerow:after{display:table;content:"";}
.onerow:after{clear:both;} [class="col"]{float:left;margin-left:5px;}
.col1{width:59px;}
.col2{width:123px;}
.col3{width:187px;}
.col4{width:251px;}
.col5{width:315px;}
.col6{width:379px;}
.col7{width:443px;}
.col8{width:507px;}
.col9{width:571px;}
.col10{width:635px;}
.col11{width:699px;}
.col12,.row-col-wrapper{width:768px;}
.offset1{margin-left:69px;}
.offset2{margin-left:133px;}
.offset3{margin-left:197px;}
.offset4{margin-left:261px;}
.offset5{margin-left:325px;}
.offset6{margin-left:389px;}
.offset7{margin-left:453px;}
.offset8{margin-left:517px;}
.offset9{margin-left:581px;}
.offset10{margin-left:645px;}
.offset11{margin-left:709px;}
.onerow-fluid{width:700px;zoom:1;margin:0 auto;}
.onerow-fluid:before,.onerow-fluid:after{display:table;content:"";} .onerow-fluid:after{clear:both;}
.onerow-fluid>[class="col"]{float:left;margin-left:0.6510%;}
.onerow-fluid>[class*="col"]:first-child{margin-left:0;}
.onerow-fluid>.col1{width:7.6823%;}
.onerow-fluid>.col2{width:18.0156%;}
.onerow-fluid>.col3{width:24.3490%;}
.onerow-fluid>.col4{width:32.6823%;}
.onerow-fluid>.col5{width:41.0156%;}
.onerow-fluid>.col6{width:49.3490%;}
.onerow-fluid>.col7{width:57.6823%;}
.onerow-fluid>.col8{width:61.99%;}
.onerow-fluid>.col9{width:74.3490%;}
.onerow-fluid>.col10{width:82.6823%;}
.onerow-fluid>.col11{width:91.0156%;}
.onerow-fluid>.col12{width:99.9999%;}
}

@media (max-width:979px){body{padding-top:0;}
#social-media{margin-top:0px;}
#siteinfoLegal{margin-top:-40px;margin-bottom:20px;width:50%;}
}

@media (min-width:980px){.nav-collapse.collapse{height:auto !important;}}
@media (min-width:1200px){.row{margin-left:-5px;zoom:1;}
.onerow:before,.onerow:after{display:table;content:"";}
.onerow:after{clear:both;} [class="col"]{float:left;margin-left:5px;}
.col1{width:95px;}
.col2{width:195px;}
.col3{width:295px;}
.col4{width:395px;}
.col5{width:495px;}
.col6{width:595px;}
.col7{width:695px;}
.col8{width:795px;}
.col9{width:895px;}
.col10{width:995px;}
.col11{width:1095px;}
.col12,.row-col-wrapper{width:1200px;}
.offset1{margin-left:105px;}
.offset2{margin-left:205px;}
.offset3{margin-left:305px;}
.offset4{margin-left:405px;}
.offset5{margin-left:505px;}
.offset6{margin-left:605px;}
.offset7{margin-left:705px;}
.offset8{margin-left:805px;}
.offset9{margin-left:905px;}
.offset10{margin-left:1005px;}
.offset11{margin-left:1105px;}
.onerow-fluid{width:980px;zoom:1;margin:0 auto;}
.onerow-fluid:before,.onerow-fluid:after{display:table;content:"";}
.onerow-fluid:after{clear:both;} .onerow-fluid>[class="col"]{float:left;margin-left:0.4167%;}
.onerow-fluid>[class*="col"]:first-child{margin-left:0;}
.onerow-fluid>.col1{width:07.9167%;}
.onerow-fluid>.col2{width:18.2500%;}
.onerow-fluid>.col3{width:24.5833%;}
.onerow-fluid>.col4{width:32.9167%;}
.onerow-fluid>.col5{width:41.2500%;}
.onerow-fluid>.col6{width:49.5833%;}
.onerow-fluid>.col7{width:57.9167%;}
.onerow-fluid>.col8{width:62.2500%;}
.onerow-fluid>.col9{width:74.5833%;}
.onerow-fluid>.col10{width:80.9167%;}
.onerow-fluid>.col11{width:91.2500%;}
.onerow-fluid>.col12{width:99.9999%;}
.thumbnails{margin-left:-5px;}
.thumbnails>li{margin-left:5px;}
#container{display:none;}
.heading{display:none;}
.content{display:block !important;}

}

zzbchu:

Dear Anne,

Can you please show me where should adjust the product list image size?

.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";}
.clearfix:after{clear:both;}

img{max-width:100%;height:auto;border:0;}

.leftBoxContainer {
margin-left:0.5em;/added for responsive view (removes if COLUMN_WIDTH = 0)/
}

.onerow{margin-left:-5px;zoom:1;}
.onerow:before,.onerow:after{display:table;content:"";}
.onerow:after{clear:both;}
[class="col"]{float:left;margin-left:5px;}
.col1{width:75px;}
.col2{width:155px;}
.col3{width:235px;}
.col4{width:315px;}
.col5{width:395px;}
.col6{width:475px;}
.col7{width:555px;}
.col8{width:635px;}
.col9{width:715px;}
.col10{width:795px;}
.col11{width:875px;}
.col12,.row-col-wrapper{width:960px;}
.offset1{margin-left:85px;}
.offset2{margin-left:165px;}
.offset3{margin-left:245px;}
.offset4{margin-left:325px;}
.offset5{margin-left:405px;}
.offset6{margin-left:485px;}
.offset7{margin-left:565px;}
.offset8{margin-left:645px;}
.offset9{margin-left:725px;}
.offset10{margin-left:805px;}
.offset11{margin-left:885px;}
.onerow-fluid{width:980px;zoom:1;background: #fff;margin:0 auto;}
.onerow-fluid:before,.onerow-fluid:after{display:table;content:"";}
.onerow-fluid:after{clear:both;}
.onerow-fluid>[class="col"]{float:left;margin-left:0.5208%;}
.onerow-fluid>[class*="col"]:first-child{margin-left:0;}
.onerow-fluid>.col1{width:07.8125%;}
.onerow-fluid>.col2{width:16.1458%;}
.onerow-fluid>.col3{width:24.4792%;}
.onerow-fluid>.col4{width:32.8125%;}
.onerow-fluid>.col5{width:41.1458%;}
.onerow-fluid>.col6{width:49.4792%;}
.onerow-fluid>.col7{width:57.8125%;}
.onerow-fluid>.col8{width:66.1458%;}
.onerow-fluid>.col9{width:74.4792%;}
.onerow-fluid>.col10{width:82.8125%;}
.onerow-fluid>.col11{width:91.1458%;}
.onerow-fluid>.col12{width:99.9999%;}
.row-col-wrapper{width:960px;margin-left:auto;margin-right:auto;*zoom:1;}
.row-col-wrapper:before,.row-col-wrapper:after{display:table;content:"";}
.row-col-wrapper:after{clear:both;}
.row-col-wrapper-fluid{padding-left:20px;padding-right:20px;*zoom:1;}
.row-col-wrapper-fluid:before,.row-col-wrapper-fluid:after{display:table;content:"";}
.row-col-wrapper-fluid:after{clear:both;}

@media (max-width:480px){.nav-collapse{-webkit-transform:translate3d(0, 0, 0);}
img.listingProductImage{max-width:350px;height:350px;}
div#navMainSearch, div#navMain, div#navMain ul {float:none;text-align:center;padding:0;margin:0;width:100%!important;}
#headerWrapper,div#logoWrapper {height:auto;}
div.centerBoxContentsProducts.centeredContent, div.centerBoxContentsNew.centeredContent, div.categoryListBoxContents.centeredContent, div.centerBoxContentsAlsoPurch.centeredContent, div.centerBoxContentsFeatured.centeredContent, div.centerBoxContentsSpecials.centeredContent, div.specialsListBoxContents, div.categoryListBoxContents {clear:both;width:100%!important;height:auto;}
.centerBoxContentsNew{clear:both;float:none;}
.centerBoxHeading{clear:both;}
div#logo IMG {clear:both;}
.centerColumn{padding:0 0.5em 2.0em 0.5em;}
table#cartContentsDisplay IMG, table#cartContentsDisplay input[type="image"] {width:12px;height:12px;}
.cartProductDisplay {text-align:left;padding:5px;}
.cartQuantity INPUT {width:75%!important;}
td.productListing-data INPUT {width:20%!important;}
div#checkoutShipto IMG,div#checkoutBillto IMG {clear:both;position:relative;left:20px;}
div#checkoutBillto, div#checkoutShipto,div.floatingBox{font-size:10px;}
.leftBoxContainer, .rightBoxContainer {margin:0.5em;}
input[type="text"],input[type="password"],select {width:85%;}
div#advSearchDefault.centerColumn fieldset {clear:both;float:none;width:95%;}
.cartProductDisplay IMG,span#cartImage.back {display: none;visibility: hidden;}
.cartProductDisplay {text-align:left;padding:5px;}
.cartProductDisplay ul,span#cartProdTitle {text-align:left;padding:0px;margin:0;}
div#checkoutBillto.back, div#checkoutShipto.forward,div#accountLinksWrapper {clear:both;float:none;width:95%;}
th#thcol1,th#thcol3,td#tdcol1,td#tdcol3,.minWidthHide {display:none;visibility:hidden;}
.minWidthShow {display:block;visibility:visible;}
dd.fourth, dd.first, dd.second, dd.third {display:none;}
#footer dl{height:30px;}
#social-media{clear:both;width:100%!important;margin-left:0px;border:none;height:auto;flot:none;position:relative;top:-30px;}
#siteinfoLegal{clear:both;width:100%!important;margin-left:0px;border:none;height:auto;text-align:left !important;margin-top:50px;float:none;margin-left:10px !important;margin-right:10px !important;}
#footer{padding-bottom:20px;}
.vDotLine, .hDotLine{display:none;}
#main-container{margin-top:0px;}
#navMain ul, #header-lan-curr{display:none;}
#logo{float:none;}
#navMainSearch{display:none;}
.mobile-search input[type=text]{height:18px;width:60%;margin-left:20px;margin-top:30px;margin-bottom:30px;}
.mobile-search input[type=image]{vertical-align:middle;}
#categoryIcon{display:none;}
.heading{display:block;}
#p-left{margin-top:20px;margin-bottom:20px;}
#p-right{float:none;clear:both;}
#productName{text-align:center;}
#navBreadCrumb{display:none;}
.listingDescription{display:none;}
.centerBoxContentsProducts input[type=text]{width:25%;}
.m-cart{float:right;}
.m-home{float:right;margin-left:20px;}
#scUnitHeading, .cartUnitDisplay{display:none;}
#shoppingCartDefault .forward, #shoppingCartDefault .back{float:none;}
#cartContentsDisplay{}
#BackToTop{z-index:100000;}
#moduleMenu span a {padding-left:20px;}
.container{width:auto;height:332px;}
#moduleMenu-wrapper{margin-top:40px;}
#home-text{margin-top:-100px;}
}

@media (max-width:767px){
.row-col-wrapper{width:auto;padding:0 5px;}
.onerow-fluid{width:100%;}
.onerow{margin-left:0;}
.onerow>[class*="col"],.onerow-fluid>[class*="col"]{float:none;display:block;width:auto;margin:0;}
img.listingProductImage{width:50px;height:50px;}
div#navMainSearch, div#navMain, div#navMain ul {float:none;text-align:center;padding:0;margin:0;width:100%!important;}
#headerWrapper,div#logoWrapper {height:auto;}
div.centerBoxContentsProducts.centeredContent, div.centerBoxContentsNew.centeredContent, div.categoryListBoxContents.centeredContent, div.centerBoxContentsAlsoPurch.centeredContent, div.centerBoxContentsFeatured.centeredContent, div.centerBoxContentsSpecials.centeredContent, div.specialsListBoxContents, div.categoryListBoxContents {clear:both;width:100%!important;height:auto;}
div#logo IMG {clear:both;}
.centerColumn{padding:0 0.5em 2.0em 0.5em;}
table#cartContentsDisplay IMG, table#cartContentsDisplay input[type="image"] {width:12px;height:12px;}
.cartProductDisplay {text-align:left;padding:5px;}
.cartQuantity INPUT {width:75%!important;}
td.productListing-data INPUT {width:20%!important;}
div#checkoutShipto IMG,div#checkoutBillto IMG {clear:both;}
div#checkoutBillto, div#checkoutShipto,div.floatingBox{font-size:10px;}
.leftBoxContainer, .rightBoxContainer {margin:0.5em;}
input[type="text"],input[type="password"],select {width:85%;}
div#advSearchDefault.centerColumn fieldset {clear:both;float:none;width:95%;}
.cartProductDisplay IMG,span#cartImage.back {display: none;visibility: hidden;}
.cartProductDisplay {text-align:left;padding:5px;}
.cartProductDisplay ul,span#cartProdTitle {text-align:left;padding:0px;margin:0;}
div#checkoutBillto.back, div#checkoutShipto.forward,div#accountLinksWrapper {clear:both;float:none;width:95%;}
th#thcol1,th#thcol3,td#tdcol1,td#tdcol3,.minWidthHide {display:none;visibility:hidden;}
.minWidthShow {display:block;visibility:visible;}
.cart-icon{vertical-align:middle;}
#container {display:block;}
.active {display: block;}
.nav > li {float: none;}
.nav > li > .parent {background-position: 95% 50%;}
.nav li li .parent {background-image: url("../images/downArrow.png");background-repeat: no-repeat;background-position: 95% 50%;}
.nav ul {display: block;width: 100%;}
.nav > li.hover > ul , .nav li li.hover ul {position: static;}
.m-cart{float:right;}
.m-home{float:right;margin-left:20px;}
dd.fourth, dd.first, dd.second, dd.third {display:none;}
#footer{padding-bottom:20px;}
#social-media{clear:both;width:90%!important;margin:0 auto;border:none;height:auto;float:none;position:relative;top:-30px;}
#siteinfoLegal{clear:both;width:100%!important;margin-left:0px;border:none;height:auto;text-align:center;margin-top:10px;}
dl{height:30px;}
#navMain ul, #navMainSearch, #header-lan-curr{display:none;}
#main-container{margin-top:0px;}

}

@media (min-width:768px) and (max-width:979px){
.onerow{margin-left:-5px;zoom:1;}
.onerow:before,.onerow:after{display:table;content:"";}
.onerow:after{clear:both;} [class="col"]{float:left;margin-left:5px;}
.col1{width:59px;}
.col2{width:123px;}
.col3{width:187px;}
.col4{width:251px;}
.col5{width:315px;}
.col6{width:379px;}
.col7{width:443px;}
.col8{width:507px;}
.col9{width:571px;}
.col10{width:635px;}
.col11{width:699px;}
.col12,.row-col-wrapper{width:768px;}
.offset1{margin-left:69px;}
.offset2{margin-left:133px;}
.offset3{margin-left:197px;}
.offset4{margin-left:261px;}
.offset5{margin-left:325px;}
.offset6{margin-left:389px;}
.offset7{margin-left:453px;}
.offset8{margin-left:517px;}
.offset9{margin-left:581px;}
.offset10{margin-left:645px;}
.offset11{margin-left:709px;}
.onerow-fluid{width:700px;zoom:1;margin:0 auto;}
.onerow-fluid:before,.onerow-fluid:after{display:table;content:"";} .onerow-fluid:after{clear:both;}
.onerow-fluid>[class="col"]{float:left;margin-left:0.6510%;}
.onerow-fluid>[class*="col"]:first-child{margin-left:0;}
.onerow-fluid>.col1{width:7.6823%;}
.onerow-fluid>.col2{width:18.0156%;}
.onerow-fluid>.col3{width:24.3490%;}
.onerow-fluid>.col4{width:32.6823%;}
.onerow-fluid>.col5{width:41.0156%;}
.onerow-fluid>.col6{width:49.3490%;}
.onerow-fluid>.col7{width:57.6823%;}
.onerow-fluid>.col8{width:61.99%;}
.onerow-fluid>.col9{width:74.3490%;}
.onerow-fluid>.col10{width:82.6823%;}
.onerow-fluid>.col11{width:91.0156%;}
.onerow-fluid>.col12{width:99.9999%;}
}

@media (max-width:979px){body{padding-top:0;}
#social-media{margin-top:0px;}
#siteinfoLegal{margin-top:-40px;margin-bottom:20px;width:50%;}
}

@media (min-width:980px){.nav-collapse.collapse{height:auto !important;}}
@media (min-width:1200px){.row{margin-left:-5px;zoom:1;}
.onerow:before,.onerow:after{display:table;content:"";}
.onerow:after{clear:both;} [class="col"]{float:left;margin-left:5px;}
.col1{width:95px;}
.col2{width:195px;}
.col3{width:295px;}
.col4{width:395px;}
.col5{width:495px;}
.col6{width:595px;}
.col7{width:695px;}
.col8{width:795px;}
.col9{width:895px;}
.col10{width:995px;}
.col11{width:1095px;}
.col12,.row-col-wrapper{width:1200px;}
.offset1{margin-left:105px;}
.offset2{margin-left:205px;}
.offset3{margin-left:305px;}
.offset4{margin-left:405px;}
.offset5{margin-left:505px;}
.offset6{margin-left:605px;}
.offset7{margin-left:705px;}
.offset8{margin-left:805px;}
.offset9{margin-left:905px;}
.offset10{margin-left:1005px;}
.offset11{margin-left:1105px;}
.onerow-fluid{width:980px;zoom:1;margin:0 auto;}
.onerow-fluid:before,.onerow-fluid:after{display:table;content:"";}
.onerow-fluid:after{clear:both;} .onerow-fluid>[class="col"]{float:left;margin-left:0.4167%;}
.onerow-fluid>[class*="col"]:first-child{margin-left:0;}
.onerow-fluid>.col1{width:07.9167%;}
.onerow-fluid>.col2{width:18.2500%;}
.onerow-fluid>.col3{width:24.5833%;}
.onerow-fluid>.col4{width:32.9167%;}
.onerow-fluid>.col5{width:41.2500%;}
.onerow-fluid>.col6{width:49.5833%;}
.onerow-fluid>.col7{width:57.9167%;}
.onerow-fluid>.col8{width:62.2500%;}
.onerow-fluid>.col9{width:74.5833%;}
.onerow-fluid>.col10{width:80.9167%;}
.onerow-fluid>.col11{width:91.2500%;}
.onerow-fluid>.col12{width:99.9999%;}
.thumbnails{margin-left:-5px;}
.thumbnails>li{margin-left:5px;}
#container{display:none;}
.heading{display:none;}
.content{display:block !important;}

}

This can be done in the admin--configuration--layout settings.

Thanks,

Anne

Hi I believe the SQL for the "About Us" Define Page needs an update. The first section below is what was supplied in about_us.sql. After I ran the provided SQL there was no option on the "Define Page Status" configuration page to enable or disable the About Us page.

INSERT INTO configuration (configuration_id, configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added, use_function, set_function) VALUES 
('Define About Us Status', 'DEFINE_ABOUT_US_STATUS', '1', 'Enable the Defined About Us Link/Text?<br />0= Link ON, Define Text OFF<br />1= Link ON, Define Text ON<br />2= Link OFF, Define Text ON<br />3= Link OFF, Define Text OFF', 25, 59, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''0'', ''1'', ''2'', ''3''),');

I noticed the column names were not aligned with the values provided and changed them as follows, which seems to work for me.

INSERT INTO configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added, use_function, set_function) VALUES ('Define About Us Status', 'DEFINE_ABOUT_US_STATUS', '1', 'Enable the Defined About Us Link/Text?<br />0= Link ON, Define Text OFF<br />1= Link ON, Define Text ON<br />2= Link OFF, Define Text ON<br />3= Link OFF, Define Text OFF', 25, 59, NOW(), NULL, 'zen_cfg_select_option(array(''0'', ''1'', ''2'', ''3''),');

In:

includes/templates/responsive_apparel_boutique/templates/tpl_modules_mobile_categories_tabs.php (line 25)
includes/templates/responsive_apparel_boutique/common/tpl_header.php (line 97)

you used the PHP invocation shorthand of "<?" which caused unparsed PHP to be printed in my header. I changed those to "<?php" and all was well. Using the shorthand requires a setting in php.ini which not all people will have, so the formal invocation is recommended.

mikeymoto:

Hi I believe the SQL for the "About Us" Define Page needs an update. The first section below is what was supplied in about_us.sql. After I ran the provided SQL there was no option on the "Define Page Status" configuration page to enable or disable the About Us page.

INSERT INTO configuration (configuration_id, configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added, use_function, set_function) VALUES
('Define About Us Status', 'DEFINE_ABOUT_US_STATUS', '1', 'Enable the Defined About Us Link/Text?<br />0= Link ON, Define Text OFF<br />1= Link ON, Define Text ON<br />2= Link OFF, Define Text ON<br />3= Link OFF, Define Text OFF', 25, 59, NOW(), NOW(), NULL, 'zen_cfg_select_option(array(''0'', ''1'', ''2'', ''3''),');

> 
> I noticed the column names were not aligned with the values provided and changed them as follows, which seems to work for me.
> 
> ```
INSERT INTO configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added, use_function, set_function) VALUES ('Define About Us Status', 'DEFINE_ABOUT_US_STATUS', '1', 'Enable the Defined About Us Link/Text?<br />0= Link ON, Define Text OFF<br />1= Link ON, Define Text ON<br />2= Link OFF, Define Text ON<br />3= Link OFF, Define Text OFF', 25, 59, NOW(), NULL, 'zen_cfg_select_option(array(''0'', ''1'', ''2'', ''3''),');

Thanks for posting. This has already been noted and added to the list for a future update.

Thanks,

Anne

mikeymoto:

In:

includes/templates/responsive_apparel_boutique/templates/tpl_modules_mobile_categories_tabs.php (line 25)
includes/templates/responsive_apparel_boutique/common/tpl_header.php (line 97)

you used the PHP invocation shorthand of "<?" which caused unparsed PHP to be printed in my header. I changed those to "<?php" and all was well. Using the shorthand requires a setting in php.ini which not all people will have, so the formal invocation is recommended.

Thanks again. This has also already been noted and added to a list for a future template pacakge update.

Thanks,

Anne

Hi,

Great template !!

I have installed the responsive apparel boutique template and it is working perfectly. I have also added a few mods such as Image Handler 4_v4_3_2 and ceon-uri-mapping_4.4.1_for_zc with no problems.

In Admin, Layout settings i have Categories - Always Show on Main Page set to on.

When adding text to the main page (in Admin) using define_main_page.php the text is put above the categories. Is there any way to add text to the main page so that it will show below the categories ?

Many thanks

Mike

Mike Wood:

Hi,

Great template !!

I have installed the responsive apparel boutique template and it is working perfectly. I have also added a few mods such as Image Handler 4_v4_3_2 and ceon-uri-mapping_4.4.1_for_zc with no problems.

In Admin, Layout settings i have Categories - Always Show on Main Page set to on.

When adding text to the main page (in Admin) using define_main_page.php the text is put above the categories. Is there any way to add text to the main page so that it will show below the categories ?

Many thanks

Mike

I am happy that you like the template and are using it for your zen cart design ;)

You can move the define main page text by editing the code in the includes/templates/override/templates/tpl_index_categories.php file. You will need to create the override for this file.

Thanks,

Anne

Hi. :smile:
Now I'm using Apparel Boutique Template(not responsive).

I'm curious if I can install just mobile version....

Thank U^^

Park:

Hi. :smile:
Now I'm using Apparel Boutique Template(not responsive).

I'm curious if I can install just mobile version....

Thank U^^

The responsive apprarel boutique is a completely different template. You can install it, but it will be the same as installing any new template. You will have to make your customizations and re-install any override files from any modules that you have installed to the new template directory.

Thanks,

Anne

Thank U, Anne :D

Hi Anne,

I have recently installed this template but I'm not sure what went wrong. It seems that for mobile view, the sliders and product table will appear to be much larger than it's background.

Website link:
http://www.kurotales.com/zen05/

I changed some of the designs and merged some files for it to work with my current website.
Current website is using Ashley Pink template (which has been really great!).

Would appreciate it much if you could assist me on this..
Thank you in advance!

naczyls747:

Hi Anne,

I have recently installed this template but I'm not sure what went wrong. It seems that for mobile view, the sliders and product table will appear to be much larger than it's background.

Website link:
http://www.kurotales.com/zen05/

I changed some of the designs and merged some files for it to work with my current website.
Current website is using Ashley Pink template (which has been really great!).

Would appreciate it much if you could assist me on this..
Thank you in advance!

You need to backtrack through your changes to find out at which point you broke the responsiveness of the design. I would recommend starting from the Responsive Apparel Boutique template then just making color changes to match your old design, carefully testing after each change.

Thanks,

Anne

Dear Anne,

Thank you for your prompt reply :)

May I know if the responsive codes (based on what is broken on my website) is located in stylesheet or responsive? Or any files in the CSS folder?
Apologize for the newbie question.. this is my first website building experience.

naczyls747:

Dear Anne,

Thank you for your prompt reply :)

May I know if the responsive codes (based on what is broken on my website) is located in stylesheet or responsive? Or any files in the CSS folder?
Apologize for the newbie question.. this is my first website building experience.

I am not sure exactly what you are asking. There are media queries in the responsive.css stylesheet that are called on devices that use certain widths. If you backtrack through your changes and find a change that breaks the responsive design, then you need to modify the new element (most likely using css) so that it fits into the responsive design or uses responsive design principles.

Thanks,

Anne

picaflor-azul:

I am not sure exactly what you are asking. There are media queries in the responsive.css stylesheet that are called on devices that use certain widths. If you backtrack through your changes and find a change that breaks the responsive design, then you need to modify the new element (most likely using css) so that it fits into the responsive design or uses responsive design principles.

Thanks,

Anne

Dear Anne,
Thank you for your reply. I did as you suggested and found the problem ^^

However, another issue popped up.. May I know if there is any way to change to picture size for product category listing (for mobile)? It's normal on the index page, but very small in category listing.

http**https://www.summeraffaire.com

Apologize for all the trouble..

Thank you in advance!

naczyls747:

Dear Anne,
Thank you for your reply. I did as you suggested and found the problem ^^

However, another issue popped up.. May I know if there is any way to change to picture size for product category listing (for mobile)? It's normal on the index page, but very small in category listing.

http**https://www.summeraffaire.com

Apologize for all the trouble..

Thank you in advance!

This can be done using css in the responsive.css file. If you post a link to a page with the problem I can take a look.

Thanks,

Anne

picaflor-azul:

This can be done using css in the responsive.css file. If you post a link to a page with the problem I can take a look.

Thanks,

Anne

Dear Anne,

Thank you very much! I found it and fixed it~!

Have a great day!

naczyls747:

Dear Anne,

Thank you very much! I found it and fixed it~!

Have a great day!

I am happy that you figured it out ;)

Thanks,

Anne