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.