Grey band/box now appearing on certain pages/.divs

Support
#1

Recently a grey band/box has been appearing on pages I make changes to. (No new plugins installed within the past week or 2)

On one page it’s on the top of a section, on another page it’s on top of a promo .div

Not exactly sure you what is going on…

#2

Hi There,

Thank you for writing in, would you mind sharing your site URL so we can take a look?

You can put it on a Secure Note if you don’t want the public to see it.

Have a nice day!

#3

Done!

Sorry for the delay on checking this, I really appreciate your help!

#4

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.x-promo.man .x-promo-image-wrap {
    display: none;
}
.x-callout {
    background-color: #fff;
}
.x-callout:before {
    border: none;
    box-shadow: none;
}
#5

Hey Thai,

Thanks!

That def helped on the team page. Still have that random bar on the Butt page though…

Also, any idea why this randomly popped up?

#6

Along the same lines, but in a different category I guess, I’ve also noticed that all my images in the shop (other than the main) for some reason are tiny now.

Tried resizing and reloading but nothing seems to fix it… just caught that randomly and recently as well.

#7

Hi There,

I can’t see any grey band on your pages

Also your shop images look normal.

Please provide a screenshot of what you are referring to.

Thanks

#8

Here’s the grey bar I spoke of on the page:

https://screencast.com/t/mShdjmnR

Here’s a quick vid showing it’s not part of any section. https://screencast.com/t/pvBXpwxb

And here’s the tiny images I mentioned in woo:

This image is 325 × 510 btw…

https://screencast.com/t/j1rhpwL8Qfh

Also, the green arrow show that the image option thumbnails moved up and over the images.

(Another example with a full image: https://screencast.com/t/dacdvWG1)

Thanks!

#9

Howdy, @Trizkit!

Thanks for writing in! Regarding the gray bar you’ve pointed out after the “As Seen On” section of your page, it appears that this is due to the margin for that Section not being formatted properly. By default, all Section Elements have some margin-bottom applied to them from when X was first developed and pages were built out manually. While this has to remain for legacy purposes, in the builders this is overwritten by always outputting a margin property inline on the Section Element you’re working on, which ensures you have the spacing you want. After inspecting your section, I can see a malformed line of CSS that is not getting applied because of this:

margin: px 0px 0px;

That px only part with no number behind it is creating an error, so the browser is choosing to ignore it. If you would please inspect that Section in your content builder and ensure that you have a proper value entered into the Margin control, that should be the source of the issue. If everything looks correct to you (i.e. everything has a number and a unit such as 0px), try manually retyping each value and then re-saving the page, as there could be some issue with a corrupted value somehow. If all that doesn’t work, let us know and we can look into it a bit deeper.

Regarding your smaller images, inspecting them in the browser, I see that they are showing up as the actual size you have there. You could try uploading a larger image to ensure that it always fills the space available, or you could make some adjustments to your theme. A while back WooCommerce released an update to how they display product galleries, and we added support for it in the theme. You could experiment with removing some of these features, which would effectively take your product galleries back to what they were before these updates. The following bit of code would allow you to experiment with that via the functions.php file of a child theme:

function my_wc_product_gallery_setup() {
  remove_theme_support( 'wc-product-gallery-zoom' );
  remove_theme_support( 'wc-product-gallery-lightbox' );
  remove_theme_support( 'wc-product-gallery-slider' );
}

add_action( 'after_setup_theme', 'my_wc_product_gallery_setup', 100 );

I have tested that locally and it should allow you to experiment with removing the options as needed. For example, if you wanted to see what things looked like without the new slider, you could just comment out that line like so:

function my_wc_product_gallery_setup() {
  remove_theme_support( 'wc-product-gallery-zoom' );
  remove_theme_support( 'wc-product-gallery-lightbox' );
  // remove_theme_support( 'wc-product-gallery-slider' );
}

add_action( 'after_setup_theme', 'my_wc_product_gallery_setup', 100 );

We have an extensive article in our Knowledge Base which outlines how to get a child theme setup and running on your website, which you can review here:

Hopefully that all helps to answer your questions and point you in the right direction. Cheers!