Template Fluorspar

[wmorris]

Ok, on the product listing I have a product is out of stock with the red image. It the box is longer than the others.

[chadlly2003]

Are you saying that I need to copy this file:
\includes\languages\lang.english.php

and replace it with this file?
\includes\languages\fluorspar\lang.english.php

The height issue does work but the way your template is built I would go with a script to size those boxes. Using CSS to get the size would cause more of a headache.



Lets try this. This will solve your issue in a much easier manner

path: /includes/templates/your_template/common/tpl_main_page.php

add this to the very bottom

<script> 
    window.onload = function() {
        var boxes = document.querySelectorAll('.productBox');
        
        var maxHeight = 0;

        // First, find the maximum height
        boxes.forEach(function(box) {
            box.style.height = 'auto'; // Reset the height to auto
            var boxHeight = box.offsetHeight;
            if (boxHeight > maxHeight) {
                maxHeight = boxHeight;
            }
        });

        // Now, apply the maximum height to all product boxes
        boxes.forEach(function(box) {
            box.style.height = maxHeight + 'px';
        });
    };
</script>

[chadlly2003]

Ok, on the product listing I have a product is out of stock with the red image. It the box is longer than the others.

The height issue does work but the way your template is built I would go with a script to size those boxes. Using CSS to get the size would cause more of a headache.



Lets try this. This will solve your issue in a much easier manner

path: /includes/templates/your_template/common/tpl_main_page.php

add this to the very bottom

<script> 
    window.onload = function() {
        var boxes = document.querySelectorAll('.productBox');
        
        var maxHeight = 0;

        // First, find the maximum height
        boxes.forEach(function(box) {
            box.style.height = 'auto'; // Reset the height to auto
            var boxHeight = box.offsetHeight;
            if (boxHeight > maxHeight) {
                maxHeight = boxHeight;
            }
        });

        // Now, apply the maximum height to all product boxes
        boxes.forEach(function(box) {
            box.style.height = maxHeight + 'px';
        });
    };
</script>

[wmorris]

That did it. Thank You!

The height issue does work but the way your template is built I would go with a script to size those boxes. Using CSS to get the size would cause more of a headache.



Lets try this. This will solve your issue in a much easier manner

path: /includes/templates/your_template/common/tpl_main_page.php

add this to the very bottom

<script> 
    window.onload = function() {
        var boxes = document.querySelectorAll('.productBox');
        
        var maxHeight = 0;

        // First, find the maximum height
        boxes.forEach(function(box) {
            box.style.height = 'auto'; // Reset the height to auto
            var boxHeight = box.offsetHeight;
            if (boxHeight > maxHeight) {
                maxHeight = boxHeight;
            }
        });

        // Now, apply the maximum height to all product boxes
        boxes.forEach(function(box) {
            box.style.height = maxHeight + 'px';
        });
    };
</script>

[wmorris]

Ok, I have another issue on the new product module on the main page. Why are my product image is bigger than the other and the product listing images size is right?

[chadlly2003]

Ok, I have another issue on the new product module on the main page. Why are my product image is bigger than the other and the product listing images size is right?

Just look at you site. Look like you got it.

Can i make one suggestion lets have zencart called the image size instead of the css. Once you make the changes below go to backend of zencart
and adjust your new 'product image size' there.

Once that is done look at how nice your images look on mobile and desktop. Big difference in quality of the image.



path: responsive.css
line:47
find this and remove....

img.listingProductImage{width:30%;}

path: responsive.css
line:150
find this and remove....

img.listingProductImage{width:60%;}

[wmorris]

Just look at you site. Look like you got it.

Can i make one suggestion lets have zencart called the image size instead of the css. Once you make the changes below go to backend of zencart
and adjust your new 'product image size' there.

Once that is done look at how nice your images look on mobile and desktop. Big difference in quality of the image.



path: responsive.css
line:47
find this and remove....

img.listingProductImage{width:30%;}

path: responsive.css
line:150
find this and remove....

img.listingProductImage{width:60%;}

What am I looking for in the backend of Zen-Cart?

[chadlly2003]

What am I looking for in the backend of Zen-Cart?

Now you can control the image width and height via the admin.


After you make the above changes you can login to your admin and change images sizes there.

go to configuration
- images

look for
Image - Product Listing Height
Image - Product Listing width

You can also resize the new product images etc...

[wmorris]

Now you can control the image width and height via the admin.


After you make the above changes you can login to your admin and change images sizes there.

go to configuration
- images

look for
Image - Product Listing Height
Image - Product Listing width

You can also resize the new product images etc...

The new product module the main page hasn't changed its still showing the big or height is long. The product listing is fine.

[chadlly2003]

You haven't made the changes yet. I am still seeing the css there.