Page 81 of 87 FirstFirst ... 31717980818283 ... LastLast
Results 801 to 810 of 865
  1. #801
    Join Date
    Dec 2010
    Posts
    28
    Plugin Contributions
    0

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

    Quote Originally Posted by earmsby View Post
    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:

    Code:
    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:
    Code:
    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

    Code:
    input#submit1.cssButtonHover.button_add_selected.button_add_selectedHover{
        padding: 5px 5px; !important;
    }
    This ";" causes a problem.


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


    Code:
    #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.
    Click image for larger version. 

Name:	chrome.jpg 
Views:	2 
Size:	62.8 KB 
ID:	18849

  2. #802
    Join Date
    Dec 2010
    Posts
    28
    Plugin Contributions
    0

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

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

    Code:
    input#submit1.cssButtonHover.button_add_selected.button_add_selectedHover{
        padding: 5px 5px; !important;
    }
    This ";" causes a problem.

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

    Code:
    #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.
    Click image for larger version. 

Name:	chrome.jpg 
Views:	13 
Size:	62.8 KB 
ID:	18850

  3. #803
    Join Date
    Oct 2006
    Location
    Worcester, MA
    Posts
    386
    Plugin Contributions
    0

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

    Quote Originally Posted by K1979 View Post
    I posted a reply but it doesn't seem to be updated, so I post again.

    Code:
    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)

  4. #804
    Join Date
    Jun 2007
    Location
    Eustis, Florida, USA, EARTH
    Posts
    682
    Plugin Contributions
    0

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

    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?
    ZC v1.5.5f "I was so much older then...I'm younger than that now" Cut the umbilical cord with webhosts after 20 years. FREEDOM!

  5. #805
    Join Date
    Apr 2007
    Location
    Ontario, Canada
    Posts
    1,590
    Plugin Contributions
    19

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

    Quote Originally Posted by pixelpadre View Post
    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
    Twitch.
    http://www.twitchtoo.com - Do you work for free? Please donate.
    Twitch Wholesale + Attributes, ZC 1.38 - 1.56c - Expert Site Migration & Upgrades!

  6. #806
    Join Date
    Jun 2007
    Location
    Eustis, Florida, USA, EARTH
    Posts
    682
    Plugin Contributions
    0

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

    Quote Originally Posted by twitchtoo View Post
    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.
    Last edited by pixelpadre; 13 Mar 2020 at 01:33 PM.
    ZC v1.5.5f "I was so much older then...I'm younger than that now" Cut the umbilical cord with webhosts after 20 years. FREEDOM!

  7. #807
    Join Date
    Apr 2007
    Location
    Ontario, Canada
    Posts
    1,590
    Plugin Contributions
    19

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

    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.
    Twitch.
    http://www.twitchtoo.com - Do you work for free? Please donate.
    Twitch Wholesale + Attributes, ZC 1.38 - 1.56c - Expert Site Migration & Upgrades!

  8. #808
    Join Date
    Jun 2007
    Location
    Eustis, Florida, USA, EARTH
    Posts
    682
    Plugin Contributions
    0

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

    one that works, blackbirdtreetrimmer.com
    one that doesnt blackbirdtreetrimmer.com/estimator
    ZC v1.5.5f "I was so much older then...I'm younger than that now" Cut the umbilical cord with webhosts after 20 years. FREEDOM!

  9. #809
    Join Date
    Apr 2007
    Location
    Ontario, Canada
    Posts
    1,590
    Plugin Contributions
    19

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

    Quote Originally Posted by pixelpadre View Post
    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!
    Twitch.
    http://www.twitchtoo.com - Do you work for free? Please donate.
    Twitch Wholesale + Attributes, ZC 1.38 - 1.56c - Expert Site Migration & Upgrades!

  10. #810
    Join Date
    Apr 2006
    Location
    West Salem, IL
    Posts
    2,570
    Plugin Contributions
    0

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

    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.

    Code:
    <!--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
    Mike
    GeekHost - Zen Cart Certified & PCI Compliant Hosting
    The Zen Cart Forum...Better than a monitor covered with post-it notes!

 

 
Page 81 of 87 FirstFirst ... 31717980818283 ... LastLast

Similar Threads

  1. v155 Support Thread - Responsive Color Changes for 155
    By dbltoe in forum Templates, Stylesheets, Page Layout
    Replies: 94
    Last Post: 25 Jun 2020, 01:00 PM
  2. v151 Tableau Responsive Theme - Support Thread
    By numinix in forum Addon Templates
    Replies: 622
    Last Post: 19 Apr 2020, 11:11 PM
  3. v155 Responsive Classic (built in to Zen Cart v1.5.5) [Support Thread]
    By picaflor-azul in forum Addon Templates
    Replies: 0
    Last Post: 17 Mar 2016, 12:30 AM
  4. v154 Order Steps Responsive [Support Thread]
    By davewest in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 5 Jul 2015, 06:11 PM
  5. Bentley Classic Template Support Thread
    By picaflor-azul in forum Addon Templates
    Replies: 173
    Last Post: 17 Sep 2013, 08:25 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR