Responsive Sheffield Blue v2.0

[Mandeep]

Hi I double checked all those steps. These error came in if some one open website on mobile.
Regards

[gunni]

No, I would need to do research about this. I am sorry, but I don't have the free time to devote to this right now.

Thanks,

Anne

Thanks Anne,
My question is general - is it possible for a beginner to make your template to be Accessible as I mentioned before (button for font size,
button for color change etc') or that your template was not prepared for this and it is better to wait for a ready template ?

[augiespanoramas]

Hi, I found an issue in my mobile version of my website. When loading the website on a mobile device, my featured images on my main page will not display any larger than 200px in width. I cannot find where in the settings this is able to be changed. My website is augiespanoramas(dot)com.
In Chrome on my desktop, I can replicate this issue using "Chrome UA Spoofer" but only when the width of my browser window is 980 pixels or less. I can't find this setting either. I am assuming it's Portrait settings in
/includes/templates/responsive_sheffield_blue/css/responsive_mobile.css but no matter what I do, nothing is changing. I am attaching this file, please help me!

/* 2.0 ALL MOBILE PHONES - ORIENTATION:PORTRAIT */
@media only screen and (orientation:portrait) {
div#headerWrapper {margin-bottom:0;}
.onerow-fluid>[class*="col"]{float:none;display:block;width:98%;margin:0;}

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:98%!important;height:auto;min-height:0;}
div#logo IMG {clear:both;}
.centerColumn{padding:0 0.5em 2.0em 0.5em;border:none;border-bottom:1px solid #dbdbce;margin-top:-13px;}
table#cartContentsDisplay input[type="image"] {width:12px;height:12px;}
.cartProductDisplay {text-align:left;padding:5px;}
td.productListing-data INPUT {width:20%!important;}
div#checkoutShipto IMG,div#checkoutBillto IMG {width:12px;height:12px;}
div#checkoutBillto, div#checkoutShipto,div.floatingBox{font-size:12px;}
.leftBoxContainer, .rightBoxContainer {margin:0.5em;}
input[type="text"],input[type="password"],select {width:100%;}
div#advSearchDefault.centerColumn fieldset {clear:both;float:none;width:95%;}
.cartProductDisplay IMG,span#cartImage.back {width:40px;float:left;}
.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;}
#logoWrapper{float:none;width:100%;border-bottom:1px solid #dbdbce;padding-bottom:20px;}
#logo{float:none;text-align:center;margin-top:20px;margin-left:0;}
#tagline{text-align:center;margin-top:0;margin-left:0;}
#top-wrapper{text-align:center;font-size:120%;}
#menu{margin-top:-130px;width:98%;}
#header-cart{float:right;font-size:170%;padding-bottom:10px;}
#navMainSearch{float:left;width:53%;border:1px solid #000;display:none;}
#top-middle{padding-bottom:0;border-bottom:none;}
#mobile-nav{background:#f4f4f4;padding:10px 10px 0 10px;border-bottom:1px solid #dbdbce;}
#mobile-nav i{font-size:180%;margin-right:30px;color:#666;margin-top:10px;}
#mobile-nav i:hover{color:#171717;}
.banner span{font-size:100%;}
.ad{margin:0 auto 20px auto;}
a#foo2_next, a#foo1_next {right:0;}
.flexFooterCol{width:100% !important;}
.slide-out-div{display:none;}
ul.slimmenu{position:relative;z-index:1000;background:#1f4f7d;}
#BackToTop{top:500px;}
.navSplitPagesResults{text-align:center;float:none;}
#productListing .back, #productListing .forward{float:none;text-align:center;}
.navSplitPagesLinks{text-align:center;}
#productsListingBottomNumber{margin-bottom:20px;}
.box_image{text-align:center !important;}
#siteinfoLegal{line-height:22px;}
#pi-left, #pi-right{float:none;}
#pi-left{width:90%;margin:0 auto;display:table;}
#pi-right{width:78%;margin:20px auto 0 auto;display:table;}
#productName{text-align:center;line-height:25px;}
.custom-tab-image, #custom-tab-text{float:none;}
#custom-tab-text{width:100%;margin-top:20px;}
.custom-tab-image{text-align:center;margin:0 auto;}
.centerBoxContentsAlsoPurch{float:none;width:95% !important;}
#cartContentsDisplay tr td {display: block;overflow: hidden;text-align: left !important;width: 100% !important;}
#cartContentsDisplay tr td.cartUnitDisplay {width: 10.2564%;}
#cartContentsDisplay tr td {padding-bottom: 8px;padding-top: 8px;}
#cartContentsDisplay tr td {-moz-box-sizing: border-box;color: #2E3233;font-size: 14px;vertical-align: middle;}
tr.tableHeading{display:none;}
.mobile-only{display:block;color:#000;font-weight:bold;}
.buttonRow{width:100% !important;}
#shoppingCartDefault .forward, #shoppingCartDefault .back{float:none;width:100%;}
.shop-help{display:none;}
#cartContentsDisplay .cartRemoveItemDisplay{margin-bottom:10px;}
#cartContentsDisplay .cartQuantity br{display:none;}
.cart-products{}
#cartContentsDisplay .cartQuantity-mobile input[type=text]{width:35px;}
#cartContentsDisplay .cartUnitDisplay, #cartContentsDisplay .cartTotalDisplay, #cartContentsDisplay .cartQuantity-mobile{padding-left:85px;}
#cartContentsDisplay td{border-bottom:none;}
.qty-btns{width:80px;margin-top:10px;}
.qty-btns img{float:right;vertical-align:middle;}
.qty-btns input[type=image]{height:21px;float:left;margin-top:-5px;}
.rowEven{background: #f4f4f4;}
#cartContentsDisplay .cartTotalDisplay{padding-bottom:15px;}
.cartTotalsDisplay{font-size:95%;}
.checkout {margin-top:-10px;width:100%;}
.checkout span.button_checkout{padding-left:90px;padding-right:90px;margin:0 auto;}
.con-shop span.button_continue_shopping, .ship-est span.button_shipping_estimator{padding-left:53px;padding-right:53px;}
.ship-est{margin-top:-20px;}
#country, #stateZone{width:95%;}
#shippingEstimatorContent .button_update{float:none;width:95% !important;margin-top:30px;}
fieldset{border:none;border-bottom:1px solid #dbdbce;padding:5px;padding-bottom:20px;}
legend{border:none;font-size:130%;margin-left:0;margin-bottom:0;padding:0;color:#1f4f7d;background:none;line-height:25px;}
#loginDefault .forward, #loginDefault .back{float:none;}
#loginDefault .button_login, #loginDefault .button_submit{width:90% !important;margin-left:0;height:45px;}
#loginDefault input[type=text], #loginDefault select, #loginDefault input[type=password]{width:88%;}
.alert{position:relative;}
.contact-left, .contact-right{float:none;width:100%;}
#contactUsDefault input[type=submit]{width:95% !important;margin:35px auto 0 20px;position:relative;left:20px;}
.button_back{padding-left:105px;padding-right:105px;margin-left:20px;display:none;}
.buttonRow{width:100%;text-align:center;}
.buttonRow input[type=submit]{width:100% !important;margin:0 auto;text-align:center;display:block;height:50px !important;margin-left:10px;}
#prevOrders{display:none;}
#accountDefault p.forward{font-size:140%;text-transform:uppercase;float:none;text-align:left;margin-top:30px;}
#accountDefault p.forward a:hover{color:#8c9bfb;}
#accountLinksWrapper{margin-top:-20px;}
#accountHistoryDefault .forward{}
#addressBookDefault .button_add_address{padding-left:80px;padding-right:80px;}
#addressBookDefault address{float:none;}
ul.slimmenu.collapsed li ul.level2 li ul, ul.slimmenu1.collapsed li ul.level2 li ul{margin-left:-40px;}
#checkoutPayment .floatingBox, #checkoutShipping .floatingBox{float:none;width:100%;}
#checkoutConfirmDefault tr.cartTableHeading{display:none;}
.ad{margin:30px auto 0 auto;display:block;}
#home-text{width:100%;}
.carouselImage img{width:1024px !important;height:auto;}
.review-write-left, .review-write-right, .all-reviews-left, .all-reviews-right{float:none;clear:both;width:100%;}
.review-write-right{margin-top:80px;}
.review-write-left{text-align:center;}
#reviewWriteMainImage{float:none;}
.all-reviews-right{border:none;margin-top:80px;padding-left:0;}
.button_write_review{padding-left:85px;padding-right:85px;display:block;margin:0 auto;}
#reviewsDefault .button_goto_prod_details{padding-left:20px;padding-right:20px;display:block;margin:0 auto;}
#productReviewsDefaultProductImage{float:none;clear:both;display:block;}
#reviewsWrite .button_goto_prod_details{padding-left:90px;padding-right:90px;display:block;margin:0 auto;}
.button_reviews{padding-left:40px;padding-right:40px;}
.reviews-details{width:100%;}
#mobile-nav1{display:none;}
#cur-lan-header{float:left;width:55%;top:10px;z-index:11;}
#lang-header{text-align:left;margin-left:20px;}
.view{float:none;width:270px;margin:0 auto 20px auto;}
#home-images{width:90%;height:auto;}
.view .mask{height:213px;}
.menu-collapser{margin-top:20px;float:right;width:20%;}
#navSuppWrapper{border:none;margin-top:-30px;}
#top-banner{display:none;}
.content-slider{margin-top:0;width:100%;margin-right:0;}
#mobile-nav-left{width:50%;float:left;margin-top:-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:-23px;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{display:none;}
#navMainSearch{top:-10px;}
.menu-shop{margin-left:0;}
.section h4{margin-top:20px;margin-bottom:20px;}
#flex-navSupp .ribbon-content {display:none;}
#navSuppWrapper{background:#1f4f7d;margin-top:80px;}
#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;margin-top:20px;}
#col_3 i:hover{background:#fff;color:#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:70%;margin:0 auto;}
input.cssButton.submit_button.button.button_in_cart, .button_in_cart:hover{width:60% !important;margin:0 auto;}
#shippingEstimatorContent input[type=text]{width:42% !important;}
#navMainWrapper{margin-top:-20px;}
ul.slimmenu.collapsed li .sub-collapser, ul.slimmenu1.collapsed li .sub-collapser{background:#000;}
.mega-about{width:100%;float:none;clear:both;}
.aboutus-image{display:none;}
.cartProductDisplay{padding:0;}
.cartAttribsList, #cartContentsDisplay .cartRemoveItemDisplay, #cartContentsDisplay .cartUnitDisplay, #cartContentsDisplay .cartTotalDisplay, #cartContentsDisplay .cartQuantity-mobile, #cartContentsDisplay .cartQuantity, #cartContentsDisplay .cartQuantityUpdate{padding-left:0;width:19% !important;float:left;text-align:center !important;}
td.cartQuantityUpdate, td.cartRemoveItemDisplay {margin-top:30px;}
td.cartTotalDisplay .mobile-only, td.cartUnitDisplay .mobile-only{display:block;margin-bottom:10px;}
.button_checkout{width:88% !important;}
#checkoutConfirmDefault span.cssButton.normal_button.button.small_edit , #checkoutConfirmDefault .small_edit:hover{display:block;margin-bottom:10px;margin-left:10px;width:25%;}
span.cssButton.normal_button.button.button_logoff, .button_logoff:hover{display:block;margin-left:10px;} 
#header-nav{background:#1f4f7d;height:45px;}
#flex-navSupp ul li span{text-align:left;}
.itemTitle {min-height:0;}
.pl-price{margin-bottom:0;}
#productDetailsList{width:100% !important;}
.buttonRow{margin-left:0;}
.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;}

}

actually, i found more issues with my mobile portrait CSS. The menu icon was pushed down further than it was and when opening the menu, the text is white on a white background. None of the changes I'm making are applying, it's almost like these options are being controlled by some rogue css file. Is there a way to narrow down where these settings are coming from specifically?

[augiespanoramas]

actually, i found more issues with my mobile portrait CSS. The menu icon was pushed down further than it was and when opening the menu, the text is white on a white background. None of the changes I'm making are applying, it's almost like these options are being controlled by some rogue css file. Is there a way to narrow down where these settings are coming from specifically?

I fixed most of my other mobile-related issues by finding settings in stylesheet.css but the featured images width on my main page is still doing whatever it wants. I did figure out that it is definitely a "portrait" issue, because once I reduce my browser window width under 930px, this is when the featured images reduce to 200px width and auto height. I changed the height of my browser to 800px, and this doesnt happen to the featured images until i reduce the width of my browser under 800px. So definitely something "portrait" mode related, I just can't find the darn setting anywhere! augiespanoramas(dot)com

[carlwhat]

check out:

stylesheet_flex.css

you can see what css elements are applying to your page by using the developer tools. in chrome (https://developer.chrome.com/devtools) or firefox (https://developer.mozilla.org/en-US/docs/Tools)

good luck!

[augiespanoramas]

check out:

stylesheet_flex.css

you can see what css elements are applying to your page by using the developer tools. in chrome (https://developer.chrome.com/devtools) or firefox (https://developer.mozilla.org/en-US/docs/Tools)

good luck!

Nothing in stylesheet_flex.css that was useful (I dont think)
I have been heavily depending on Chrome Developer Tools as I've been editing my CSS files, I just can't figure out this one thing! See screenshot that I attached. For some reason, it is receiving a width="200" and height="67". The height seems to be adjusting as it's set to auto all over the place, but I cannot find where this 200px number is coming from. img[Attributes Style] {width: 200px;} ???!!!

[carlwhat]

ok, it looks like jquery is manipulating your images. so you need to look at the .js files. jquery is a javascipt library. https://jquery.com/

the files are within the template jscript folder.

with the developer tools open, if you look at your site on an iphone, and turn off javascript from the settings menu in dev tools, and then refresh the page, you will see something very different than with javascript enabled. so one of the files within that jscript folder is manipulating your page to give you what you are seeing.

jquery is great and very powerful in manipulation, but there is a bit of a learning curve to it. it's similar to css in that it makes use of selectors, but then can add or manipulate items.

have fun!

[soxophoneplayer]

I fixed most of my other mobile-related issues by finding settings in stylesheet.css but the featured images width on my main page is still doing whatever it wants. I did figure out that it is definitely a "portrait" issue, because once I reduce my browser window width under 930px, this is when the featured images reduce to 200px width and auto height. I changed the height of my browser to 800px, and this doesnt happen to the featured images until i reduce the width of my browser under 800px. So definitely something "portrait" mode related, I just can't find the darn setting anywhere! augiespanoramas(dot)com

Were you using a different template prior to this one? I had similar issue with featured products - turned out there was a switch turned on by old template (Winchester Black Responsive in my case ) in the database that remained and interfered with this template. I turned it off directly via phpMyAdmin.

[sw1138lr]

Below is how to fix the Category Boxes so they line up. You only need to add 1 line of code to the CSS for the height. It's better than white space being displayed due to different lengths in descriptions.

Find the below code in \includes\templates\responsive_sheffield_blue\css\stylesheet.php

/*bof category*/
#categoryDescription{margin:15px 0 30px 0;font-size:100%;}
.categoryListBoxContents img{margin-bottom:20px;}

Add the line with height:150px to your code. It is around line 387. You can adjust the 150 to your needs.

/*bof category*/
#categoryDescription{margin:15px 0 30px 0;font-size:100%;}
.categoryListBoxContents {height:150px;}
.categoryListBoxContents img{margin-bottom:20px;}

[sw1138lr]

Need help with the Navigation buttons and the product overlaying the Navigation buttons. This only occurs when you perform an "Advanced Search" and and you go the the second page of the results. See below screen print print.