Product Image Alignment Issues

  • Resolved mbell31

    (@mbell31)


    8 years, 1 month ago

    Hello,

    Thanks for viewing.

    For some reason my product images do not display properly in the shop. As you can see here: PureBold

    Instead of displaying 3 images per line, it drops down a row after just 1 product.

    No matter what adjustments I make in the image size options, it stays this way.

    Any idea on how to fix this and have it properly display 3 images per line?

    Thank you in advance.

    -Mike

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter mbell31

    (@mbell31)

    8 years, 1 month ago

    
### WordPress Environment ###

Home URL: https://purebold.com
Site URL: https://purebold.com
WC Version: 3.3.5
Log Directory Writable: ✔
WP Version: 4.9.5
WP Multisite: –
WP Memory Limit: 768 MB
WP Debug Mode: –
WP Cron: ✔
Language: en_US

### Server Environment ###

Server Info: Apache
PHP Version: 7.0.29
PHP Post Max Size: 128 MB
PHP Time Limit: 120
PHP Max Input Vars: 3000
cURL Version: 7.53.0
OpenSSL/1.0.2k

SUHOSIN Installed: –
MySQL Version: 5.6.36
Max Upload Size: 128 MB
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

### Database ###

WC Database Version: 3.3.5
WC Database Prefix: wp_
MaxMind GeoIP Database: ✔
Total Database Size: 13.62MB
Database Data Size: 8.10MB
Database Index Size: 5.52MB
wp_woocommerce_sessions: Data: 0.02MB + Index: 0.02MB
wp_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB
wp_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB
wp_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.05MB
wp_woocommerce_order_items: Data: 0.02MB + Index: 0.02MB
wp_woocommerce_order_itemmeta: Data: 0.02MB + Index: 0.03MB
wp_woocommerce_tax_rates: Data: 0.22MB + Index: 0.31MB
wp_woocommerce_tax_rate_locations: Data: 0.30MB + Index: 0.36MB
wp_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB
wp_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB
wp_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB
wp_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB
wp_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB
wp_woocommerce_log: Data: 0.02MB + Index: 0.02MB
wp_commentmeta: Data: 0.02MB + Index: 0.03MB
wp_comments: Data: 0.02MB + Index: 0.09MB
wp_et_bloom_stats: Data: 0.02MB + Index: 0.00MB
wp_links: Data: 0.02MB + Index: 0.02MB
wp_options: Data: 4.03MB + Index: 1.03MB
wp_postmeta: Data: 1.52MB + Index: 3.02MB
wp_posts: Data: 1.47MB + Index: 0.13MB
wp_termmeta: Data: 0.02MB + Index: 0.03MB
wp_terms: Data: 0.02MB + Index: 0.03MB
wp_term_relationships: Data: 0.06MB + Index: 0.02MB
wp_term_taxonomy: Data: 0.02MB + Index: 0.03MB
wp_usermeta: Data: 0.02MB + Index: 0.03MB
wp_users: Data: 0.02MB + Index: 0.05MB
wp_wc_download_log: Data: 0.02MB + Index: 0.03MB
wp_wc_webhooks: Data: 0.02MB + Index: 0.02MB
wp_yoast_seo_links: Data: 0.02MB + Index: 0.02MB
wp_yoast_seo_meta: Data: 0.02MB + Index: 0.00MB

### Post Type Counts ###

attachment: 77
custom_css: 1
customize_changeset: 20
jetpack_migration: 2
jp_img_sitemap: 2
jp_sitemap: 2
jp_sitemap_master: 2
nav_menu_item: 18
page: 11
post: 8
product: 27
product_variation: 362
revision: 112
shop_coupon: 2
shop_order: 5

### Security ###

Secure connection (HTTPS): ✔
Hide errors from visitors: ✔

### Active Plugins (13) ###

Akismet Anti-Spam: by Automattic – 4.0.3
Bloom: by Elegant Themes – 1.2.25
Divi Builder: by Elegant Themes – 2.2
Improved Variable Product Attributes for WooCommerce: by Mihajlovic Nenad – 4.0.6 – Not tested with the active version of WooCommerce
Instagram Feed: by Smash Balloon – 1.8.2
Jetpack by WordPress.com: by Automattic – 6.0
MailChimp for WordPress: by ibericode – 4.2.1
Regenerate Thumbnails: by Alex Mills (Viper007Bond) – 3.0.2
SG Optimizer: by SiteGround – 4.0.5
WooCommerce PayPal Express Checkout Gateway: by WooCommerce – 1.5.3
WooCommerce Stripe Gateway: by WooCommerce – 4.1.2
WooCommerce: by Automattic – 3.3.5
Yoast SEO: by Team Yoast – 7.3

### Settings ###

API Enabled: ✔
Force SSL: ✔
Currency: USD ($)
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)

### WC Pages ###

Shop base: #7 - /shop/
Cart: #8 - /cart/
Checkout: #9 - /checkout/
My account: #10 - /my-account/
Terms and conditions: ❌ Page not set

### Theme ###

Name: Divi
Version: 3.2
Author URL: http://www.elegantthemes.com
Child Theme: ❌ – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme
WooCommerce Support: ✔

### Templates ###

Overrides: –
    longnguyen

    (@longnguyen)

    8 years, 1 month ago

    Hi, mbell31! Use some CSS to display your product in three images on per lines.

    
ul.products {
display: flex;
flex-wrap: wrap;
}

@media (min-width: 981px) {
.et_full_width_page.woocommerce-page ul.products li.product:nth-child(4n) {
margin-right: 0;
}
}

    You can add it by going to Appearance -> Editor -> style.css and paste it to your file.

    • This reply was modified 8 years, 1 month ago by longnguyen.
    Thread Starter mbell31

    (@mbell31)

    8 years, 1 month ago

    That works and looks better. Thanks @longnguyen

    Thread Starter mbell31

    (@mbell31)

    8 years, 1 month ago

    The only thing that’s strange now is that some of the images are sticking together instead of having spacing.

    Men’s PureBold

    Alignment Issues

    longnguyen

    (@longnguyen)

    8 years, 1 month ago

    Try again with this code

    
@media (min-width: 981px) {
    .et_full_width_page.woocommerce-page ul.products li.product:nth-child(4n) {
        margin: 0 3.8% 2.992em 0;
    }
}

    There is some problem when override CSS of WooCommerce, I’ve been stuck with this.

    OK, after replacing the code and check again, tell me if you have any problem with displaying your product.

    • This reply was modified 8 years, 1 month ago by longnguyen.
    • This reply was modified 8 years, 1 month ago by longnguyen.
    Thread Starter mbell31

    (@mbell31)

    8 years, 1 month ago

    That appears to have fixed it. Thank you so much! @longnguyen

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Product Image Alignment Issues’ is closed to new replies.