Different mobile styling for custom shortcode

Hi @guido07111975

Normally 2 columns in screens of max 768px, but with this shortcode only 1 column

The styling of web pages is controlled by the active theme. Sometimes the shortcode gets overridden and produces an unexpected output.

In order for us to get a better idea of your setup, 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.

Also, if you could share a screenshot that shows the difference, that would be helpful. We recommend https://snipboard.io for easily sharing screenshots – please follow the instructions on that page, then paste the URL in this thread.

Cheers

Hi Margeret,

Thanks for your reply.

I did not expect this, but it looks like it’s caused by the inline styling of my theme, GeneratePress. Please check this temp link.

I will visit their support forum.

Guido

Hi @guido07111975

Thanks for sharing the link.

Glad you detected this.

I will visit their support forum.

Perfect! That sounds like a plan. Also, here’s the link to their helpdesk: https://generatepress.com/support/

We’ll be here if you have more questions!

Hoping for a quick resolution.

Cheers

Hi again,

According to the GP support it’s not generated by GP theme.
When I take a closer look it seems that woocommerce-general-inline-css is part of WC itself:

<style id='woocommerce-general-inline-css'>
.woocommerce .page-header-image-single {display: none;}.woocommerce .entry-content,.woocommerce .product .entry-summary {margin-top: 0;}.related.products {clear: both;}.checkout-subscribe-prompt.clear {visibility: visible;height: initial;width: initial;}@media (max-width:768px) {.woocommerce .woocommerce-ordering,.woocommerce-page .woocommerce-ordering {float: none;}.woocommerce .woocommerce-ordering select {max-width: 100%;}.woocommerce ul.products li.product,.woocommerce-page ul.products li.product,.woocommerce-page[class*=columns-] ul.products li.product,.woocommerce[class*=columns-] ul.products li.product {width: 100%;float: none;}}
</style>

You will notice the media query @media (max-width:768px) { in this code.

Guido

Hi @guido07111975

seems that woocommerce-general-inline-css is part of WC itself

Can you please confirm if the same happens when you deactivate all other plugins (except WooCommerce) and change the theme to the default Storefront?

Here’s the conflict test guide for your reference: https://docs.woocommerce.com/document/how-to-test-for-conflicts/

In your response, please also share the System Status Report and screenshots as requested above.

Thanks

• This reply was modified 2 years, 7 months ago by Margaret S. woo-hc.

Hi,

Untill now this only happens with the GP theme, not with Storefront or other themes that I’ve tested.

About the log, it’s a temp test site, don’t want to share all its data here.

I would like to know where the woocommerce-general-inline-css is being created/generated? Cannot find much info about this online.

Guido

Untill now this only happens with the GP theme, not with Storefront or other themes that I’ve tested.

Update: similar CSS in Astra theme. Same structure:
<style id='woocommerce-general-inline-css'>

Guido

Hi @guido07111975

Thank you for testing with other themes.

To move forward, I’d recommend that you use a “string locator plugin” to try to track down the piece of code that is generating this line:
https://www.ads-software.com/plugins/string-locator/

I hope that helps

Hi,

Yes, found it with the String Locator ??

It’s part of the GeneratePress theme:
wp-content/themes/generatepress/inc/plugin-compat.php

I’m marking this topic resolved.

Thanks!

Guido

Great! Thank you for letting us know.

If you have further questions, feel free to create a new thread.

Regards