Claudia M Posted August 25, 2021 Share Posted August 25, 2021 I just got a new phone and was looking at my webstore on it. If I hold it the tall way everything looks fine, but if I flip it to show wide the menu I created shows before the featured categories and products though I have it to show on medium-up and have the menu on left canvas for small screens. Here is some of my code on my main template. <div class="row {$SECTION_NAME}_wrapper brd1 marg-bottom"> <div class="large-3 columns show-for-medium-up marg-bottom" id="sidebar_left"> <div class="menu-maintitle">Shop by Category</div> <div class="menu-main-div"><a class="menu-main-ebay-txt" href="/listed-only-on-ebay.html">Listed only on eBay</a></div> <div class="menu-main-div"><a class="menu-main-etsy-txt" href="/listed-only-on-etsy.html">Listed only on Etsy</a></div> <div class="menu-main-div"><a class="menu-main-link-txt" href="/ashtrays.html">Ashtrays </a><span class="menu-main-link-char right thinpad-right"> ▶</span></div> <div class="menu-main-div"><a class="menu-main-txt" href="/beer-and-liquor-bottles.html">Beer and Liquor</a></div> <div class="menu-main-div"><a class="menu-main-txt" href="/books-catalogs-and-manuals.html">Books, Catalogs and Manuals</a></div> <div class="menu-main-div"><a class="menu-main-link-txt" href="/bottles-jars-and-jugs.html">Bottles and Jugs<span class="menu-main-link-char right thinpad-right"> ▶</span></div> <div class="menu-main-div"><a class="menu-main-txt" href="/boxes-crates-and-drawers.html">Boxes, Crates and Drawers</a></div> <div class="menu-main-div"><a class="menu-main-txt" href="/boxes-cigar.html">Boxes - Cigar</a></div> </div> <div class="small-12 large-9 columns" id="main_content"> <div class="row collapse"> <div class="small-12 columns small-collapse"> {include file='templates/element.breadcrumb.php'} </div> </div> Thanks for any and all help Link to comment Share on other sites More sharing options...
bsmither Posted August 25, 2021 Share Posted August 25, 2021 Generally, the switch overs (small to medium to large) happen at 640 pixels and 1024 pixels wide. Your phone is probably wider than 640 pixels in "landscape" orientation. Link to comment Share on other sites More sharing options...
Claudia M Posted August 25, 2021 Author Share Posted August 25, 2021 I was messing around with it and changed all my show-for-medium-up to show-for-large-up on the main template. And changed this <div class="off-canvas-wrap" data-offcanvas reveal-for-medium> <div class="inner-wrap"> {include file='templates/box.off_canvas.left.php'} {include file='templates/box.eu_cookie.php'} and I changed this: </div> <div class="small-6 columns show-for-medium-down pad-top"> <div class="show-for-medium-down"><a class="left-off-canvas-toggle button white small" href="#"><svg class="icon icon-x2"><use xlink:href="#icon-bars"></use></svg><span class="large14"><br />Categories <br /> Account <br /> Register</span></a></div> </div> Do you think this is ok? Link to comment Share on other sites More sharing options...
bsmither Posted August 25, 2021 Share Posted August 25, 2021 Would you please summarize where and what you want to show in small, medium, and large. Also, be aware that there are also display rules for whether the device is in portrait (taller than width) or landscape (wider than height) orientation. Link to comment Share on other sites More sharing options...
Claudia M Posted August 26, 2021 Author Share Posted August 26, 2021 Everything seems to working the way I want on my old phone (smaller) and new phone both portrait and landscape. When I click on the hamburger ( on the small and medium display) the left canvas opens revealing the menu, account info, and login and register. When I click on a category the category opens and the left canvas hides. I don't use the right canvas as I have the shopping basket showing all the time at the top. I haven't checked it on a tablet yet. I'm just not sure if there is a better way to code everything I've done. It's weird having to treat my new phone as a medium display due to the landscape orientation. If you get time will you check it out on your displays please? http://www.claudiasbargains.com Link to comment Share on other sites More sharing options...
Claudia M Posted August 26, 2021 Author Share Posted August 26, 2021 I've checked this on a tablet and it works fine in Firefox. If I use Chrome and add a product to the basket then click "view basket" it tells me my basket is empty - doesn't add the product. Link to comment Share on other sites More sharing options...
Claudia M Posted August 26, 2021 Author Share Posted August 26, 2021 Nevermind ... It's working now Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.