Anyone got any ideas on why the stars appear as numbers?

On www.naturalsleepremedies.com near the bottom, ONLY on mobile phones, you’ll see the stars as numbers, if you were me, how would you solve that please?

.woocommerce-Price-amount
	{
	visibility: visible !important;
	}
	

#li-comment-29, li#li-comment-34 
	{
    padding-bottom: 7px !important;
	}
	

.comment_container p 
	{
    margin-bottom: 0 !important;
	}
	

.woocommerce-cart table.cart td.actions .coupon .input-text 
	{
	width: 150px;
	margin-right: 10px;
	padding: 6px 6px !important;
	}
	

ul.products.columns-1 
	{
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
	}
	

#comment-17 p, #comment-19 p, #comment-21 p, 
#comment-8 p, #comment-18 p, #comment-16 p 
	{
	margin-bottom: 0 !important;
	}

	
#li-comment-16, #li-comment-31, #li-comment-8 
	{
	margin-top: 14px !important;
	}

	
.woocommerce .products .star-rating
	{
	margin: 0 auto !important;
	}

	
.woocommerce #reviews #comments ol.commentlist li, 
.woocommerce-page #reviews #comments ol.commentlist li 
	{
	margin-bottom: 11px!important;
	}

	
woocommerce #reviews #comments ol.commentlist ul.children
	{
	margin: 11px 0 0 50px !important;
	}
	
	
.woocommerce-notices-wrapper
	{
	background: #734f96 !important;
	}


#comment-17 
	{
	margin-top: 25px !important;
	}

	
#footer-info 
	{
	float: none !important;
	padding-bottom: 10px;
	text-align: center !important;
	}

	
a.et-pb-arrow-next, a.et-pb-arrow-prev 
	{
	color: #fff !important;
	}

	
#footer-widgets .footer-widget li
	{
	position: relative;
	padding-left: 0 !important;
	}

	
i.fa 
	{
	margin-right: 10px;
	font-size: 15px;
	}

	
.et_pb_container.clearfix
	{
	height: 300px !important;
	}

.buy_button a 
	{
	background: #734f96 !important;
	color: #fff !important;
	border-radius: 10px;
	padding: 12px 20px!important;
	}

	
.et-fixed-header #top-menu .buy_button a   
	{
	color: #fff !important;    
	}

	
.et-cart-info 
	{
	display:none !important; 
	}

	
#et-top-navigation .et-cart-info 
	{
	color: #000000;
	margin-top: 9px;
	}

	
.wcppec-checkout-buttons__separator, .woocommerce-form-coupon-toggle, #billing_company, #billing_phone,  #billing_company_field, #billing_phone_field, .woocommerce-notices-wrapper a.button.wc-forward, footer#main-footer .container #footer-widgets, .footer-widget li:before
	{
    display: none !important;
	}

	
span.review-tot 
	{
	position: absolute;
	/*bottom: 19%;*/
	margin-top: -75px;
	margin-left: -70px;
	}

	
.woocommerce ul.products li.product .price
	{
	margin-top: 30px !important;
	}


.image-list
	{
    list-style-image: url('https://www.naturalsleepremedies.com/wp-content/uploads/2019/08/sad-face-16x16.png');
	padding-left: 20px !important;
	margin-left: 20px !important;
	}


#main-content 
	{
	background-color: #fff;
	}


ul .li
	{
	padding-left: 30px !important;
	margin-left: 30px !important;
	}


@media screen and (min-width:1370px) 	
	{
		.et_pb_row.et_pb_equal_columns.et_pb_gutters1 
		{    
		width: 100% !important;    
		max-width: 1200px !important;    
		margin: 0 auto;
		}
	}  


@media only screen and (min-width: 980px) 
	{
		.woocommerce ul.products li.product a img 
		{
    	width: 300px !important; 
    	margin: 0 auto !important;
    	text-align: center !important;
		}
		.woocommerce-page.columns-1 ul.products li.product, 	
		.woocommerce.columns-1 ul.products li.product 
		{
		width: 24% !important;
		margin-right: 0;
		margin: 0 auto !important;
		}
		.woocommerce ul.products li.product, .woocommerce-page ul.products 	
		li.product 
		{
		float: none !important;
		}
	}

	
@media only screen and (max-width: 980px)
	{
		.buy_button a 
		{
		background: #734f96 !important;
		color: #fff!important;
		border-radius: 10px;
		padding: 4px 20px!important;
		width: 101px;
		margin-top: 11px;
		margin-left: 32px;
		}
	}

	
@media(min-width: 769px) and (max-width: 979px)
	{
		.woocommerce ul.products li.product 
		{
		margin-bottom: 0 !important;
		}
	}
 
 
