Sure. Make a backup first.
Printable View
Sure. Make a backup first.
That did it! ThanksQuote:
Originally Posted by swguy
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?
Can someone help make the iPad/Tablet responsive? There is no hamburger menu just like the mobile.
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.
Code:/**
* 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.Quote:
Originally Posted by 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?Quote:
Originally Posted by wmorris
Not sure what you mean by size was 100% went down to 75%..Quote:
Originally Posted by wmorris
which images are you looking to make larger?
Hello Chadly,Quote:
Originally Posted by chadlly2003
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.
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.