Responsive Sheffield Blue v1.0

Quote:

---

Originally Posted by Woodymon

This may have been discussed already. When the screen is reduced/mobile sized the top item in the dropdown menu displays whenever an item is in the cart.

But then the customer has to select the menu to be made aware an item is in the cart. Is there a recommended method to indicate near the top of the page on mobile sized screen (either above or below icon toolbar), whenever an item is in the cart? And/or make the shopping cart icon dynamic (e.g. glow yellow/orange) whenever an item is in the cart.

---

If you want the cart contents to be visible at all screen resolutions you can edit the tpl_header.php file to add your code and then use the media queries in the responsive.css file to show the code on the mobile sized screens.

Thanks,

Anne

Quote:

---

Originally Posted by Woodymon

The "Add to cart" unit form field (box) increases in horizontal size (to 85%) when screen resized to small.

What is best method to make the add to cart form box remain the same standard size, when screen viewed large or small?

Maybe assign a specific class to input select for the add to cart and then set width to 10% in responsive.css?

---

You can make any css adjustments in the responsive.css file.

Thanks,

Anne

Quote:

---

Originally Posted by Woodymon

When "Use split-login page" is enabled, at small screen size the two "panels" for new customers and returning customers remain side-by-side at intermediate screen size. However, when screen size reduced to narrow smartphone width, rather than one panel moving underneath the other, the returning customer panels moves down but moves diagonally (stays to the right), not directly beneath the new customer panel.

Firefox 25.0

---

If you want to use split screen and you want to make adjustments you can add them to the responsive.css file.

Thanks,

Anne

Quote:

---

Originally Posted by picaflor-azul

If you want the cart contents to be visible at all screen resolutions you can edit the tpl_header.php file to add your code and then use the media queries in the responsive.css file to show the code on the mobile sized screens.

---

I'm not clear on this. The cart contents (along with login/log off, home and checkout links) are displayed in the header when browser window is at most larger sizes. When browser window size s reduced to smartphone size none of these header items are displayed.

So any hints on how to keep the cart contents displaying in the header (at all sizes) but hide ALL the other header links at smartphone screen size?

I can likely work up some logic code to deal with this but just need a nudge in the right direction. Thanks.

Is there a best method to configure it so product descriptions are fully displayed (not collapsed) when visiting a product page?

I can understand the desire for the descriptions to be collapsed by default on mobile screens but prefer descriptions to be displayed (not collapsed) on larger screens. If cannot set different defaults (collapsed vs not collapsed) for different screen sizes, then prefer to set not collapsed for all devices.

I've set the shop up so the index page displays only Featured Products, not New or Specials. As suggested earlier in this thread added .box_image{min-height:100px;} to the stylesheet. So now the top of each row of boxes line up. However the bottom of the boxes do not. All the images are the same height (150px) because some products have product names longer than one line. Some are two lines and others are three lines.

Is there a method so the product boxes (on the grid) are the same size (vertically & horizontally) and the vertical height of the grid is based on the box size of the product with the longest product name (number of lines in product name)? To keep the content of the boxes lined up on the grid, the internal spacing (padding) between the top line of the box and the first line of the product name would need to be adjusted dynamically (again based on the longest product name)..

If not possible what is the best method to vertically center the contents of each box, while keeping all the boxes the same size?

I've done this using tables on a previous version of Zen Cart. I'm sure the CSS solution is simple but it escapes me at the moment.

Quote:

---

Originally Posted by Woodymon

I've done this using tables on a previous version of Zen Cart. I'm sure the CSS solution is simple but it escapes me at the moment.

---

That's the difference, the responsive templates don't use tables as tables are finite and can't work using percentages (unless I'm wrong?)...

Quote:

---

Originally Posted by Woodymon

Is there a best method to configure it so product descriptions are fully displayed (not collapsed) when visiting a product page?

I can understand the desire for the descriptions to be collapsed by default on mobile screens but prefer descriptions to be displayed (not collapsed) on larger screens. If cannot set different defaults (collapsed vs not collapsed) for different screen sizes, then prefer to set not collapsed for all devices.

---

This bug has already been addressed earlier in this thread and a patch has been posted.

Thanks,

Anne

Quote:

---

Originally Posted by Woodymon

I've set the shop up so the index page displays only Featured Products, not New or Specials. As suggested earlier in this thread added .box_image{min-height:100px;} to the stylesheet. So now the top of each row of boxes line up. However the bottom of the boxes do not. All the images are the same height (150px) because some products have product names longer than one line. Some are two lines and others are three lines.

Is there a method so the product boxes (on the grid) are the same size (vertically & horizontally) and the vertical height of the grid is based on the box size of the product with the longest product name (number of lines in product name)? To keep the content of the boxes lined up on the grid, the internal spacing (padding) between the top line of the box and the first line of the product name would need to be adjusted dynamically (again based on the longest product name)..

If not possible what is the best method to vertically center the contents of each box, while keeping all the boxes the same size?

I've done this using tables on a previous version of Zen Cart. I'm sure the CSS solution is simple but it escapes me at the moment.

---

You need to add a min-height or height to the the div that contains the product image, name, price, etc.

Thanks,

Anne

I do not think message 165 was ever addressed and I am having the same issue. Once the screen size reaches hand held device size there is a problem with the products list. When the screen is full size the product title has what appears to be a line break so that the product description will start on a new line. Whenever I decrease the size of the screen to handheld size the product description starts right after the product title without a line break. As long as the product title is at least one full line the break after the product title works fine on the handheld device. I get the same results when using Chrome and Firefox on a Linux desktop and Chrome or Opera on an android smart phone or 7 inch tablet.