Images in gallery block is stacked upon each other instead of being side by side

Hello,

Can you temporarily switch the site’s theme to Storefront? You can switch it by navigating to WP Dashboard > Appearance > themes.

May I ask when you switch, does the issue persist?

If you would not like to touch your live site when making this test, you can use a staging environment, we recommend WP Staging for quickly spinning up a new test site.

Let us know what you find.

I’m already using a Storefront theme and I want it to work with the theme I’m using.

Hi @boppar

I’d like to understand your site properly, can you please share your System Status Report, that will help us further troubleshoot.

You can find it via WooCommerce > Status. Select Get system report and then Copy for support. Once you’ve done that, you can paste it into your reply here.

If you could also provide the fatal error logs (if any) under WooCommerce > Status > Logs.

Hi @xue28

System report:

### WordPress Environment ###

WordPress address (URL): https://hangmattor.se
Site address (URL): https://hangmattor.se
WC Version: 7.0.1
REST API Version: ? 7.0.1
WC Blocks Version: ? 8.5.2
Action Scheduler Version: ? 3.4.0
Log Directory Writable: ?
WP Version: 6.1
WP Multisite: –
WP Memory Limit: 256 MB
WP Debug Mode: –
WP Cron: –
Language: sv_SE
External object cache: ?

### Server Environment ###

Server Info: LiteSpeed
PHP Version: 7.4.32
PHP Post Max Size: 50 MB
PHP Time Limit: 90
PHP Max Input Vars: 3000
cURL Version: 7.71.0
OpenSSL/1.1.1p

SUHOSIN Installed: –
MySQL Version: 5.5.5-10.5.17-MariaDB-cll-lve
Max Upload Size: 50 MB
Default Timezone is UTC: ?
fsockopen/cURL: ?
SoapClient: ?
DOMDocument: ?
GZip: ?
Multibyte String: ?
Remote Post: ?
Remote Get: ?

### Database ###

WC Database Version: 7.0.1
WC Database Prefix: wpno_
Total databasstorlek: 37.23MB
Datastorlek f?r databas: 31.69MB
Indexstorlek f?r databas: 5.54MB
wpno_woocommerce_sessions: Data: 0.06MB + Index: 0.02MB + Motor InnoDB
wpno_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Motor InnoDB
wpno_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Motor InnoDB
wpno_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.06MB + Motor InnoDB
wpno_woocommerce_order_items: Data: 0.05MB + Index: 0.02MB + Motor InnoDB
wpno_woocommerce_order_itemmeta: Data: 0.47MB + Index: 0.23MB + Motor InnoDB
wpno_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Motor InnoDB
wpno_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Motor InnoDB
wpno_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Motor InnoDB
wpno_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Motor InnoDB
wpno_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Motor InnoDB
wpno_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Motor InnoDB
wpno_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Motor InnoDB
wpno_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Motor InnoDB
wpno_actionscheduler_actions: Data: 0.06MB + Index: 0.13MB + Motor InnoDB
wpno_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Motor InnoDB
wpno_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Motor InnoDB
wpno_actionscheduler_logs: Data: 0.02MB + Index: 0.03MB + Motor InnoDB
wpno_commentmeta: Data: 0.02MB + Index: 0.03MB + Motor InnoDB
wpno_comments: Data: 0.13MB + Index: 0.09MB + Motor InnoDB
wpno_fbv: Data: 0.02MB + Index: 0.02MB + Motor InnoDB
wpno_fbv_attachment_folder: Data: 0.05MB + Index: 0.00MB + Motor InnoDB
wpno_links: Data: 0.02MB + Index: 0.02MB + Motor InnoDB
wpno_litespeed_img_optm: Data: 0.47MB + Index: 0.28MB + Motor InnoDB
wpno_litespeed_img_optming: Data: 0.02MB + Index: 0.05MB + Motor InnoDB
wpno_litespeed_url: Data: 0.02MB + Index: 0.03MB + Motor InnoDB
wpno_litespeed_url_file: Data: 0.02MB + Index: 0.08MB + Motor InnoDB
wpno_ms_snippets: Data: 0.02MB + Index: 0.00MB + Motor InnoDB
wpno_options: Data: 2.13MB + Index: 1.09MB + Motor InnoDB
wpno_postmeta: Data: 3.52MB + Index: 1.94MB + Motor InnoDB
wpno_posts: Data: 23.52MB + Index: 0.31MB + Motor InnoDB
wpno_snippets: Data: 0.06MB + Index: 0.03MB + Motor InnoDB
wpno_termmeta: Data: 0.05MB + Index: 0.03MB + Motor InnoDB
wpno_terms: Data: 0.02MB + Index: 0.03MB + Motor InnoDB
wpno_term_relationships: Data: 0.06MB + Index: 0.02MB + Motor InnoDB
wpno_term_taxonomy: Data: 0.05MB + Index: 0.03MB + Motor InnoDB
wpno_usermeta: Data: 0.02MB + Index: 0.03MB + Motor InnoDB
wpno_users: Data: 0.02MB + Index: 0.05MB + Motor InnoDB
wpno_wc_admin_notes: Data: 0.06MB + Index: 0.00MB + Motor InnoDB
wpno_wc_admin_note_actions: Data: 0.05MB + Index: 0.02MB + Motor InnoDB
wpno_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Motor InnoDB
wpno_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Motor InnoDB
wpno_wc_download_log: Data: 0.02MB + Index: 0.03MB + Motor InnoDB
wpno_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Motor InnoDB
wpno_wc_order_product_lookup: Data: 0.05MB + Index: 0.06MB + Motor InnoDB
wpno_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Motor InnoDB
wpno_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Motor InnoDB
wpno_wc_product_attributes_lookup: Data: 0.05MB + Index: 0.05MB + Motor InnoDB
wpno_wc_product_download_directories: Data: 0.02MB + Index: 0.02MB + Motor InnoDB
wpno_wc_product_meta_lookup: Data: 0.02MB + Index: 0.09MB + Motor InnoDB
wpno_wc_rate_limits: Data: 0.02MB + Index: 0.02MB + Motor InnoDB
wpno_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Motor InnoDB
wpno_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Motor InnoDB
wpno_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Motor InnoDB
wpno_wdp_orders: Data: 0.02MB + Index: 0.05MB + Motor InnoDB
wpno_wdp_order_items: Data: 0.02MB + Index: 0.06MB + Motor InnoDB
wpno_wdp_persistent_rules_cache: Data: 0.02MB + Index: 0.00MB + Motor InnoDB
wpno_wdp_rules: Data: 0.02MB + Index: 0.03MB + Motor InnoDB

