Responsive Sheffield Blue v2.0

[RixStix]

Don't know what else to suggest since the template, out of the box, does not appear to exhibit that behavior.
and that is what I would expect for you to see if you restored the original template files and restored other core edits that affect the display you have made.

Responsive Sheffield Blue DEMO
http://zenlyzen.com/responsive/index...sheffield_blue

[wmorris]

Don't know what else to suggest since the template, out of the box, does not appear to exhibit that behavior.
and that is what I would expect for you to see if you restored the original template files and restored other core edits that affect the display you have made.

Responsive Sheffield Blue DEMO
http://zenlyzen.com/responsive/index...sheffield_blue

This was the only file that messed with until the header was missing:

/**
 * responsive_tablet.css
 *
 * @package templateSystem
 * @copyright Copyright 2003-2007 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * Added by rbarbour (ZCAdditions.com), Responsive DIY Template Default for 1.5.x (65)
 * Modified by Anne (Picaflor-Azul.com) Responsive Sheffield Blue v1.0
 */

/* Breakpoints are the point at which your sites content will respond to, to provide your visitors with the best possible layout to consume the information. */
/* 2.1 by default includes no breakpoints (ie. min-width or max-width) */
/* The orientation media query expression allows us to target specific styles based on the current screen or device orientation. We have 2 expressions; landscape and portrait which allows us to change a pages layout based on the browsers current orientation. */
/* A browser or device determines the orientation by listening to the width and height of the window. If the: */
/* height is larger than the width, the window is in portrait mode. */
/* width is larger than the height, the window is in landscape mode. */


/* 2.1 ALL TABLETS - ORIENTATION:LANDSCAPE */
@media only screen and (orientation:landscape)  {
div#headerWrapper {}
body{margin:0;padding:0;background:none;}
#top-inner-wrapper{margin-left:10px;}
#logo, #tagline{margin-left:10px;}
.ffCcol1{position:relative;left:20px;}
#navSuppWrapper{margin:0;}
#mobile-nav1{display:none;}
#home-images{margin:0 auto;width:99%;}
.image_carousel .panel{height:auto !important;}
.addthis_sharing_toolbox {margin-left:19%;width:80%;overflow:hidden;}

#top-middle{padding-top:0;background:none;}
#top-middle .onerow-fluid{border-radius:0;}
.ribbon:before, .ribbon:after, .ribbon1:before, .ribbon1:after, .ribbon2:before, .ribbon2:after{display:none;}
.ribbon1-content:before, .ribbon2-content:after, .ribbon2-content:before{border-width:0;}
.ribbon1 .ribbon1-content:before, .ribbon2 .ribbon2-content:after, .ribbon .ribbon-content:before, .ribbon .ribbon-content:after{border-width:0;}
.ribbon2{width:auto;}
#menu{width:100%;left:0;}
#navSuppWrapper{background:none;}
#footer-bottom a, #footer-bottom, #siteinfoLegal, #siteinfoLegal a{color:#444;}
ul#col_1, ul#col_2, ul#col_3{margin-left:20px;}
#flex-navSupp .ribbon{width:100%;}
#custom-tab-text {width:60%;}
#bannerSix{background:#fff;}
#cur-lan-header1{display:none;}
ul.slimmenu li .sub-collapser:before, ul.slimmenu1 li .sub-collapser:before{margin-right:0;}
ul.slimmenu li a{padding:12px 20px;}
.centerBoxContentsAlsoPurch, .centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured, .centerBoxContentsSpecials {width:45% !important;}
#pi-right{padding:20px;}

}

