Making website look better on Windows

[Vger]

This thread is turning out to be a one-on-one tutorial to teach you how to do basic things in Zen Cart and the forums aren't meant for that purpose.

If you look through the FAQs section (link below) you'll find the answer to many of your questions:
https://www.zen-cart.com/tutorials/index.php

Failing that there is the Zen Cart book which you can buy (link at top of this website).

Vger

[gjh42]

The product listing box overflow is purely a monitor width effect. Your Mac must have a widescreen, while your PC has a smaller screen.
The product boxes have a fixed height and proportional width, so in a narrower window the content takes more height. Narrow enough, and the content overflows at the bottom. Look at the page on your Mac with a window the same size (pixel width) as the window on your PC.

Zen Cart has a product image system that allows for a small, medium and large image for each product, so there is no reason to serve a large file for the thumbnail. Read the tutorial on images.

[commdiver]

The product listing box overflow is purely a monitor width effect. Your Mac must have a widescreen, while your PC has a smaller screen.
The product boxes have a fixed height and proportional width, so in a narrower window the content takes more height. Narrow enough, and the content overflows at the bottom. Look at the page on your Mac with a window the same size (pixel width) as the window on your PC.

Zen Cart has a product image system that allows for a small, medium and large image for each product, so there is no reason to serve a large file for the thumbnail. Read the tutorial on images.

If I have product XYZ with XYZ.jpg as its picture, I could upload the smallest picture to /images/subdirectory, the largest image to /images/large/subdirectory, and the medium image to /images/medium/subdirectory, correct? I tried that and could not get it to work. When clicking on the product image, I got the smallest image, not the largest.

Is there any way to change the overflow thing, so that the height is adjusted for smaller screens?

[commdiver]

Is there any way to change the overflow thing, so that the height is adjusted for smaller screens?

Ok, some playing around showed that if I removed the width and height part from the following code, the border will adjust itself depending on how much text shows, however, the the problem then is that some are larger than the others (I would like them all the same size).

.centerBoxContentsProducts {
	border: 2px solid #6A0000;
	width:185px;
	height:350px;
	background: #DCDCDC;
	margin: 0em;
	-moz-border-radius: 15px;
   	border-radius: 15px;
}

[gjh42]

The only real solution for this is to make the boxes tall enough for the longest product to fit when the page is the narrowest you want to support. Then add min-width: 789px; to the #mainWrapper rule so the page will not get narrower than this, but force horizontal scrolling instead. (The horizontal scroll should not cause annoyance unless it gets extreme enough to cut off significant content on the right edge; people with small windows <800px can expect to have to scroll anyway.)