Responsive Classic (built in to Zen Cart v1.5.5) [Support Thread]

[K1979]

I'm back with another issue I'm trying to resolve. Lot's of things I like about this template but am finding customizing it to be surprisingly tricky due all the different stylesheets and ways that javascript changes elements. Anyway, on to my current question/problem:

I'm working on resizing a few things in the heading of the product listing (on the desktop view only at this stage). The button for "Add Selected to Cart" was much too big and extended off to the right beyond the right edge of the containing div (note: it goes off the right right when the screen is narrowed a bit. It might not do that if you have a bigger screen resolution but I am on a fairly small sized laptop). It has a lot of padding that seemed a bit extreme to me (30px right and left). I was easily able to add a new css rule to my custom css to decrease that.

But on hover, the button pops back up to the huge size. I can see that this is due to the css in stylesheet_css_buttons.css:

input.submit_button:hover {border:none !important;font-size: 1.2em;display: inline-block;margin:0;padding: 12px 30px 30px 30px !important;}
input.cssButtonHover {border:none;cursor: pointer;border:none;font-size: 1.2em;display: inline-block;margin:0;padding: 12px 30px 30px 30px !important;}

I don't want to completely change this across the board. I'd like to target just this particular button which is causing the problem. My understanding is that you can override an !important rule by creating another rule with !important and greater specificity. So I added a style:

input#submit1.cssButtonHover.button_add_selected.button_add_selectedHover{
    padding: 5px 5px; !important;
}

But when the page renders, my custom style is still overridden by the original rule in stylesheet_css_buttons.css. I've tried multiple different ways to target the button in the hover state and override the !important rule but nothing seems to work.

I checked that my custom stylesheet loads later than stylesheet_css_buttons.css in the header and it appears to do so. Been banging my head on this for quite a while now.

Here's a link to the page I'm describing: http://subitomusic.com/testing_estor...dex&cPath=1_13

input#submit1.cssButtonHover.button_add_selected.button_add_selectedHover{
    padding: 5px 5px; !important;
}

This ";" causes a problem.

input#submit1.cssButtonHover.button_add_selected.button_add_selectedHover{
    padding: 5px 5px !important;
}

It will work.

#submit1.cssButtonHover {
    padding: 5px !important;
}

And this might be OK.

If you use Google Chrome, DevTools will help you to find which CSS class you need to override.

[K1979]

I posted a reply but it doesn't seem to be updated, so I post again.

input#submit1.cssButtonHover.button_add_selected.button_add_selectedHover{
    padding: 5px 5px; !important;
}

This ";" causes a problem.

input#submit1.cssButtonHover.button_add_selected.button_add_selectedHover{
    padding: 5px 5px !important;
}

It will work.

#submit1.cssButtonHover {
    padding: 5px !important;
}

And it may be OK.

If you use Google Chrome, DEVtools will help you to find which css class you need to override.

[earmsby]

I posted a reply but it doesn't seem to be updated, so I post again.

input#submit1.cssButtonHover.button_add_selected.button_add_selectedHover{
    padding: 5px 5px; !important;
}

This ";" causes a problem.

Thank you! (Boy do I feel like an idiot - I should have spotted that issue)

[pixelpadre]

FYI responsive has issues with hamburger not appearing in desktop chrome, ff, edge and IE while inspecting elements in responsive design mode.

Nobody ever notice this?

[twitchtoo]

FYI responsive has issues with hamburger not appearing in desktop chrome, ff, edge and IE while inspecting elements in responsive design mode.

Nobody ever notice this?

This does happen on first page load when the responsive emulator hasn't selected the phone type in mobile design mode. It hasn't happened recently while inspecting for me - as long as I've reloaded the page with the phone type set - however it did in the past and was related to java not running as it should on the fly while inspecting.

Is this happening on all sites you inspect?

Things get ugly looking in the inspector here:

https://twitchtoo.com/tR_codeSHOP/

- until you reload and find the red chevron that replaces the hamburger then everything works as it should.

Current fix:
- load webpage
- load responsive design mode
- click refresh or F5 in FireFox
- get back to work

[pixelpadre]

This does happen on first page load when the responsive emulator hasn't selected the phone type in mobile design mode. It hasn't happened recently while inspecting for me - as long as I've reloaded the page with the phone type set - however it did in the past and was related to java not running as it should on the fly while inspecting.

Is this happening on all sites you inspect?

Things get ugly looking in the inspector here:

https://twitchtoo.com/tR_codeSHOP/

- until you reload and find the red chevron that replaces the hamburger then everything works as it should. screenshot

Current fix:
- load webpage
- load responsive design mode
- click refresh or F5 in FireFox
- get back to work

Does not happen to my other non-zencart websites. Refresh makes no difference. twitchoo also not working in any desktop browser.

[twitchtoo]

pixelpadre if you could pm or post the site(s) I can look a little deeper. One that works for you, one that doesn't would be great.

[pixelpadre]

one that works, blackbirdtreetrimmer.com
one that doesnt blackbirdtreetrimmer.com/estimator

[twitchtoo]

one that works, blackbirdtreetrimmer.com
one that doesnt blackbirdtreetrimmer.com/estimator

Thanks - I am able to recreate the problem you are having with Edge. I'll do some testing and report back!

[barco57]

comparing apples to oranges pixelpadre...
Your one example page is a bootstrap html page and bootstrap is reponsive by default (no need to switch to the inspector to set device type, just resize browser) whereas the responsive classic requires device detection to determine if it is being displayed on a tablet/mobile device. Once a tablet/mobile device is detected it then different code is presented to the browser.

<!--bof navigation display-->
<div id="navMainWrapper" class="group onerow-fluid">
<?php 
 if ( $detect->isMobile() && !$detect->isTablet() || $_SESSION['layoutType'] == 'mobile' ) {
echo '<div class="header Fixed"><a href="#menu" title="Menu"><i class="fa fa-bars"></i></a></div>';
 } else if ( $detect->isTablet() || $_SESSION['layoutType'] == 'tablet' ){
echo '<div class="header Fixed"><a href="#menu" title="Menu"><i class="fa fa-bars"></i></a></div>';
} else { 
//
}
?>

I had no issues in any of the browsers see the bars in a mobile view, once I made sure I had "switched" device views, which in edge required going to the emulation tab and picking a mobile device