How do I disable overflow of images on a the product feed.

Hey there!

I’ve taken a look at the site link you provided, can you clarify where the images are being cut off?

Hi there, sorry I sent you the wrong link.
https://eurasianamusements.co.za.dedi284.cpt4.host-h.net/product-category/arcade-machines/

You ou will see that the arcade machines are cut off the top and bottom to fit in the “box”. None of these images is the same size so if use the setting “uncropped in the Woocommerce Image customizer, they are different in height.

What I want to do is constrain the width of the image to 100%, like it is here https://eurasianamusements.co.za/shop/arcade-cabs/lcd-led-screen-arcade-range.
This, I am unable to do in the customizer. Can you help?

Thanks for those details – could you please share a copy of your site’s System Status? You can find it via WooCommerce > Status.
Select “Get system report” and then “Copy for support”.? Once you’ve done that, paste it here in your response.

Thanks:)

### WordPress Environment ###

WordPress address (URL): https://eurasianamusements.co.za.dedi284.cpt4.host-h.net
Site address (URL): https://eurasianamusements.co.za.dedi284.cpt4.host-h.net
WC Version: 3.9.0
REST API Version: ? 1.0.6
Log Directory Writable: ?
WP Version: 5.3.2
WP Multisite: –
WP Memory Limit: 512 MB
WP Debug Mode: –
WP Cron: ?
Language: en_US
External object cache: –

### Server Environment ###

Server Info: Apache
PHP Version: 7.2.26-1+0~20191218.33+debian9~1.gbpb5a34b
PHP Post Max Size: 64 MB
PHP Time Limit: 90
PHP Max Input Vars: 3500
cURL Version: 7.52.1
OpenSSL/1.0.2u

SUHOSIN Installed: –
MySQL Version: 5.5.5-10.1.43-MariaDB-1~stretch
Max Upload Size: 64 MB
Default Timezone is UTC: ?
fsockopen/cURL: ?
SoapClient: ?
DOMDocument: ?
GZip: ?
Multibyte String: ?
Remote Post: ?
Remote Get: ?

### Database ###

WC Database Version: 3.9.0
WC Database Prefix: wp_
Total Database Size: 23.60MB
Database Data Size: 16.08MB
Database Index Size: 7.52MB
wp_woocommerce_sessions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_order_items: Data: 0.11MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_order_itemmeta: Data: 0.47MB + Index: 0.53MB + Engine InnoDB
wp_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_comments: Data: 0.14MB + Index: 0.09MB + Engine InnoDB
wp_gf_draft_submissions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_gf_entry: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_gf_entry_meta: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_gf_entry_notes: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_gf_form: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_gf_form_meta: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_gf_form_revisions: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_gf_form_view: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_options: Data: 0.41MB + Index: 0.14MB + Engine InnoDB
wp_postmeta: Data: 3.52MB + Index: 4.03MB + Engine InnoDB
wp_posts: Data: 3.52MB + Index: 0.45MB + Engine InnoDB
wp_rg_zapier: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_term_relationships: Data: 0.11MB + Index: 0.08MB + Engine InnoDB
wp_term_taxonomy: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_usermeta: Data: 0.50MB + Index: 0.50MB + Engine InnoDB
wp_users: Data: 0.06MB + Index: 0.05MB + Engine InnoDB
wp_wc_admin_notes: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_admin_note_actions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_product_lookup: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_product_meta_lookup: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
wp_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wfBlockedIPLog: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wfBlocks7: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wfConfig: Data: 1.47MB + Index: 0.00MB + Engine InnoDB
wp_wfCrawlers: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wfFileChanges: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wfFileMods: Data: 2.52MB + Index: 0.00MB + Engine InnoDB
wp_wfHits: Data: 0.34MB + Index: 0.08MB + Engine InnoDB
wp_wfHoover: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wfIssues: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_wfKnownFileList: Data: 1.52MB + Index: 0.00MB + Engine InnoDB
wp_wfLiveTrafficHuman: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wfLocs: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wfLogins: Data: 0.05MB + Index: 0.03MB + Engine InnoDB
wp_wfls_2fa_secrets: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wfls_settings: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wfNotifications: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wfPendingIssues: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_wfReverseCache: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wfSNIPCache: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wfStatus: Data: 0.14MB + Index: 0.13MB + Engine InnoDB
wp_wfTrafficRates: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wfu_dbxqueue: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wfu_log: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wfu_userdata: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_yoast_seo_links: Data: 0.05MB + Index: 0.02MB + Engine InnoDB
wp_yoast_seo_meta: Data: 0.03MB + Index: 0.00MB + Engine InnoDB