@media only screen and (max-width: 768px) 
	{
		.page-id-147 .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea 
		{
		padding: 5px;
		border-radius: 3px;
		font-size: 14px;
		}
		.woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product 
		{
		width: 48%;
		float: none !important;
		clear: both;
		text-align: center !important;
		margin: 0 auto;
		}
		.woocommerce .star-rating span::before 
		{
		content: '5353535353';
		top: 0;
		position: absolute;
		left: 0;
		width: 100%;
		}	
	}

	
@media (max-width: 767px)
	{
		body.woocommerce .woocommerce-tabs 
		{
		margin-left: -12.5%;
		margin-right: -12.5%;
		}
		#commentform input[type=email]
		{
		width:100% !important;
		}
		.woocommerce #reviews #comments ol.commentlist li .comment-text, .woocommerce-page #reviews #comments ol.commentlist li .comment-text
		{
		margin-left: 0 !important;
		}
		.woocommerce #reviews #comments ol.commentlist li img.avatar{
		float: none !important;
		position: relative !important; 
		width: 50px !important;
		height: 50px !important;
		}
		body .entry-content ul:not(.insomnia_list)
		{
		padding-left: 0 !important;
		}
	}


@media (max-width: 676px) 
	{
		#et-boc > div > div.et_pb_section.et_pb_section_2.et_section_regular > div.et_pb_row.et_pb_row_3.et_pb_equal_columns.et_pb_gutters1 > div.et_pb_column.et_pb_column_2_5.et_pb_column_5.et_pb_css_mix_blend_mode_passthrough 
		{
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
		}
		#et-boc > div > div.et_pb_section.et_pb_section_2.et_section_regular > div.et_pb_row.et_pb_row_3.et_pb_equal_columns.et_pb_gutters1 > div.et_pb_column.et_pb_column_3_5.et_pb_column_6.et_pb_css_mix_blend_mode_passthrough 
		{
		margin-top: 0 !important;
		padding-top: 0 !important;
		}
		.woocommerce #reviews #comments ol.commentlist ul.children
		{
		margin: 9px 0 0 25px !important;
		}
		.woocommerce .star-rating:before, .woocommerce-page .star-rating:before
		{
		display: none!important;
		}
		.woocommerce ul.products li.product .star-rating 
		{
		text-align: center;
		width: 100%;
		margin-bottom: 30px !important;
		}
	}	

	
@media (max-width:407px)
	{
		input#coupon_code 	
		{
		width: 100%;
		text-align: center;
		}
		button[name="apply_coupon"]
		{
		width: 100% !important;
		}
	}


@media (min-width:988px)
	{
		#li-comment-34 
		{
    	margin-top: 18px !important;
		}
	}

	
@media (min-width:1313px)
	{
		#li-comment-32 
		{
    	margin-top: 18px !important;
		}
	}
	

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) 
	{
		span.review-tot 
		{
		position: absolute !important;
		margin-top: -75px !important;
		padding-left: 0 !important;
		right: 0 !important;
		text-align: center !important;
		display: block !important;
		width: 100% !important;
		}
	}


@media screen and (min-width: 640px), screen9 
	{
		span.review-tot 
		{
		position: absolute !important;
		margin-top: -75px !important;
		padding-left: 0 !important;
		right: 0 !important;
		text-align: center !important;
		display: block !important;
		width: 100% !important;
		}
	}


@media screen and (min-width: 640px), screen 
	{
		.et_mobile_menu 
		{
		border-top: none !important;
		margin: 0 !important;
		padding: 0 !important;
		width: 130px !important;
		}
	}
		.woocommerce .star-rating span::before 
		{
		content: '5353535353';
		top: 0;
		position: absolute;
		left: 0;
		width: 100%;
		}	

i’d stop telling my website to stick a bunch of numbers in there.

Looking at your other values that go into those sections, the system uses a font to generate stars and empty stars based on a loaded font file, and uses S for a filled star (\53, the hex escape sequence for a capital S) and s for an empty one (\73, the hex escape sequence for a lowercase s).

You’ve forgotten the slashes, so the system spits out what you asked it to - a bunch of numbers.

4 Likes

Thank you, so would the below solve it?

.woocommerce .star-rating span::before
{
content: ‘\5\3\5\3\5\3\5\3\5\3’;
top: 0;
position: absolute;
left: 0;
width: 100%;
}

\53 is S, \5\3 is a pair of control characters.

2 Likes

So like this?
.woocommerce .star-rating span::before
{
content: ‘\53\53\53\53\53’;
top: 0;
position: absolute;
left: 0;
width: 100%;
}

yup.

@coothead (since i know you’re watching this thread): Is there a CSS benefit to using the hex code over just “SSSSS”?

Not that I can see. :unhappy:

But then, I tend to call a spade a spade. :winky:

I would, though, use the hex code for this selection…

element::before {
   content: '\0015a \0015c \0015e \00160';
 }

Ś Ŝ Ş Š
:rofl:

coothead

2 Likes

Thank you very much - the below worked:
.woocommerce .star-rating span::before
{
content: ‘\53\53\53\53\53’;
top: 0;
position: absolute;
left: 0;
width: 100%;
}