ZCA Bootstrap 4 Template [Support Thread]

[Angiex1]

Thank you,

[nicksab]

One way to check would be to search the Bootstrap fileset for 'listingProductImage' to see where it's used.

Using built in developer tool, i got the following:

/includes/templates/bootstrap/css/stylesheet_zca_colors.php

Line # 90 : .listingProductImage {min-width: <?php echo (int)IMAGE_PRODUCT_LISTING_WIDTH; ?>px;}

Would the removal of it solve my display issue? I am not sure how it would affect the template as it seems to be only in the color stylesheet.

Thank you again all for helping

[simon1066]

Using built in developer tool, i got the following:

/includes/templates/bootstrap/css/stylesheet_zca_colors.php

Line # 90 : .listingProductImage {min-width: <?php echo (int)IMAGE_PRODUCT_LISTING_WIDTH; ?>px;}

Would the removal of it solve my display issue? I am not sure how it would affect the template as it seems to be only in the color stylesheet.

Thank you again all for helping

I see, the min width uses the value of the product Listing image width. That being said, simply adjusting the width of the image of the product listing might be sufficient to solve your issue (probably something I should have thought of from the start). I wouldn't remove it.

The width of the image is set in Admin > Images > Image - Product Listing Width

[dbltoe]

Just a few WAG's here. Bootstrap 4 incorporates a lot that responsive_classic does not. Ajax Search, some image handling and control of columns in Product Listing.

I'm thinking you may be loading extra things with bootsstrap that are fighting with these features.

I would first check Admin >> Configuration >> Product Listing >> Product Listing - Columns Per Row to make sure it is set for 0 versus the recommended 3. This will allow bootstrap to properly work with your product images.

[nicksab]

Just a few WAG's here. Bootstrap 4 incorporates a lot that responsive_classic does not. Ajax Search, some image handling and control of columns in Product Listing.

I'm thinking you may be loading extra things with bootsstrap that are fighting with these features.

I would first check Admin >> Configuration >> Product Listing >> Product Listing - Columns Per Row to make sure it is set for 0 versus the recommended 3. This will allow bootstrap to properly work with your product images.

Are you saying that Image Handler is not needed with bootstrap template? That would be great. I am just used to the automatic resizing with IH ( instead of uploading small/medium/ large pics)

I double and triple check the setting and it is set to 0.

Removing Line # 90 : .listingProductImage {min-width: <?php echo (int)IMAGE_PRODUCT_LISTING_WIDTH; ?>px;} seems to fix the issue I have.

I am just scare of creating more problem down the line by taking things out like this. Any thoughts on this?

Can my "homemade " bootstrap menu be contributing to the issue?

Thanks all for helping

[lat9]

Are you saying that Image Handler is not needed with bootstrap template? That would be great. I am just used to the automatic resizing with IH ( instead of uploading small/medium/ large pics)

I double and triple check the setting and it is set to 0.

Removing Line # 90 : .listingProductImage {min-width: <?php echo (int)IMAGE_PRODUCT_LISTING_WIDTH; ?>px;} seems to fix the issue I have.

I am just scare of creating more problem down the line by taking things out like this. Any thoughts on this?

Can my "homemade " bootstrap menu be contributing to the issue?

Thanks all for helping

Image Handler is a great addition to the Bootstrap 4 template and the combination is in use in a fair number of sites.

Since "that line" doesn't wreck havoc with the demo products (and a 3/6/3 layout), what layout do you have configured in the Bootstrap Template settings' Responsive Left/Center/Right Column Widths?

The "homemade" menu has some issues when viewed in a small landscape or small portrait mode. That'll be a matter of working out the CSS and associated Bootstrap classes required.

[nicksab]

Image Handler is a great addition to the Bootstrap 4 template and the combination is in use in a fair number of sites.

Since "that line" doesn't wreck havoc with the demo products (and a 3/6/3 layout), what layout do you have configured in the Bootstrap Template settings' Responsive Left/Center/Right Column Widths?

The "homemade" menu has some issues when viewed in a small landscape or small portrait mode. That'll be a matter of working out the CSS and associated Bootstrap classes required.

Since i am not using the right column, it is currently set to 3/9/0.

Left column width is set to 200px even though it has no influence on bootstrap if I understand it correctly.

The"homemade" menu is definetely a work in progress. It is my first attempt at bootstrap and was trying to mimic CSS_mega_menu.

[Angiex1]

Upto ate info in sig.

I want to make some changes to my site and know that I can do this with this template, but some of the changes may not be doable with the template.
Would it be advisable to use the clone a template once have made the changes or before? so if any upgrades happen I can use the copy template

[lat9]

Upto ate info in sig.

I want to make some changes to my site and know that I can do this with this template, but some of the changes may not be doable with the template.
Would it be advisable to use the clone a template once have made the changes or before? so if any upgrades happen I can use the copy template

I'll suggest ... both. Clone the base 'bootstrap' template and make your 'clone' the active one. If you're preparing to make substantial changes, clone your clone so you have a backup.

[Angiex1]

Thank you, will do that :)