### Post Type Counts ###

attachment: 614
custom_css: 1
customize_changeset: 2
nav_menu_item: 24
page: 28
post: 1
product: 37
revision: 748
shop_order: 140
wp_global_styles: 1

### Security ###

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

### Active Plugins (10) ###

Advanced Dynamic Pricing f?r WooCommerce: av AlgolPlus – 4.1.6
The SEO Framework: av The SEO Framework Team – 4.2.5
Code Snippets: av Code Snippets Pro – 3.2.1
FileBird (filbird): av Ninja Team – 5.0.8
Flexible Shipping: av Octolize – 4.16.1
OMGF: av Daan from Daan.dev – 5.4.2
PaysonCheckout for WooCommerce: av Krokedil – 3.4.4
LiteSpeed Cache: av LiteSpeed Technologies – 5.3
Regenerate Thumbnails: av Alex Mills (Viper007Bond) – 3.1.5
WooCommerce: av Automattic – 7.0.1

### Inactive Plugins (0) ###

### Dropin Plugins (2) ###

maintenance.php: maintenance.php
object-cache.php: object-cache.php

### Settings ###

API Enabled: –
Force SSL: –
Currency: SEK (kr)
Currency Position: right_space
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: –
Enforce Approved Product Download Directories: –

### WC Pages ###

Butikbas: #519 - /butik/
Varukorg: #520 - /varukorg/
Kassan: #521 - /kassan/
Mitt konto: #522 - /mitt-konto/
Allm?nna villkor: #660 - /praktisk-information/kopvillkor/

### Theme ###

Name: Storefront
Version: 4.1.3
Author URL: https://woocommerce.com/
Child Theme: ? – Om du modifierar WooCommerce p? ett modertema som du sj?lv inte byggt
s? rekommenderar vi att du anv?nder ett barntema ist?llet. L?s: Hur du skapar ett barntema

WooCommerce Support: ?

### Templates ###

Overrides: –

### Payson Checkout Request Log ###

2022-08-01 09:50:36: Payson create order request.
Response code: 
Response message:

2022-04-11 15:19:05: Payson get order request.
Response code: 404
Response message: {"code":404,"message":"Checkout object not found.","errors":null}

2022-04-11 15:16:05: Payson get order request.
Response code: 404
Response message: {"code":404,"message":"Checkout object not found.","errors":null}

2022-04-11 12:20:49: Payson get order request.
Response code: 404
Response message: {"code":404,"message":"Checkout object not found.","errors":null}

2022-04-11 12:20:19: Payson get order request.
Response code: 404
Response message: {"code":404,"message":"Checkout object not found.","errors":null}

2022-04-11 12:14:59: Payson create order request.
Response code: 401
Response message: {"code":401,"message":"Authorization has been denied for this request. Make sure your credentials are correct or contact the customer support of Payson.","errors":null}

2022-04-11 12:14:58: Payson get order request.
Response code: 401
Response message: {"code":401,"message":"Authorization has been denied for this request. Make sure your credentials are correct or contact the customer support of Payson.","errors":null}

2022-04-11 12:14:30: Payson create order request.
Response code: 401
Response message: {"code":401,"message":"Authorization has been denied for this request. Make sure your credentials are correct or contact the customer support of Payson.","errors":null}

2022-04-11 12:14:30: Payson get order request.
Response code: 401
Response message: {"code":401,"message":"Authorization has been denied for this request. Make sure your credentials are correct or contact the customer support of Payson.","errors":null}

