Site logo

Archived topic

Fixes for GP Premium WooCommerce CSS

7 replies · Started by wekhter on April 3, 2018

Viewing posts 1–8 of 8

The woocommerce.min.css has a rule that says:

.woocommerce .star-rating:before {
    opacity: .25;
    content: "SSSSSS";
}

Each S displays a star in the custom font, but there's six of them. Since there's a width set on the span, 5 of the stars are fully visible, and then the tip of the sixth star.... it's not super noticeable when something is rated 5 out of 5, but the larger your font size is set the more apparent it is. (You can see the tip of the next star even on the GP shop demo, zoom in to make it clearer http://demo.generatepress.com/shop/)

Also, the .star-rating width set in WooCommerce's CSS is 5.4em, which doesn't quite line up with the size of the stars. I think a width of 5.26em 5.3 looks better (applies to the calculated width of filled-in star ratings like on http://demo.generatepress.com/product/premium-quality/ where the calculated 4.5 fills more than .5 of the last star with 5.4em width, but 5.26em 5.3 total width aligns it properly)

Thanks for this! Will get it fixed in the next version :)

@Tom One more thing I noticed! GP Premium woocommerce-mobile.min.css has:

.woocommerce-MyAccount-navigation li.is-active a:after{content:"\f107"}

Which is referencing a fontawesome icon, but you're now using your own icon set so it's a character-not-found rectangle.

That should be fixed in GPP 1.6.

@Tom Just reaching out again--the woocommerce-mobile.min.css has not been fixed yet. This causes a "character not found" blank rectangle to show up in the place of the > on the active tab in the WooCommerce My Account dashboard on mobile. It should probably either reference the same glyph as the desktop version ("\e901") or maybe a down arrow (or something).

@tom

Yes, the issue is with the [b]mobile[/b] styles. The WooCommerce mobile styles (woocommerce-mobile.min.css) reference the Font Awesome arrow down glyph, which shows up as a missing character.

Here's a screenshot: https://ibb.co/ftUzJz

(That screenshot is from 1.7-rc.1 but it's the same in 1.6.2)

Great find! Fixed in rc.2 :)

Thank you!

This archived topic is closed to new replies.