Help! Menu and Main page content won't show in Mobile View

[Green Books]

Hi,

There are several problems in my website's mobile view:

1. Weird display problem
Main page won't show in Mobile View when the mobile is in portrait mode, but it displays like normal in landscape mode. I tried to view the settings in Admin > Configuration > Layout settings but none of them seems to be related.

I also tried to change the number of @media (max-width: ??px) in includes/templates/elegancer_pink/css/responsive_theme.css but it won't help too.




2. Two of the Top Nav buttons' not working
*a. Dropdown Menu won't show in Mobile View, can't even click on the button
*b. Nothing happened when I click on the shopping cart button



In the original purchased site's DEMO, you can see how the Dropdown Menu button & Shopping Cart button should work normally:



---------------------------------
* Zen Cart Version: v151
* PHP Version: 5.4.45
* Site URL: http://www.brightenbooks.com.hk/

* Original purchased Site's Demo: Go to
http://demo.zen-cart-themes.com/ and pick 'Elegance Responsive' for Template Demo

[balihr]

Could be related to the fact you're loading your css and javascript files twice. Check your includes/templates/elegancer_pink/common/html_header.php and see if it's different than the one provided in your template. Remove the second instance of the css/js loading and try again, maybe it'll help.

However, with this being a VERY old version of Zen Cart (which you really should upgrade) and a commercial template which probably nobody here knows anything about and how it was built, you're not very likely to get much support here...

[Green Books]

Could be related to the fact you're loading your css and javascript files twice. Check your includes/templates/elegancer_pink/common/html_header.php and see if it's different than the one provided in your template. Remove the second instance of the css/js loading and try again, maybe it'll help.

However, with this being a VERY old version of Zen Cart (which you really should upgrade) and a commercial template which probably nobody here knows anything about and how it was built, you're not very likely to get much support here...

Thank you so much for your help! I tried to replace the html_header.php with the oldest copy I have. And it works!

Problem 2 is now solved, would be really appreciated if any of you could raise ideas or solutions for problem 1 - the weird display problem. Thanks.

[balihr]

So...
includes/templates/elegancer_pink/css/responsive_theme.css on line 67 says

@media (max-width: 480px)
.button_return_to_product_list, .carousel-box {
    display: none;
}

Since all other content on your home page is hidden and you're only showing carousels, and the css command says to hide the carousels on screen size smaller than 481px, there's nothing left to show. You can either remove .carousel-box from that line (but keep in mind it will affect all other pages on that screen size) OR you can create a new css file called index_home.css and add the following command:

@media (max-width: 480px)
.carousel-box {
    display: block !important;
}

Either way, make sure you reload (CTRL+F5) after you make your changes.

[Green Books]

Thanks a lot for your life-saving hints! I replaced the code on line 67 with this:

.button_return_to_product_list {display: none;}
.carousel-box {display: block !important;}

And now the carousel boxes do appear on the homepage in Mobile view!