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

Tried adding 20px in responsive_mobile.css on line 448 (#navMain{width:70%;float:right;position:fixed;right:20px;top:-5px;z-index:2;})
AND I tried adding padding-right:20px; as well but both versions moved the headers left which is good, BUT it still forced the checkout **Tick **to be Under the shopping cart icon and the shopping cart icon seems to have been cut off?!
https://i.imgur.com/boiw1eC.jpg
I'm sure there's a very easy fix for this but it still eludes me!

Good reading at https://css-tricks.com/almanac/properties/b/box-sizing/

lat9:

See this (https://vinosdefrutastropicales.com/index.php?main_page=article&p=26) article that identifies the built-in Zen Cart banner locations. It sounds like you're "looking for" content in Header Position 1.

Hi Cindy, thanks again for your easy to read link/image with the banner positions.
I just need to show a different Header and Footer at the same time!
Now the wide-banners display randomly, but I would like to set a wide-banner for Header 1 that always displays on Top and set a DIFFERENT wide-banner for Footer 2 that always displays at the bottom.
How can I do that please?

dbltoe:

Good reading at https://css-tricks.com/almanac/properties/b/box-sizing/

Thank you for that link, I read that but couldn't figure what I need to do.
I'm assuming the border-box is forcing all those icons to show in there, I went to (jquery.mmenu.all.css) and changed border-box to padding-box, it made no difference?!
The problem I cannot seem to find a way to test my sire on firefox to inspect the css on that SMALL size, firefox smallest shrink is still bigger than my phone so it shows well on there.
This is quiet annoying and I can't see how this isn't effecting many more zen cart users who use this template as it will happen to all their sites on regular screen phones.

rlexyd:

Hi Cindy, thanks again for your easy to read link/image with the banner positions.
I just need to show a different Header and Footer at the same time!
Now the wide-banners display randomly, but I would like to set a wide-banner for Header 1 that always displays on Top and set a DIFFERENT wide-banner for Footer 2 that always displays at the bottom.
How can I do that please?

Just figured it out with this link I think:
https://docs.zen-cart.com/user/admin_pages/tools/banner_manager/
Than went to Banner Manager in admin, entered a new Banner Group names for both banners and set them in Admin > Configuration > Layout Settings to match.
Banner Display Groups - Header Position 1: BanWHeadPos1
Banner Display Groups - Footer Position 2: BanWFootPos2

rlexyd:

Tried adding 20px in responsive_mobile.css on line 448 (#navMain{width:70%;float:right;position:fixed;right:20px;top:-5px;z-index:2;})
AND I tried adding padding-right:20px; as well but both versions moved the headers left which is good, BUT it still forced the checkout **Tick **to be Under the shopping cart icon and the shopping cart icon seems to have been cut off?!
https://i.imgur.com/boiw1eC.jpg
I'm sure there's a very easy fix for this but it still eludes me!

Finally figured it out after two weeks of trying.
Changed line 238 in responsive_mobile.css under (ORIENTATION:PORTRAIT) from #navMain ul{float:right;width:100%;} to #navMain ul{float:right;width:120%;}.
Now all the icons on top fit correctly in the box.
Not sure if this was the correct method to do it and I'm not sure if doing it this way will stuff something else up but that's all I can figure out.

janks:

It has been a while since you asked about this - but I had the same issue to which I have found a solution.

The display only affects the buttons that are using an input tag. Where as buttons utilising a span, render the css correctly.
Researching this, I found Apple have a built in function in safari to style the input button according to 'Apple standard'. :blink:

To fix this add the follow property to the stylesheet_css_buttons.css file in your css directory of your template.

input.submit_button { -webkit-appearance: none; }

YOU ARE A LEGEND, thanks so much for your solution, LOOKED everywhere for this, finally thanks to you it's fixed :)

Just realized it was still showing the pill shaped button in black once you actually clicked the add to cart button, so after some testing figured out you need to add the hover part to the code as well to the stylesheet_css_buttons.css.

input.submit_button,** input.cssButtonHover **{ -webkit-appearance: none; }

Stumbled on this website recently (www eapresto com).
Looked at the view source and it shows they are using the (Responsive_Classic) template?!
I have this template and it's a whole lot different than that.
Can anyone help to identify it? or what other templates they might be using? I couldn't find anything and I've emailed them asking and no response.

Found an old closed thread and did what it suggested but it didn't help (https://www.zen-cart.com/showthread.php?145794-Top-align-center-column-with-top-left-side-box).
I would like to align the Categories header & the Middle column header, please view snapshot (https://i.imgur.com/QW3555n.png)
Using Responsive classic on 1.5.7c.

rlexyd:

Found an old closed thread and did what it suggested but it didn't help (https://www.zen-cart.com/showthread.php?145794-Top-align-center-column-with-top-left-side-box).
I would like to align the Categories header & the Middle column header, please view snapshot (https://i.imgur.com/QW3555n.png)
Using Responsive classic on 1.5.7c.

Looking at the page's source code, you have this:

<div class="centerColumn" id="indexDefault">
<h1 id="indexDefaultHeading"></h1>
<div id="indexDefaultMainContent" class="content"></div>

The h1 tag is there, but empty. You could either add display:none to indexDefaultHeading in your css or remove/comment out the h1 code from the template file.

Whether you delete the text or comment out the h1 call in the file, the problem with just "eliminating" an h1 tag is that it is generally followed on the page by at least an h2.

Removing the h1 and starting the page with an h2 is against accessibility standards and can affect rank.

This is a common error when folks are trying to get rid of the "Congratulations!" line in a new installation. They go to includes/languages/english/index.php and make the HEADING_TITLE blank. That then throws the accessibility error.

Depending on your involvement with any US federal or state entity, this could affect your business with them.

simon1066:

Looking at the page's source code, You could add display:none to indexDefaultHeading in your css.

Thank you Simon, that did the trick!
Feels so much better when things align :)

dbltoe:

Whether you delete the text or comment out the h1 call in the file, the problem with just "eliminating" an h1 tag is that it is generally followed on the page by at least an h2.
Removing the h1 and starting the page with an h2 is against accessibility standards and can affect rank.
This is a common error when folks are trying to get rid of the "Congratulations!" line in a new installation. They go to includes/languages/english/index.php and make the HEADING_TITLE blank. That then throws the accessibility error.
Depending on your involvement with any US federal or state entity, this could affect your business with them.

Thanks for your advice John,
You are correct, I've made the HEADING_TITLE blank as I have always thought that's what I was meant to do :(
Should I change it back to what it was now since I added Simon's solution of adding display:none to indexDefaultHeading in my css?
Cheers,

dbltoe:

Whether you delete the text or comment out the h1 call in the file, the problem with just "eliminating" an h1 tag is that it is generally followed on the page by at least an h2.

Removing the h1 and starting the page with an h2 is against accessibility standards and can affect rank.

This is a common error when folks are trying to get rid of the "Congratulations!" line in a new installation. They go to includes/languages/english/index.php and make the HEADING_TITLE blank. That then throws the accessibility error.

Depending on your involvement with any US federal or state entity, this could affect your business with them.

What would be the best tool to test for accessibility? Running the home page through Chrome's Lighthouse gets a 100% pass, even though the h1 tag is empty it still seems to recognise it.

dbltoe:

Removing the h1 and starting the page with an h2 is against accessibility standards and can affect rank.
i would be curious as to where one could find this accessibility standard and how removing h1 is against a standard.

my understanding is that these are guidelines (as opposed to a standard). the only info i could find on this was from this page:

https://www.w3.org/WAI/tutorials/page-structure/headings/#heading-ranks

which states:

Nest headings by their rank (or level). The most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section.

Skipping heading ranks can be confusing and should be avoided where possible:

not really a standard... more of a guideline...

but i would interested where you may see a standard that specifically states this.

simon1066:

What would be the best tool to test for accessibility? Running the home page through Chrome's Lighthouse gets a 100% pass, even though the h1 tag is empty it still seems to recognise it.

simon, i am not sure what the situation is in the UK; here in the US, there has been a proliferation of lawsuits against online retailers claiming the website does not comply with the ADA and is not in conformance with the WCAG. someone recently forwarded me an email claiming there are now bots looking at sites for non-WCAG compliance, and in turn targeting those sites for lawsuits. this is a quote from a recent wsj article:

“I don’t want to in any way diminish the value of ADA compliance. I think it makes a lot of sense,” Overstreet says. But he adds that the plaintiffs’ law firms in digital accessibility cases are “vermin” that actively seek out companies to sue and file numerous lawsuits at once.

the best solution i have found is here:

accessibe

it costs some money. but 1 line of javascript and they automate the whole WCAG compliance, and hopefully prevent these lawsuits from happening.

but more importantly, accessibe truly makes your site available to disabled visitors in a way that i think manually coding would take a long time.

hope that helps.

best.

This is a moot issue. Supreme court will no more enforce this stupid law than they would make book publishers comply with ADA.

There is a line to draw and it is the internet...............JMHO (based on 67 years of life)

pixelpadre:

This is a moot issue. Supreme court will no more enforce this stupid law than they would make book publishers comply with ADA.

There is a line to draw and it is the internet...............JMHO (based on 67 years of life)
Sorry, you are sorely misinformed and mixing apples with oranges.

US 508 Accessibility has been US federal law since 1986. It originally applied only to federal contractors or anyone receiving federal funds for services rendered. It has grown over the years in the US and the world has expounded on it W3c and other organizations.

Just take a look at one of the lawsuits from early on (2008). https://arstechnica.com/uncategorized/2008/08/target-to-pay-6-million-to-settle-site-accessibility-suit/

Many states already have established amounts to award ranging from $1k to $4k per.

The lawsuits over copyright images that were the big thing a few years ago have been replaced in the twenties with lawsuits on accessibility. Especially contrast and inability to work with readers. https://www.digitalcommerce360.com/2021/07/07/web-accessibility-lawsuits-on-track-to-increase-nearly-20-in-2021/

i would be curious as to where one could find this accessibility standard and how removing h1 is against a standard.

@carlwhat,
Sometimes you have to drill down a bit in the right place. There's a lot of stuff in there. Over twenty years experience mean nothing as I find something each time my mind say, "I wonder if..."

Text readers are confused when the h tags are incorrect. Without the h1, you technically meet AA standards. You cannot meet AAA standards without a logical progression. https://www.tpgi.com/headings-accessibility/

It's one of the things I want to address in 1.5.8 before it gets out. We've gotten in such a habit of just blowing away the h1 text that it's not used as it should be. Several options can be done but, with the "just drop it" method currently advised........

Note that this discussion is not based on US 508 accessibiltiy but are from WCAG. https://www.w3.org/WAI/standards-guidelines/wcag/

Chrome's Web Developer Tools uses an accessibility tool (WAVE) powered by WebAIM. It's not perfect and needs to be done for every view a page can give. It is a good start for an overall idea for your site.

Yeh, ADA will stand but making books and blogs conform to blind or vision impaired will NEVER NEVER NEVER NEVER be inforced by the US Supreme Court.

You're in Florida. You may publish a book but I doubt it. Books and websites are totally different form of "Public Accomodation". Here's what happened in your state. https://www.wtsp.com/article/news/investigations/10-investigates/10investigates-ada-disability-website-lawsuits/67-9db9805b-5d09-440a-b4af-bd36d2fefe15

BTW, your site has two contrast errors and, of course, the missing H1 on the main page. If you have $1000-4000 a pop, go for it.

I'll take it to the us supreme court. Florida laws DO NOT trump US Supreme Court rulings.