Responsive Sheffield Blue v1.0

[picaflor-azul]

Here is a picture in Firefox.. my screen resolution is 1920x1080..

See how the featured products banner is not formatted right in first pic. and in second pic when I bring the browser into a smaller size it sets up correctly.

Attachment 13134Attachment 13135

When I veiw your site using firebug, When clicking on the div class="col2" I am seeing different css rules than on my demo site. On your site, I see:

.col2 {
    width: 195px;
}
[class*="col"] {
    float: left;
    margin-left: 5px;
}

On my demo site I see:

.onerow-fluid > .col2 {
    width: 18.25%;
}
.onerow-fluid > [class*="col"] {
    float: left;
    margin-left: 0.4167%;
}

I believe this is the problem.

The template is designed to be used with the left and right hand columns. You don't have the right hand column turned on.

The problem had nothing to do with your max screen resolution.

Thanks,

Anne

[brian70809]

When I veiw your site using firebug, When clicking on the div class="col2" I am seeing different css rules than on my demo site. On your site, I see:

.col2 {
    width: 195px;
}
[class*="col"] {
    float: left;
    margin-left: 5px;
}

On my demo site I see:

.onerow-fluid > .col2 {
    width: 18.25%;
}
.onerow-fluid > [class*="col"] {
    float: left;
    margin-left: 0.4167%;
}

I believe this is the problem.

The template is designed to be used with the left and right hand columns. You don't have the right hand column turned on.

The problem had nothing to do with your max screen resolution.

Thanks,

Anne

Hmm.. i do have it turned on in the Layout Settings.. Column Right Status - Global is set to 1 = ON..

I have width at 180 for boxes and Column Width at 185 per instructions..

Where can this be turned off so I can switch it on?

[brian70809]

A temporary Solution..

In the responsive.css file.. its the last section of 1200+ resolution that causing it.. Not sure whats in there yet, but I take it out and it works as it should..

see live site: http://www.goodwoodhardware.com/

Cut this out:

@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:185px;}
.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;}


}

[picaflor-azul]

A temporary Solution..

In the responsive.css file.. its the last section of 1200+ resolution that causing it.. Not sure whats in there yet, but I take it out and it works as it should..

see live site: http://www.goodwoodhardware.com/

Cut this out:

@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:185px;}
.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;}


}

It looks like the template is no longer responsive on the smaller devices.

Thanks,

Anne

[rbarbour]

It looks like the template is no longer responsive on the smaller devices.

Thanks,

Anne

Wasn't there also a fix for ".content"

[picaflor-azul]

Wasn't there also a fix for ".content"

Yes, I posted the fix for this bug earlier in the thread ;)

Thanks,

Anne

[brian70809]

Ok.. I fixed it.. and I am not going to pretend to understand why it works, although I'll put in my thoughts.

in the responsive.css file for some reason.. on my server.. it's not doing the correct overrides or maybe it is..

In the first section of code.. Line 21.. I delete.. it's

.col8{width:635px;}

For some reason, when I was getting to smaller and smaller sizes.. Sub 780px width or so, it was overriding and not doing % for shrinking..

Then on line 262.. I changed the code .col2 from 195px to 164px...
Then on Line 268.. I changed from 795px to 635px...

Attached is complete responsive.css file. Can someone give me some idea as to why i'm getting this quirky stuff. When I download the .css files from the demo site I'm getting the same problems.. I have not changed any code on the main page to cause this.

Thanks!

Brian

.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:164px;}
.col3{width:235px;}
.col4{width:315px;}
.col5{width:395px;}
.col6{width:475px;}
.col7{width:555px;}

.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%;}
#scUnitHeading, .cartUnitDisplay{display:none;}
#shoppingCartDefault .forward, #shoppingCartDefault .back{float:none;}
#cartContentsDisplay{}
#BackToTop{z-index:100000;}
#moduleMenu span a {padding-left:20px;}
.container{width:auto;}
#moduleMenu-wrapper{margin-top:40px;}
#mega-wrapper{display:none;}
#moduleMenu{background:#006da6;background-image:none;}
#footer-header{display:none;}
#footer{background:#1f4f7d;}
body{background:#1f4f7d;}
.sidebar{display:none !important;}
.product_detail{margin-top:30px;}
.box_image{max-width:100px;}
#home-text{word-wrap: break-word;}

}



