Niall a11n

Hi there @animoassociates 👋

We haven’t heard back from you for a while, so I’m going to mark this post as resolved now. If you need any further help here, please let us know. Or, if you need additional help with the Storefront theme, please start a new thread and we’ll be able to help you out there.

Thank you!

Hi @siutek 👋

We haven’t heard back from you for a while and there’s been no movement on this thread, so I’m going to mark it as resolved now.If you need additional help with the Storefront theme, please start a new thread and we’ll be able to help you out there.

Thank you!

Hi there @cezareluke,

I’m sorry we missed your last post. Have you been able to resolve this issue? From what I see on the Essenze per bucato page, there are currently two columns on mobile devices:

Link to image: https://d.pr/i/CrCnRq

Are you still seeing something different like in the screenshot you shared above? If so, please let us know and we can take a closer look. Thank you!

Hi @boppar,

Thanks for reaching out us about reducing the spacing on the homepage. I’ve had a look at the site and noticed that there’s two places where the margins need to be reduced that’s a little different than the code you found, as I found a different code that involves reducing the margins for two separate blocks.

Can you please try adding this code to your site:

/* Fix homepage block spacing issue  */
#post-536 > div > div.wp-container-10.wp-block-group.alignfull.align-fullwidth-custom.has-background > div > div.wp-block-columns.has-white-background-color.has-background .wp-block-column, #post-536 > div > div.wp-container-10.wp-block-group.alignfull.align-fullwidth-custom.has-background > div > div.wp-block-columns.has-white-background-color.has-background .wp-block-columns {
    	margin-bottom: 0!important;
}

I’ve made an exception here and customized the code a bit for your site, so it’s little longer than the usual code. The reason for that is because the margins get reduced on all the blocks otherwise and because those already have the correct spacing, they end up with no spacing at all. So I’ve set the code to only apply to the section you shared in the screenshot.

Here’s what the spacing looks like before the code above was added to the site:

Link to image: https://d.pr/i/qWQIU6

And here’s what the spacing above looks like after the code was added:

Link to image: https://d.pr/i/K8sxpZ

Does that work for you?

My pleasure!

Hi there @nuswaibah,

I’ve added the CSS code you shared above and see the star colour changed correctly from #7f54b3 I had before to #ffd700 (the stars are fully coloured in too):

Link to image: https://d.pr/i/nA96Vi

From what I can tell so far on https://www.seifsonafricolla.com/product/business-management-tracker/, it seems that something is overwriting the default Storefront code for displaying the stars. If the site already uses the latest Storefront v4.1.0 and WooCommerce v6.5.1 (please backup and update the site if not), please follow the steps here to confirm if the issue is caused by a conflict with a plugin on the site or something that was changed with the Storefront theme:
 
The best way to determine this is to:

• Temporarily switch your theme to Twenty Twenty-Two
• Disable all plugins except for WooCommerce
• Check if the CSS code works correctly

If you’re not seeing the same problem after completing the conflict test, then you know the problem was with the plugins and/or theme you deactivated. To figure out which plugin is causing the problem, reactivate your other plugins one by one, testing after each, until you find the one causing conflict. You can find a more detailed explanation on how to do a conflict test here.

Please let us know how that goes or if you need further help!

Hi @ryanothelo,

We haven’t heard back from you for a while and the thread does not have any further activity, so I’m going to mark this post as resolved now. If you need additional help with the Storefront theme, please start a new thread and we’ll be able to help you out there.

Thank you!

Hi @nuswaibah,

Thanks so much for the link!

To clarify a bit, by default, Storefront’s review stars only appear if there is a review for a product:

Link to image: https://d.pr/i/Y63HAK

If there are no reviews, the review stars will not appear at all:

Link to image: https://d.pr/i/gQ2Fn6

On https://www.seifsonafricolla.com/product/business-name-with-logo/, while I do see there’s one review and the stars have a white background. I also noticed that the product title is missing:

Link to image: https://d.pr/i/YZDBiZ

When I reloaded the page to check something, I no longer see the stars at all and do see a JavaScript error related to the TablePress theme:

Link to image: https://d.pr/i/QdkaIx

With that in mind, please:

Temporarily deactivate TablePress and see if that helps
Share the CSS code used to change the color of the review starts so we can take a closer look

Thank you!