/* 2.1 ALL TABLETS - ORIENTATION:PORTRAIT (DEFAULT LAYOUT) */
@media only screen and (orientation:portrait)  {
div#headerWrapper {margin-bottom:0;}
.onerow-fluid>[class*="col"]{float:none;display:block;width:auto;margin:0;}
img.listingProductImage{max-width:200px;}
#headerWrapper,div#logoWrapper {height:auto;}
#logoWrapper{}
div#logo IMG {clear:both;}
.centerColumn{padding:0 30px;margin-top:0px;border-right:0px solid #dbdbce;border-left::0px solid #dbdbce;}
.cartProductDisplay {text-align:left;padding:5px;}
.cartQuantity INPUT {width:75%!important;}
td.productListing-data INPUT {width:20%!important;}
.leftBoxContainer, .rightBoxContainer {margin:0.5em;}
input[type="text"],input[type="password"],select {width:95%;}
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;}
body {margin:0;padding:0;background:none;}
a#foo2_next, a#foo1_next{right:0;}
#logo, #tagline{margin-left:10px;}
.banner span{font-size:140%;}
#menu{width:100%;margin-top:-165px;}
ul.slimmenu{position:relative;z-index:1000;background:#417db9;}
#navMainWrapper{position:relative;z-index:10;margin-top:-70px;width:75%;float:right;}
#navMainSearch input[type=text]{width:140px;}
.slide-out-div{top:230px !important;}
.ad{max-width:220px;}
#home-text{margin:30px auto 0 auto;width:100%;}
#home-images{margin:0 auto;width:95%;padding-bottom:0;}
#top-middle{border:none;}
.flexFooterCol{width:100% !important;}
.ffCcol4 h4{text-align:center;}
#pi-left{float:none;background:none;border:none;text-align:center;width:97%;}
.addthis_toolbox{width:50%;margin:0 auto;}
.top-specials{display:none;}
#top-inner-wrapper{margin-left:10px;}
#navSuppWrapper{margin:0;border:none;margin-top:80px;}
#mobile-nav1{display:none;}
.ffCcol4 .flexFooterColText{width:43%;margin:0 auto;}
#cur-lan-header{float:left;top:30px;margin-left:10px;}
#cur-lan-header1{float:left;top:30px;margin-left:10px;position:relative;}
.currency_header{width:65%;}
.lang_header{width:20%;}
.content-slider{margin-top:0;}
.view{width:30%;}
.view-tenth h2{font-size:120%;margin:5px 10px 0 10px;}
.view a.info{margin-top:0;}
.menu-collapser{width:10%;float:right;margin-top:-20px;}
ul.slimmenu li .sub-collapser, ul.slimmenu1 li .sub-collapser{background:#000;}
.image_carousel .panel{height:auto !important;}
.addthis_sharing_toolbox {margin-left:37%;padding-bottom:10px;}

#top-middle{padding-top:0;background:none;}
#top-middle .onerow-fluid{border-radius:0;}
.ribbon:before, .ribbon:after, .ribbon1:before, .ribbon1:after, .ribbon2:before, .ribbon2:after{display:none;}
.ribbon1-content:before, .ribbon2-content:after, .ribbon2-content:before{border-width:0;}
.ribbon1 .ribbon1-content:before, .ribbon2 .ribbon2-content:after, .ribbon .ribbon-content:before, .ribbon .ribbon-content:after{border-width:0;}
.ribbon2{width:auto;}
#menu{width:100%;left:0;position:absolute;top:-100px;background:none;margin-top:0;}
#navSuppWrapper{background:none}
#footer-bottom a, #footer-bottom, #siteinfoLegal, #siteinfoLegal a{color:#444;}
ul#col_1, ul#col_2, ul#col_3{margin-left:20px;}
#flex-navSupp .ribbon{width:100%;left:0;}
#custom-tab-text {width:60%;}
i.fa.fa-instagram {}
.tp-hide{display:none;}
#navMainWrapper i:hover{color:#171717;}
.stripe{margin-top:-60px;}
#navMainSearch{top:-10px;z-index:1;}
.menu-shop{margin-left:0;}
.section h4{margin-top:20px;margin-bottom:20px;}

#flex-navSupp .ribbon-content {display:none;}

#navSuppWrapper{background:#1f4f7d;}
#flex-navSupp .onerow-fluid{background:#1f4f7d;border-radius:0;-webkit-border-radius:0;-moz-border-radius:0;}
#flex-navSupp .onerow-fluid a{color:#fff;}
#flex-navSupp .onerow-fluid a:hover{color:#000;}
#siteinfoLegal, #footer-bottom{background:#1f4f7d;color:#fff;}
#siteinfoLegal a, #footer-bottom a{color:#fff;}
#siteinfoLegal a:hover, #footer-bottom a:hover{color:#000;}
#col_3 i{background:#000;}
#pi-right{padding:0;overflow:hidden;padding-bottom:30px;border-left:none;border-right:none;width:100%;}
#productName{text-align:center;}
#productAttributes{margin:10px auto;width:90%;}
ul.slimmenu li > ul, ul.slimmenu1 li > ul{width:auto;}
ul.slimmenu li.aboutus-li ul li{width:auto;}
ul.slimmenu li.customer-service-li ul li{width:auto;}
.a2a_kit.a2a_kit_size_42.a2a_default_style {width:35%;margin:0 auto;}
input.cssButton.submit_button.button.button_in_cart, .button_in_cart:hover{width:40% !important;margin:0 auto;}
#shippingEstimatorContent input[type=text]{width:42% !important;}
#flex-navSupp ul li span {text-align:left;}
.flexFooterCol h4{margin-top:30px;}
.ffCcol4 i{padding:5px;background:#000;}
.ffCcol4 i:hover{padding:5px;background:#fff;color:#000;}
#bannerSix{background:#1f4f7d;}
#flex-navSupp .flexFooterCol.ffCcol1 {left:0;}

}

/* ----------- iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */

}

/* ----------- iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* ----------- iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
}

/* ----------- iPad 3 (portrait) ----------- */
@media
only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media
only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

[wmorris]

This was the only file that messed with until the header was missing:

/**
 * responsive_tablet.css
 *
 * @package templateSystem
 * @copyright Copyright 2003-2007 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * Added by rbarbour (ZCAdditions.com), Responsive DIY Template Default for 1.5.x (65)
 * Modified by Anne (Picaflor-Azul.com) Responsive Sheffield Blue v1.0
 */

/* Breakpoints are the point at which your sites content will respond to, to provide your visitors with the best possible layout to consume the information. */
/* 2.1 by default includes no breakpoints (ie. min-width or max-width) */
/* The orientation media query expression allows us to target specific styles based on the current screen or device orientation. We have 2 expressions; landscape and portrait which allows us to change a pages layout based on the browsers current orientation. */
/* A browser or device determines the orientation by listening to the width and height of the window. If the: */
/* height is larger than the width, the window is in portrait mode. */
/* width is larger than the height, the window is in landscape mode. */


/* 2.1 ALL TABLETS - ORIENTATION:LANDSCAPE */
@media only screen and (orientation:landscape)  {
div#headerWrapper {}
body{margin:0;padding:0;background:none;}
#top-inner-wrapper{margin-left:10px;}
#logo, #tagline{margin-left:10px;}
.ffCcol1{position:relative;left:20px;}
#navSuppWrapper{margin:0;}
#mobile-nav1{display:none;}
#home-images{margin:0 auto;width:99%;}
.image_carousel .panel{height:auto !important;}
.addthis_sharing_toolbox {margin-left:19%;width:80%;overflow:hidden;}

#top-middle{padding-top:0;background:none;}
#top-middle .onerow-fluid{border-radius:0;}
.ribbon:before, .ribbon:after, .ribbon1:before, .ribbon1:after, .ribbon2:before, .ribbon2:after{display:none;}
.ribbon1-content:before, .ribbon2-content:after, .ribbon2-content:before{border-width:0;}
.ribbon1 .ribbon1-content:before, .ribbon2 .ribbon2-content:after, .ribbon .ribbon-content:before, .ribbon .ribbon-content:after{border-width:0;}
.ribbon2{width:auto;}
#menu{width:100%;left:0;}
#navSuppWrapper{background:none;}
#footer-bottom a, #footer-bottom, #siteinfoLegal, #siteinfoLegal a{color:#444;}
ul#col_1, ul#col_2, ul#col_3{margin-left:20px;}
#flex-navSupp .ribbon{width:100%;}
#custom-tab-text {width:60%;}
#bannerSix{background:#fff;}
#cur-lan-header1{display:none;}
ul.slimmenu li .sub-collapser:before, ul.slimmenu1 li .sub-collapser:before{margin-right:0;}
ul.slimmenu li a{padding:12px 20px;}
.centerBoxContentsAlsoPurch, .centerBoxContentsProducts, .centerBoxContentsNew, .centerBoxContentsFeatured, .centerBoxContentsSpecials {width:45% !important;}
#pi-right{padding:20px;}

}

/* 2.1 ALL TABLETS - ORIENTATION:PORTRAIT (DEFAULT LAYOUT) */
@media only screen and (orientation:portrait)  {
div#headerWrapper {margin-bottom:0;}
.onerow-fluid>[class*="col"]{float:none;display:block;width:auto;margin:0;}
img.listingProductImage{max-width:200px;}
#headerWrapper,div#logoWrapper {height:auto;}
#logoWrapper{}
div#logo IMG {clear:both;}
.centerColumn{padding:0 30px;margin-top:0px;border-right:0px solid #dbdbce;border-left::0px solid #dbdbce;}
.cartProductDisplay {text-align:left;padding:5px;}
.cartQuantity INPUT {width:75%!important;}
td.productListing-data INPUT {width:20%!important;}
.leftBoxContainer, .rightBoxContainer {margin:0.5em;}
input[type="text"],input[type="password"],select {width:95%;}
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;}
body {margin:0;padding:0;background:none;}
a#foo2_next, a#foo1_next{right:0;}
#logo, #tagline{margin-left:10px;}
.banner span{font-size:140%;}
#menu{width:100%;margin-top:-165px;}
ul.slimmenu{position:relative;z-index:1000;background:#417db9;}
#navMainWrapper{position:relative;z-index:10;margin-top:-70px;width:75%;float:right;}
#navMainSearch input[type=text]{width:140px;}
.slide-out-div{top:230px !important;}
.ad{max-width:220px;}
#home-text{margin:30px auto 0 auto;width:100%;}
#home-images{margin:0 auto;width:95%;padding-bottom:0;}
#top-middle{border:none;}
.flexFooterCol{width:100% !important;}
.ffCcol4 h4{text-align:center;}
#pi-left{float:none;background:none;border:none;text-align:center;width:97%;}
.addthis_toolbox{width:50%;margin:0 auto;}
.top-specials{display:none;}
#top-inner-wrapper{margin-left:10px;}
#navSuppWrapper{margin:0;border:none;margin-top:80px;}
#mobile-nav1{display:none;}
.ffCcol4 .flexFooterColText{width:43%;margin:0 auto;}
#cur-lan-header{float:left;top:30px;margin-left:10px;}
#cur-lan-header1{float:left;top:30px;margin-left:10px;position:relative;}
.currency_header{width:65%;}
.lang_header{width:20%;}
.content-slider{margin-top:0;}
.view{width:30%;}
.view-tenth h2{font-size:120%;margin:5px 10px 0 10px;}
.view a.info{margin-top:0;}
.menu-collapser{width:10%;float:right;margin-top:-20px;}
ul.slimmenu li .sub-collapser, ul.slimmenu1 li .sub-collapser{background:#000;}
.image_carousel .panel{height:auto !important;}
.addthis_sharing_toolbox {margin-left:37%;padding-bottom:10px;}

#top-middle{padding-top:0;background:none;}
#top-middle .onerow-fluid{border-radius:0;}
.ribbon:before, .ribbon:after, .ribbon1:before, .ribbon1:after, .ribbon2:before, .ribbon2:after{display:none;}
.ribbon1-content:before, .ribbon2-content:after, .ribbon2-content:before{border-width:0;}
.ribbon1 .ribbon1-content:before, .ribbon2 .ribbon2-content:after, .ribbon .ribbon-content:before, .ribbon .ribbon-content:after{border-width:0;}
.ribbon2{width:auto;}
#menu{width:100%;left:0;position:absolute;top:-100px;background:none;margin-top:0;}
#navSuppWrapper{background:none}
#footer-bottom a, #footer-bottom, #siteinfoLegal, #siteinfoLegal a{color:#444;}
ul#col_1, ul#col_2, ul#col_3{margin-left:20px;}
#flex-navSupp .ribbon{width:100%;left:0;}
#custom-tab-text {width:60%;}
i.fa.fa-instagram {}
.tp-hide{display:none;}
#navMainWrapper i:hover{color:#171717;}
.stripe{margin-top:-60px;}
#navMainSearch{top:-10px;z-index:1;}
.menu-shop{margin-left:0;}
.section h4{margin-top:20px;margin-bottom:20px;}

#flex-navSupp .ribbon-content {display:none;}

#navSuppWrapper{background:#1f4f7d;}
#flex-navSupp .onerow-fluid{background:#1f4f7d;border-radius:0;-webkit-border-radius:0;-moz-border-radius:0;}
#flex-navSupp .onerow-fluid a{color:#fff;}
#flex-navSupp .onerow-fluid a:hover{color:#000;}
#siteinfoLegal, #footer-bottom{background:#1f4f7d;color:#fff;}
#siteinfoLegal a, #footer-bottom a{color:#fff;}
#siteinfoLegal a:hover, #footer-bottom a:hover{color:#000;}
#col_3 i{background:#000;}
#pi-right{padding:0;overflow:hidden;padding-bottom:30px;border-left:none;border-right:none;width:100%;}
#productName{text-align:center;}
#productAttributes{margin:10px auto;width:90%;}
ul.slimmenu li > ul, ul.slimmenu1 li > ul{width:auto;}
ul.slimmenu li.aboutus-li ul li{width:auto;}
ul.slimmenu li.customer-service-li ul li{width:auto;}
.a2a_kit.a2a_kit_size_42.a2a_default_style {width:35%;margin:0 auto;}
input.cssButton.submit_button.button.button_in_cart, .button_in_cart:hover{width:40% !important;margin:0 auto;}
#shippingEstimatorContent input[type=text]{width:42% !important;}
#flex-navSupp ul li span {text-align:left;}
.flexFooterCol h4{margin-top:30px;}
.ffCcol4 i{padding:5px;background:#000;}
.ffCcol4 i:hover{padding:5px;background:#fff;color:#000;}
#bannerSix{background:#1f4f7d;}
#flex-navSupp .flexFooterCol.ffCcol1 {left:0;}

}

/* ----------- iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */

}

/* ----------- iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* ----------- iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
}

/* ----------- iPad 3 (portrait) ----------- */
@media
only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media
only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

Ok, I was able to fix the tablet layout. But still No header on the Desktop. You can see it here http://www.morrisgiftshop.biz. You can able see part of the bottom of the logo. I uploaded the original files of CSS's but no change.

[soxophoneplayer]

Don't know what else to suggest since the template, out of the box, does not appear to exhibit that behavior.
and that is what I would expect for you to see if you restored the original template files and restored other core edits that affect the display you have made.

Responsive Sheffield Blue DEMO
http://zenlyzen.com/responsive/index...sheffield_blue

Your out-of-the-box looks quite different from my out-of-the-box. The what's new/featured/specials are diff, also the social app links on the left, and the checkout link on the header. Very nice, btw. Are these mods added after the fact, or update on the template, or? Just curious. Luv this template.

[picaflor-azul]

Hi,
I have installed this fantastic template alon with "fast and easy checkout", but I have a couple of issues.
I am using v154 along with fec, the problems are;
1/title bar, the pages don't drop down when you hover over them
2/the catagories don't expand out to show sub catagories
3/i would like to change the colour but cant see the where in the css file where to go

I have read most of this thread (76 pages but cant see a reply)
here is my web page; http://www.brocante-de-france.com/in..._page=about_us


please help
Regards Paul

It sounds like you either have a javascript conflict or have not installed the fec or css/js loader plugins correctly. Be sure that you have merged the plugin files and template files correctly.

Thanks,

Anne

[wmorris]

I was able to fix the tablet layout from overlapping. But I am still unable to fix the desktop layout on the header. I re-downloaded the template and upload the original files of Stylesheets and still no change. Here is the image of the my header looks like now.

[picaflor-azul]

I am still having a Layout issues with iPad2 why my logo and blue bar is overlapping image below for example:

You can isolate the css for ipads in the responsive_tablet.css stylesheet.

Thanks,

Anne

[picaflor-azul]

I am having this problem too and I have uninstalled the template as I am no longer using it. Any suggestions?

This is a bug that was reported way back in the beginning of the thread. If you look back you should find the temp fix until the updated version is released.

Thanks,

Anne

[picaflor-azul]

Ok, I was able to fix the tablet layout. But still No header on the Desktop. You can see it here http://www.morrisgiftshop.biz. You can able see part of the bottom of the logo. I uploaded the original files of CSS's but no change.

I would recommend putting back on the original stylesheet.css file from the template package and then turning on all of the header elements, etc so that you are starting from something that looks like the demo. Then, make your changes one by one and make any css adjustments as you go.

Thanks,

Anne

[wmorris]

I would recommend putting back on the original stylesheet.css file from the template package and then turning on all of the header elements, etc so that you are starting from something that looks like the demo. Then, make your changes one by one and make any css adjustments as you go.

Thanks,

Anne

Anne, I did that three times no change.