Template Fluorspar

[swguy]

Sure. Make a backup first.

[wmorris]

Sure. Make a backup first.

That did it! Thanks

[wmorris]

Ok, if you look at the website on a iPad/Tablet ether using "Safari, Chrome and/or Firefox" the site isn't responsive. How can I fix it to make it responsive like the menu doesn't have the hamburger like the mobile version?

[wmorris]

Can someone help make the iPad/Tablet responsive? There is no hamburger menu just like the mobile.

[chadlly2003]

wm morris

replace you responsive.css with this.
Also note that that for the mobile menu you have this class .menu-collapser.

There seems to be a script calling for this and hiding it based on a specific media query. (your going to need to locate this and disable it in the script for the dropdown to show on tablet.

/** 
 * Responsive.css for template fluorspar
 *
 * @Generated by Zenofobe Visual Stylesheet on:- 26/01/21  at:- 12:34:49
 * @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)
 */

/* MOBILE LANDSCAPE */
@media (max-width:991px){
#logo {margin-right:0}
#tagline h1{text-align:center}
.floatingBox {width:100%}
#footerImages {display:block}
#social-media, #footer-payments {float:none;display:block;width:95%;margin:0 auto}

.onerow-fluid{width:100%;} 
.onerow-fluid>[class*="col"]{float:none;display:block;width:auto;margin:0;}

#taglineWrapper, #logo {clear:both;width:100%;text-align:center}
#logo {width:80%;margin:0px auto;float:none}
#logoContainer {padding:10px 0}

#checkoutPayment,#checkoutConfirmDefault,#checkoutShipping {overflow:hidden}

#header-lan-curr {margin:0;padding:0;width:100%;margin-bottom:5px}
div#navMainWrapper,div#dropMenu,div#mega-wrapper   {display:none}

#footer-payments {width:90%;float:none;margin:0 auto}
#footer-payments img {display:block; margin: 0 auto}
div.footerColumn {float:none;width:75%;margin:0 auto}
div.footerMenu {border:none;margin:20px auto;min-height:initial}
#customSuppNav .fa-ul {width:42px;margin:0 auto}

#leftProductWrapper {width:100%}
#rightProductWrapper{width:100%}

#productMainImage {text-align:center;width:100%;float:none;margin:0 auto;}
#productAdditionalImages {justify-content:center}
#productImage {display:inline-block;margin:0 auto;clear:both;}

#navSupp {background-color:transparent}
#navSupp ul {display:block}

 img.listingProductImage {width:30%}
.productListing-data img.listingProductImage{width:80%;margin:5px auto}

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 {float:none;width:97%!important;height:auto;margin:0 auto}
.centerBoxContentsNew .productBox, .centerBoxContentsFeatured .productBox, .centerBoxContentsSpecial .productBox {margin-bottom:20px}
div#logo IMG {clear:both;}
.centerColumn{padding:0 0.5em 2.0em 0.5em;}

.leftBoxContainer, .rightBoxContainer {margin:0.5em;}

.centerColumn input[type="email"],.centerColumn input[type="text"],.centerColumn select,.centerColumn input[type="password"] {width:55%;height:30px}
#cartAdd  input[type="text"] {width:60px}

.centerColumn label {width:35%;line-height:26px}
#viewControl select, #productAttributes label, #productAttributes input {width:auto}

#productListing input[type="text"] {width:50px}

div#advSearchDefault.centerColumn fieldset {clear:both;float:none;width:95%;}

div#checkoutBillto, div#checkoutShipto,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;}

/* SHOPPING CART */
table.Main td.cartQuantity {padding-top:0}
.minUnits {display:inline-block;text-align:center;width:auto}
.fixedQuantity {text-align:left;width:100%;float:none;margin:10px 90px 0px 10px;padding:0}
.cartProductDisplay {max-width:none}
span.cartImage,span.cartProdTitle {width:47%!important;text-align:center;font-weight:bold} 
span.cartProdTitle {float:right;font-size:1.1em;line-height:1.1em} 
.rowOdd .cartProdTitle {color:rgb(0,0,0);}
.rowOdd .cartProdTitle:hover {color:rgb(255,0,0);}
.rowEven .cartQuantityTitle,.rowEven .cartTotalDisplayTitle,.rowEven .cartUnitDisplayTitle {color:rgb(58,58,58);}
.rowOdd .cartQuantityTitle,.rowOdd .cartTotalDisplayTitle,.rowOdd .cartUnitDisplayTitle {color:rgb(0,0,255);}
.cartProductDisplay {text-align:left;padding:5px;}
.cartProductDisplay ul {text-align:left;padding:0px;margin:0;}
div.buttonRow {margin:5px}
.cartRemoveItemDisplay img {width:65%!important}
/*.cartRemoveItemDisplay input[type=checkbox] {visibility:hidden}*/
.cartRemoveItemDisplay input[type=checkbox] {  transform: scale(1.5);position:relative;top:5px}
/*#shoppingCartDefault .buttonRow .faUpdate,#shoppingCartDefault .buttonRow input[type="image"]  {display:none}*/ /* Hide update button */
#cartContentsDisplay.Main tr td {font-size:1.2em;display:block;overflow:hidden;width:99%!important}
#cartContentsDisplay.Main tr.tableHeading {display:none}
#cartContentsDisplay.Main img {width:80%;margin:0;padding:0px}
.cartUnitDisplay {float:right;padding:0px 20px 0px 0px}
#cartContentsDisplay.Main tr td.cartUnit {width:45% !important;float:left;padding-top:25px}
#cartContentsDisplay.Main tr td.cartQuantity {width:55% !important;float:right}
#cartSubTotal {padding:20px 3.6em 40px 0px;font-size:1.3em}
.cartTotalDisplayTitle, .cartUnitDisplayTitle {display:inline;float:right;text-align:right;padding:0px 15px 0px 0px}
.cartQuantityTitle {display:inline;float:right;text-align:right;padding:0px 5px 0px 0px;margin:20px 10px 0px 0px}
.cartQuantityUpdate {float:right;padding:10px 30px 0px 0px}
#buttonUpdateAll input[type=image] {width:150%}
#buttonUpdateAll  {margin:20px 40px 20px 0px}
.cartQuantityInput {float:right;height:50px}
.cartQuantityInput input[type=text] {width:50px;height:40px;margin-right:10px;margin-top:2px}
#productListing input[type="text"] {width:50px}
div.cartQuantityUpdate {margin-right:10px}
.cartQuantityUpdate input[type=image] {width:150%;margin-top:5px}
.cartTotalValue {margin:0px 10px 0px 0px}
.cartTotalDisplayTitle {margin:0px 0px 0px 0px!important}
.faUpdateButton {padding-top:12px}
.deleteIcon {padding:0;float:left}
.faUpdateButton i, .deleteIcon i {font-size:35px}

/* Easy Tabs - Set to accordion style */
ul.resp-tabs-list {display: none;}
h2.resp-accordion {display: block;}
.resp-vtabs .resp-tab-content {border: 1px solid #dbdbce;}
.resp-vtabs .resp-tabs-container {border: none;float: none;width: 100%;min-height: initial;clear: none;}
.resp-accordion-closed {display:none !important;}
.resp-vtabs .resp-tab-content:last-child {border-bottom: 1px solid #dbdbce !important;}
/* End of Easy Tabs */

/* Slimmenu */
ul.slimmenu {float:none;width:100%}
#menuContainer {float:none;border:none;box-shadow:none;display:block;margin:0;width:100%;height:50px}
.menuImage{display:inline}
.slimmenu .level2,.slimmenu .level3,.slimmenu .level4 {box-shadow:none;}
.slimmenu .level1  {border:none;border-right:none;display: none;}
.slimmenu {font-size:20px}
ul.slimmenu .level1 a,ul.slimmenu .level2 a {line-height:16px;padding:10px 5px;}
ul.slimmenu .level1 a,ul.slimmenu .level2 a {padding:10px 5px;}
ul.slimmenu ul.level2 li  {width:100%;}
ul.slimmenu li .sub-toggle{width:100%}
/* End of Slimmenu */

}

/* MOBILE PORTRAIT */
@media (max-width:480px){

.cartTotalValue,.cartRemoveItemDisplay {margin-top:15px}
.cartTotalDisplayTitle {padding-top:15px}
.cartUnitDisplay, .cartUnitDisplayTitle {margin-top:10px}
#cartContentsDisplay.Main img {width:40%}
div.cartUnitDisplay {margin-right:65px} 


img.listingProductImage{width:60%;}
#productDetailsList {width:80%;margin:10px auto}
#shippingEstimatorContent table {width:98%;margin:10px auto}
#shippingEstimatorContent {padding:10px 5px}  

#cartAdd  {width:auto;margin:0 auto;}
.button_in_cart {width:80%}
#cartSubTotal {float:none;padding:0;margin:0;text-align:center}

#cartContentsDisplay.Main tr td,#cartContentsDisplay.Main tr td.cartUnit,#cartContentsDisplay.Main tr td.cartQuantity {display:block;overflow:hidden;width:99%!important;margin:0;padding:0}
span.cartImage,span.cartProdTitle  {float:none;width:100% !important;margin:0 auto;text-align:center}
span.cartProdTitle {margin-bottom:5px}

span.cartImage {margin-top:10px}



#tellAFriendDefault legend{max-width:100%}
#shoppingCartDefault div.buttonRow {float:none;width:75%;margin:20px auto}
.button_checkout,.button_continue_shopping  {text-align:center;width:85%}
.buttonRow input[type=submit]{width:100%;margin:20px auto;text-align:center;display:block;}
#checkoutSuccessLogoff .buttonRow {width:100%;text-align:center}
.centerColumn input[type="email"],.centerColumn input[type="text"],.centerColumn select,.centerColumn input[type="password"] {width:87%}
.centerColumn label {width:87%;text-align:left}
.cartQuantityInput input[type=text] {width:50px}
#gridSorter {margin-top:10px}
}

 

/* TABLET LANDSCAPE */
@media (min-width:980px) and (max-width:1199px)
{
#orderhistoryContent .hist_list a {width:72%}
#cartBoxListWrapper a {width:66%}

.cat_image {margin:6px}
.mega-menu .categories-li .dropdown_expand {width:98%}
}

/* DESKTOP */
@media (min-width:1200px){

}


@media (min-width:1200px){
.onerow-fluid{width:1200px;}
}

[wmorris]

wm morris

replace you responsive.css with this.
Also note that that for the mobile menu you have this class .menu-collapser.

There seems to be a script calling for this and hiding it based on a specific media query. (your going to need to locate this and disable it in the script for the dropdown to show on tablet.

/** 
 * Responsive.css for template fluorspar
 *
 * @Generated by Zenofobe Visual Stylesheet on:- 26/01/21  at:- 12:34:49
 * @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)
 */

/* MOBILE LANDSCAPE */
@media (max-width:991px){
#logo {margin-right:0}
#tagline h1{text-align:center}
.floatingBox {width:100%}
#footerImages {display:block}
#social-media, #footer-payments {float:none;display:block;width:95%;margin:0 auto}

.onerow-fluid{width:100%;} 
.onerow-fluid>[class*="col"]{float:none;display:block;width:auto;margin:0;}

#taglineWrapper, #logo {clear:both;width:100%;text-align:center}
#logo {width:80%;margin:0px auto;float:none}
#logoContainer {padding:10px 0}

#checkoutPayment,#checkoutConfirmDefault,#checkoutShipping {overflow:hidden}

#header-lan-curr {margin:0;padding:0;width:100%;margin-bottom:5px}
div#navMainWrapper,div#dropMenu,div#mega-wrapper   {display:none}

#footer-payments {width:90%;float:none;margin:0 auto}
#footer-payments img {display:block; margin: 0 auto}
div.footerColumn {float:none;width:75%;margin:0 auto}
div.footerMenu {border:none;margin:20px auto;min-height:initial}
#customSuppNav .fa-ul {width:42px;margin:0 auto}

#leftProductWrapper {width:100%}
#rightProductWrapper{width:100%}

#productMainImage {text-align:center;width:100%;float:none;margin:0 auto;}
#productAdditionalImages {justify-content:center}
#productImage {display:inline-block;margin:0 auto;clear:both;}

#navSupp {background-color:transparent}
#navSupp ul {display:block}

 img.listingProductImage {width:30%}
.productListing-data img.listingProductImage{width:80%;margin:5px auto}

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 {float:none;width:97%!important;height:auto;margin:0 auto}
.centerBoxContentsNew .productBox, .centerBoxContentsFeatured .productBox, .centerBoxContentsSpecial .productBox {margin-bottom:20px}
div#logo IMG {clear:both;}
.centerColumn{padding:0 0.5em 2.0em 0.5em;}

.leftBoxContainer, .rightBoxContainer {margin:0.5em;}

.centerColumn input[type="email"],.centerColumn input[type="text"],.centerColumn select,.centerColumn input[type="password"] {width:55%;height:30px}
#cartAdd  input[type="text"] {width:60px}

.centerColumn label {width:35%;line-height:26px}
#viewControl select, #productAttributes label, #productAttributes input {width:auto}

#productListing input[type="text"] {width:50px}

div#advSearchDefault.centerColumn fieldset {clear:both;float:none;width:95%;}

div#checkoutBillto, div#checkoutShipto,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;}

/* SHOPPING CART */
table.Main td.cartQuantity {padding-top:0}
.minUnits {display:inline-block;text-align:center;width:auto}
.fixedQuantity {text-align:left;width:100%;float:none;margin:10px 90px 0px 10px;padding:0}
.cartProductDisplay {max-width:none}
span.cartImage,span.cartProdTitle {width:47%!important;text-align:center;font-weight:bold} 
span.cartProdTitle {float:right;font-size:1.1em;line-height:1.1em} 
.rowOdd .cartProdTitle {color:rgb(0,0,0);}
.rowOdd .cartProdTitle:hover {color:rgb(255,0,0);}
.rowEven .cartQuantityTitle,.rowEven .cartTotalDisplayTitle,.rowEven .cartUnitDisplayTitle {color:rgb(58,58,58);}
.rowOdd .cartQuantityTitle,.rowOdd .cartTotalDisplayTitle,.rowOdd .cartUnitDisplayTitle {color:rgb(0,0,255);}
.cartProductDisplay {text-align:left;padding:5px;}
.cartProductDisplay ul {text-align:left;padding:0px;margin:0;}
div.buttonRow {margin:5px}
.cartRemoveItemDisplay img {width:65%!important}
/*.cartRemoveItemDisplay input[type=checkbox] {visibility:hidden}*/
.cartRemoveItemDisplay input[type=checkbox] {  transform: scale(1.5);position:relative;top:5px}
/*#shoppingCartDefault .buttonRow .faUpdate,#shoppingCartDefault .buttonRow input[type="image"]  {display:none}*/ /* Hide update button */
#cartContentsDisplay.Main tr td {font-size:1.2em;display:block;overflow:hidden;width:99%!important}
#cartContentsDisplay.Main tr.tableHeading {display:none}
#cartContentsDisplay.Main img {width:80%;margin:0;padding:0px}
.cartUnitDisplay {float:right;padding:0px 20px 0px 0px}
#cartContentsDisplay.Main tr td.cartUnit {width:45% !important;float:left;padding-top:25px}
#cartContentsDisplay.Main tr td.cartQuantity {width:55% !important;float:right}
#cartSubTotal {padding:20px 3.6em 40px 0px;font-size:1.3em}
.cartTotalDisplayTitle, .cartUnitDisplayTitle {display:inline;float:right;text-align:right;padding:0px 15px 0px 0px}
.cartQuantityTitle {display:inline;float:right;text-align:right;padding:0px 5px 0px 0px;margin:20px 10px 0px 0px}
.cartQuantityUpdate {float:right;padding:10px 30px 0px 0px}
#buttonUpdateAll input[type=image] {width:150%}
#buttonUpdateAll  {margin:20px 40px 20px 0px}
.cartQuantityInput {float:right;height:50px}
.cartQuantityInput input[type=text] {width:50px;height:40px;margin-right:10px;margin-top:2px}
#productListing input[type="text"] {width:50px}
div.cartQuantityUpdate {margin-right:10px}
.cartQuantityUpdate input[type=image] {width:150%;margin-top:5px}
.cartTotalValue {margin:0px 10px 0px 0px}
.cartTotalDisplayTitle {margin:0px 0px 0px 0px!important}
.faUpdateButton {padding-top:12px}
.deleteIcon {padding:0;float:left}
.faUpdateButton i, .deleteIcon i {font-size:35px}

/* Easy Tabs - Set to accordion style */
ul.resp-tabs-list {display: none;}
h2.resp-accordion {display: block;}
.resp-vtabs .resp-tab-content {border: 1px solid #dbdbce;}
.resp-vtabs .resp-tabs-container {border: none;float: none;width: 100%;min-height: initial;clear: none;}
.resp-accordion-closed {display:none !important;}
.resp-vtabs .resp-tab-content:last-child {border-bottom: 1px solid #dbdbce !important;}
/* End of Easy Tabs */

/* Slimmenu */
ul.slimmenu {float:none;width:100%}
#menuContainer {float:none;border:none;box-shadow:none;display:block;margin:0;width:100%;height:50px}
.menuImage{display:inline}
.slimmenu .level2,.slimmenu .level3,.slimmenu .level4 {box-shadow:none;}
.slimmenu .level1  {border:none;border-right:none;display: none;}
.slimmenu {font-size:20px}
ul.slimmenu .level1 a,ul.slimmenu .level2 a {line-height:16px;padding:10px 5px;}
ul.slimmenu .level1 a,ul.slimmenu .level2 a {padding:10px 5px;}
ul.slimmenu ul.level2 li  {width:100%;}
ul.slimmenu li .sub-toggle{width:100%}
/* End of Slimmenu */

}

/* MOBILE PORTRAIT */
@media (max-width:480px){

.cartTotalValue,.cartRemoveItemDisplay {margin-top:15px}
.cartTotalDisplayTitle {padding-top:15px}
.cartUnitDisplay, .cartUnitDisplayTitle {margin-top:10px}
#cartContentsDisplay.Main img {width:40%}
div.cartUnitDisplay {margin-right:65px} 


img.listingProductImage{width:60%;}
#productDetailsList {width:80%;margin:10px auto}
#shippingEstimatorContent table {width:98%;margin:10px auto}
#shippingEstimatorContent {padding:10px 5px}  

#cartAdd  {width:auto;margin:0 auto;}
.button_in_cart {width:80%}
#cartSubTotal {float:none;padding:0;margin:0;text-align:center}

#cartContentsDisplay.Main tr td,#cartContentsDisplay.Main tr td.cartUnit,#cartContentsDisplay.Main tr td.cartQuantity {display:block;overflow:hidden;width:99%!important;margin:0;padding:0}
span.cartImage,span.cartProdTitle  {float:none;width:100% !important;margin:0 auto;text-align:center}
span.cartProdTitle {margin-bottom:5px}

span.cartImage {margin-top:10px}



#tellAFriendDefault legend{max-width:100%}
#shoppingCartDefault div.buttonRow {float:none;width:75%;margin:20px auto}
.button_checkout,.button_continue_shopping  {text-align:center;width:85%}
.buttonRow input[type=submit]{width:100%;margin:20px auto;text-align:center;display:block;}
#checkoutSuccessLogoff .buttonRow {width:100%;text-align:center}
.centerColumn input[type="email"],.centerColumn input[type="text"],.centerColumn select,.centerColumn input[type="password"] {width:87%}
.centerColumn label {width:87%;text-align:left}
.cartQuantityInput input[type=text] {width:50px}
#gridSorter {margin-top:10px}
}

 

/* TABLET LANDSCAPE */
@media (min-width:980px) and (max-width:1199px)
{
#orderhistoryContent .hist_list a {width:72%}
#cartBoxListWrapper a {width:66%}

.cat_image {margin:6px}
.mega-menu .categories-li .dropdown_expand {width:98%}
}

/* DESKTOP */
@media (min-width:1200px){

}


@media (min-width:1200px){
.onerow-fluid{width:1200px;}
}

There is no hamburger menu. Where is it? I replaced the code with above.

[wmorris]

There is no hamburger menu. Where is it? I replaced the code with above.

Nevermind, I got it. I had to re-adjust the screen size on the iPad itself. The screen size was 100% went down to 75% and it's there. Also the all the images are to small how to fix them?

[chadlly2003]

Nevermind, I got it. I had to re-adjust the screen size on the iPad itself. The screen size was 100% went down to 75% and it's there. Also the all the images are to small how to fix them?

Not sure what you mean by size was 100% went down to 75%..

which images are you looking to make larger?

[wmorris]

Not sure what you mean by size was 100% went down to 75%..

which images are you looking to make larger?

Hello Chadly,

What I was talking about is the Safari browser on the iPad the zoom page was set as 100% and there was no hamburger menu til I change the zoom page to 115% and there was the humburger menu.

[wmorris]

Also, how can I make the image bigger in the tablet/iPad version on the What's New module. I am not able to find it in the responsive.css file.