2022-04-11 11:47:20: Payson create order request.
Response code: 401
Response message: {"code":401,"message":"Authorization has been denied for this request. Make sure your credentials are correct or contact the customer support of Payson.","errors":null}

2022-04-11 11:43:12: Payson create order request.
Response code: 401
Response message: {"code":401,"message":"Authorization has been denied for this request. Make sure your credentials are correct or contact the customer support of Payson.","errors":null}

2022-04-11 11:43:12: Payson get order request.
Response code: 401
Response message: {"code":401,"message":"Authorization has been denied for this request. Make sure your credentials are correct or contact the customer support of Payson.","errors":null}

2022-04-11 11:40:12: Payson update order request.
Response code: 400
Response message: {"code":400,"message":"Model validation failed.","errors":[{"property":"Order.TotalPriceIncludingTax","message":"The property can't be updated."}]}

2022-04-11 11:39:59: Payson update order request.
Response code: 400
Response message: {"code":400,"message":"Model validation failed.","errors":[{"property":"Order.TotalPriceIncludingTax","message":"The property can't be updated."}]}

2022-04-11 11:22:59: Payson create order request.
Response code: 401
Response message: {"code":401,"message":"Authorization has been denied for this request. Make sure your credentials are correct or contact the customer support of Payson.","errors":null}

### Admin ###

Enabled Features: activity-panels
analytics
coupons
customer-effort-score-tracks
experimental-products-task
experimental-import-products-task
experimental-fashion-sample-products
experimental-product-tour
shipping-smart-defaults
shipping-setting-tour
homescreen
marketing
multichannel-marketing
mobile-app-banner
navigation
onboarding
onboarding-tasks
remote-inbox-notifications
remote-free-extensions
payment-gateway-suggestions
shipping-label-banner
subscriptions
store-alerts
transient-notices
woo-mobile-welcome
wc-pay-promotion
wc-pay-welcome-page

Disabled Features: minified-js
new-product-management-experience
settings

Daily Cron: ? Next scheduled: 2022-11-04 13:11:54 +01:00
Options: ?
Notes: 89
Onboarding: completed

### Action Scheduler ###

F?rdigbehandlad: 51
Oldest: 2022-10-04 14:25:02 +0000
Newest: 2022-11-03 15:10:02 +0000

V?ntar: 2
Oldest: 2022-11-04 06:55:34 +0000
Newest: 2022-11-04 15:10:02 +0000

### Status report information ###

Generated at: 2022-11-04 07:55:46 +01:00

No fatal error logs.

Hello,
Thanks for sending the system report.

Regenerate Thumbnails: av Alex Mills (Viper007Bond) – 3.1.5

May I ask if you temporarily disable this plugin (I’ve read you tried disabling plugins) and clear the site cache, is the issue still present?

If that does not help, kindly follow these instructions on our documentation below:
https://woocommerce.com/document/woocommerce-self-service-guide/#section-4

Let us know how that goes.

Hi.

As I wrote before, disabling plugins and clearing cache doesn’t solve the problem.
The documentation didn’t solve the problem.

Howdy @boppar ??

Thank you for clarifying. I went ahead with checking out the site in its entirety and, from what I gather, the gallery block causing the issue is only used on the front page -the page you are reporting the issue at.

There are no open issues on GitHub regarding this and, upon trying to replicate the issue, I was not able to do so (direct link here, for another day or so -since the time of writing this). (screenshot directly linked here)

I would like to suggest the following:
1. Try to delete and then add the gallery block again, at the site’s homepage. If that does not resolve the issue, let us know and proceed with step number 2.
2. Try replacing the gallery block with a Columns block, instead; with six, equally sized, columns. Each one would contain one image, from the six F?rger f?r alla smaker.

I trust that points you in the right direction, but if you have more questions, let us know. We’re happy to help.

Hi Pepe @anastas10s

Suggestion no 1 didn’t change anything.
Suggestion no 2, using columns does result in the images next to each other. However it doesn’t look as good when using gallery block.

I left both of the alternatives on the bottom of the front page.

If I use the gallery block on other pages it also stack the images instead of having them side by side.

It’s so strange the gallery block isn’t working anymore.

Hello @boppar,

I tried every combination of the block but can’t but failed to replicate the problem.

Link to image: https://imgur.com/a/KuSxqju

Seems like the elements are not being aligend using align-items: normal; because the parent element is not declared as a grid container. I’m not sure what caused this but my guess is it’s a custom snippet you’ve added.

Either way, as a workaround you can enter the following snippet in Appernaces > Customizer > Additional CSS.

/* Fix gallery block*/
.hentry .entry-content .wp-block-gallery {
  display: flex !important;
}

Hope this helps!

Hi Saif @babylon1999

I tried disabling my code snippets, it didn’t solve the problem. I also tried removing my addes CSS, it didn’t solve the problem.

You code did solve the problem.
Thanks a lot, Saif, you’ve been very helpful.

I still find it strange that the problem suddenly occured.