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

Quote:

---

Originally Posted by idtags

I looked in my responsive.css there is nothing like navSupp or navSuppWrapper.

I changed "hidden" in responsive_mobile.css to "visible" in two occurrences:

/*bof basic*/
legend{line-height:25px;}
.mhide{display:none;}
#navCatTabsWrapper, #navEZPagesTop, #navSuppWrapper{display:none;visibility:visible;}
h2{line-height:22px;}
input[type=password], select, input[type=number], input[type=tel], input[type=email]{width:80%;margin-left:20px;}
input[type=text]{width:80%;margin-left:15px;}

and

/*bof basic*/
legend{line-height:25px;}
.mhide{display:none;}
#navCatTabsWrapper, #navEZPagesTop, #navSuppWrapper{display:none;visibility:visible;}
h2{line-height:22px;}
#cartAdd input[type=text]{width:11% !important;}
input[type=password], select, input[type=tel], input[type=text], input[type=email]{width:85% !important;}

Footer did not show on mobile template.

I stopped at this point. :cool:

---

Remove or change the display: none;

You could display: block or inline-block... but none will also turn the block off.

Thank you, your recent suggestion brought Footer in Mobile template to life!

For others, to recap the actions, to make footer visible in mobile template do following:

1. In file /includes/templates/your_responsive_template/css/responsive_mobile.css

change the line:

#navCatTabsWrapper, #navEZPagesTop, #navSuppWrapper{display:none;visibility:hidden;}

to line:

#navCatTabsWrapper, #navEZPagesTop, #navSuppWrapper{display:block;visibility:visible;}

Snapshot of line position in december 2017 Attachment 17544

Result of actual change: Attachment 17545

In the classic template the attributes of a product and the "add to cart" button come after or below the product description. But in most responsive templates, attributes and add to cart are in the upper right corner, and the description is below all this. Is there some way to position attributes and add to cart (which is usually in a box) below or after the product description?

includes/templates/responsive_classic/templates/tpl_productinfo_display.php is fairly well compartmentalized and defined with <!--bof through <!--eof for each section. You can experiment with those by moving them to different areas of the file.

Keep in mind that many features on this page are stylesheet-controlled and, as such, may look completely different in mobile or tablet mode after your adjustments.

Thanks for the pointer - I will see what happens from here!

Quote:

---

Originally Posted by sdelaney

In the classic template the attributes of a product and the "add to cart" button come after or below the product description. But in most responsive templates, attributes and add to cart are in the upper right corner, and the description is below all this. Is there some way to position attributes and add to cart (which is usually in a box) below or after the product description?

---

You may run into this:
includes/modules/YOUR_TEMPLATE/product_listing.php

PHP Code:

---

<div class="listingDescription">' . zen_trunc_string(zen_clean_html(stripslashes(zen_get_products_description($listing->fields['products_id'], $_SESSION['languages_id']))), PRODUCT_LIST_DESCRIPTION) . '</div>' 


---

Notice the location within the $lc_text output line

PHP Code:

---

        $lc_text = '<h3 class="itemTitle"><a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), 'cPath=' . (($_GET['manufacturers_id'] > 0 and $_GET['filter_id'] > 0) ?  zen_get_generated_category_path_rev($_GET['filter_id']) : ($_GET['cPath'] > 0 ? zen_get_generated_category_path_rev($_GET['cPath']) : zen_get_generated_category_path_rev($listing->fields['master_categories_id']))) . '&products_id=' . $listing->fields['products_id']) . '">' . $listing->fields['products_name'] . '</a></h3><div class="listingDescription">' . zen_trunc_string(zen_clean_html(stripslashes(zen_get_products_description($listing->fields['products_id'], $_SESSION['languages_id']))), PRODUCT_LIST_DESCRIPTION) . '</div>'; 


---

This caused a lot of grief trying to control the product description location between mobile/tablet/desktop using CSS.

MOVING the product_description code block to a neutral location THEN modifying the CSS will maintain coding sanity ;)

Just be sure you don't add it into a site feature that may get shut off or ignored in the code flow. An example, if you add it to the products_model $lc_text output and turn off Display Product Model in admin... you'll hide both the model and the description.

I have an issue in regards to the layout of the Attributes within my product listing.

Basically I would just like them to be in line, can anyone help please?

Thank you in advance

A link to the site will help others help you, @Shillam! Welcome to the Zen Cart community!

www.print-shack.co.uk Thank you in advance

@Shillam, using FireFox, I pressed the F12 key to bring up the "Developer Tools" and used the Inspector tab to navigate through the HTML to find the cart-box and the productsAttributes div.

You need those option-names to "line up", so they need to have a specific width. You can edit your stylesheet.css file, adding to the bottom:

Code:

---

h4.optionName { width: 15em; }

---

to set that specific width.

Before you get too much further, I suggest using the Clone a Template plugin to (er) clone your current copy of the responsive_classic template so that your changes are easier to manage on any site upgrade.