@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:100px;height:100px;}
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:75%!important;height:auto;text-align:left;margin-left:5%;border-bottom:1px solid #ccc;padding:20px;}
div.centerBoxContentsProducts.centeredContent:hover, div.centerBoxContentsNew.centeredContent:hover, div.categoryListBoxContents.centeredContent:hover, div.centerBoxContentsAlsoPurch.centeredContent:hover, div.centerBoxContentsFeatured.centeredContent:hover, div.centerBoxContentsSpecials.centeredContent:hover, div.specialsListBoxContents:hover, div.categoryListBoxContents:hover {background:#d9e2ea;padding:20px;}
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%;height:20px;}
.mobile-search{padding-left:30px;padding-bottom:30px;padding-top:30px;}
.mobile-search input[type=image]{position:relative;top:20px;}
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;margin-right:20px;}
.m-home{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;}
#mega-wrapper{display:none;}
#moduleMenu{background:#006da6;background-image:none;width:100%;height:40px;margin-left:0px;margin-bottom:20px;}
#moduleMenu span a{margin-left:0px;}
#footer-header{display:none;}
#navSuppWrapper{margin-top:-50px;}
#footer{background:#1f4f7d;}
body{background:#1f4f7d;}
.sidebar{display:none !important;}
.itemTitle, .product_title, .price, .product_detail{float:right;text-align:left;}
.price{margin-top:-90px;}
.pl-price{float:right;text-align:left;margin-top:-50px;}
.product_detail{margin-top:-30px;}
.pl_product_details{float:right;margin-top:-50px;}
#tagline{margin-bottom:0;}
}

@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%;}
.manufacturers-li, .aboutus-li, .customer_service{display:none;}
#mega-wrapper{left:-19px;}
#navMainSearch{top:25px;}
#mega-wrapper li{margin-top:0px;}
.leftBoxHeading{margin-left:-24px;padding-top:3px;}
.rightBoxHeading{margin-right:-15px;padding-top:3px;}
#moduleMenu{margin-left:-12px;}
#footer-header{background:#006da6;width:100%;margin-left:0px;display:none;}
.menuTitle{margin-top:-45px;margin-bottom:10px;}
#navSuppWrapper{border-top:40px solid #006da6;margin-top:-50px;}
#footer{background:#1f4f7d;}
.sidebar{display:none !important;}


}

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

}

@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:164px;}
.col3{width:295px;}
.col4{width:395px;}
.col5{width:495px;}
.col6{width:595px;}
.col7{width:695px;}
.col8{width:635px;}
.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;}


}

[rbarbour]

in the responsive.css file for some reason.. on my server.. it's not doing the correct overrides or maybe it is..

In the first section of code.. Line 21.. I delete.. it's

.col8{width:635px;}

For some reason, when I was getting to smaller and smaller sizes.. Sub 780px width or so, it was overriding and not doing % for shrinking..

Then on line 262.. I changed the code .col2 from 195px to 164px...
Then on Line 268.. I changed from 795px to 635px...

AND I QUOTE:

in the original responsive.css file the px and % fluid calculation are precise to 75px (the code includes 12 div's at 75px to calculate total width) including margins and changing (1) to anything other than - or + 75px or its % equivalent will most definitely break at some point on some devise or screen size.

With an exception of .onerow-fluid (width) to px instead of %

I cannot say this enough -

I spent almost 4 months testing the px and % calculations for the responsive code, their is NO REASON to alter, add to, remove from this part of the responsive.css file.

If something isn't displaying correctly within the media queries provided, add a new media query but do not mess with the px or % of the responsive file.

@brian70809

I used the original responsive.css file (mine) and Anne's responsive file included in this template package and both resulted in a (disrupted) layout on your site.

You have 2 options and neither include altering the responsive.css file. LOL

1.) Back trace through all the files (you altered), mainly anywhere you added DIV's, viewing your HTML source, you have a few closing DIV's </div> showing. Also as stated before (THE FIRST REASON FOR THE RESPONSIVE CODE TO BREAK).

2.) Completely uninstall the template package, remove any other altered php files and start with a fresh copy of the template package

Without access to your files, I cannot trouble shoot or reproduce your results at all in any of my altered and highly customized templates.

[brian70809]

Please accept this apology.. you were correct.. I went through the files.. and I re-uploaded directory by directory to see what it could be..

and it was in the languages/english/responsive_sheffield_blue/header.php

I got rid of the Header_Sales_Text to a just a '' and it through something off.. when i made it a ' '.. it started to work.

define('HEADER_SALES_TEXT', ' ');

Above Works

define('HEADER_SALES_TEXT', '');

This one causes odd formatting

If you would like.. i can remove my posts because they are going to confuse people needlessly...

Site in action http://www.goodwoodhardware.com/

[rbarbour]

Please accept this apology.. you were correct.. I went through the files.. and I re-uploaded directory by directory to see what it could be..

If you would like.. i can remove my posts because they are going to confuse people needlessly...

Site in action http://www.goodwoodhardware.com/

Apology for what, being human. We have all been there, me probably more than others.

I am just glad you figured out what the issue was and now you can do what you should be doing, making money.

No need to remove posts - a good learning tool.

The site looks great, BTW.