### Post Type Counts ###

attachment: 515
custom_css: 2
customize_changeset: 37
et_body_layout: 6
et_footer_layout: 4
et_header_layout: 6
et_pb_layout: 17
et_template: 22
et_theme_builder: 3
nav_menu_item: 33
nm-userfiles: 1
page: 35
post: 1
product: 106
product_variation: 510
revision: 270
scheduled-action: 154
shop_coupon: 3
shop_order: 100

### Security ###

Secure connection (HTTPS): ?
					Your store is not using HTTPS. Learn more about HTTPS and SSL Certificates.
Hide errors from visitors: ?

### Active Plugins (17) ###

Gravity Forms: by rocketgenius – 2.4.16
Better Search Replace: by Delicious Brains – 1.3.3
Classic Editor: by WordPress Contributors – 1.5
Gravity Forms Zapier Add-on: by rocketgenius – 3.2
LitExtension Customer Password Plugin: by LitExtension – 1.0.0
Surbma | Divi & Gravity Forms: by Surbma – 1.7
WooCommerce Admin: by WooCommerce – 0.24.0 – Not tested with the active version of WooCommerce
WooCommerce Advanced Free Shipping: by Jeroen Sormani – 1.1.4 – Not tested with the active version of WooCommerce
Call for Price for WooCommerce Pro: by Tyche Softwares – 3.2.5 – Not tested with the active version of WooCommerce
Call for Price for WooCommerce: by Tyche Softwares – 3.2.7 – Not tested with the active version of WooCommerce
WooCommerce Sequential Order Numbers: by SkyVerge – 1.9.2 – Not tested with the active version of WooCommerce
WooCommerce: by Automattic – 3.9.0
Wordfence Security: by Wordfence – 7.4.5
WordPress Importer: by wordpressdotorg – 0.6.4
Yoast SEO: by Team Yoast – 12.7.1 – Not tested with the active version of WooCommerce
WP Clone by WP Academy: by WP Academy – 2.2.9
WP-Sweep: by Lester 'GaMerZ' Chan – 1.1.1

### Inactive Plugins (1) ###

WooCommerce Product Image Gallery Options: by Create and Code – 1.1.0 – Not tested with the active version of WooCommerce

### Settings ###

API Enabled: –
Force SSL: –
Currency: ZAR (R)
Currency Position: left
Thousand Separator: ,
Decimal Separator: .
Number of Decimals: 2
Taxonomies: Product Types: external (external)
grouped (grouped)
simple (simple)
variable (variable)

Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
exclude-from-search (exclude-from-search)
featured (featured)
outofstock (outofstock)
rated-1 (rated-1)
rated-2 (rated-2)
rated-3 (rated-3)
rated-4 (rated-4)
rated-5 (rated-5)

Connected to WooCommerce.com: –

### WC Pages ###

Shop base: #106 - /shop/
Cart: #107 - /cart/
Checkout: #108 - /checkout/
My account: #109 - /my-account/
Terms and conditions: ? Page not set

### Theme ###

Name: BronzePack Child Theme
Version: 1.0.0
Author URL: https://lenomedia.co.za
Child Theme: ?
Parent Theme Name: Divi
Parent Theme Version: 4.1
Parent Theme Author URL: https://www.elegantthemes.com
WooCommerce Support: ?

### Templates ###

Overrides: –

### Action Scheduler ###

Complete: 152
Oldest: 2019-12-23 08:47:56 +0000
Newest: 2020-01-22 11:23:30 +0000

Pending: 2
Oldest: 2020-01-22 12:02:21 +0000
Newest: 2020-01-22 12:02:21 +0000

Canceled: 0
Oldest: –
Newest: –

In-progress: 0
Oldest: –
Newest: –

Failed: 0
Oldest: –
Newest: –

Thank you for that!

From here, to get what you want I think you will need to follow this process:

1. Set your images to be uncropped
2. Use CSS to manually set the height so they are all the same

Since they are currently set to cropped I can’t look to see what the appropriate CSS would be – if you yourself are not familiar with CSS, I would be happy to provide it after the images have been changed to uncropped

Hi, thank you for your response.

1) I set the images to be uncropped
2) If you could help me with the CSS I will be very grateful. I tried but I was unsuccessful.

Can you try this code? You may want to adjust the height based on screen size using media screens:

.et_shop_image {
    height: 350px;
}

Hey there! Since I haven’t heard back from you, I’ll mark this thread as resolved now. If you have any further questions, I recommend creating a new thread.