Return to previous page

What CSS controls the product price font size?

This topic has 9 replies, 2 voices, and was last updated 6 years, 5 months ago ago by Rose Tyler

Lily

Participant

May 10, 2018 at 16:20

Hi,

We have this CSS in custom.css file

.products-grid .product .product-name {
font-size: 14px;
font-weight: 200;
}
.products-grid .product .price {
font-size: 20px;
font-weight: 300;
}
.single-product h2.product-name {
font-size: 20px;
font-weight: 200;
}
.single-product-page .product-info .price {
font-size: 20px;
font-weight: 300;
}

What if any controls the product price font size on the product page?

This here: https://screencast.com/t/rg3Yw51PPXc

As I have changed to 20px and nothing is happening on the site?

We have removed all cache tools as it is getting crazy that nothing changes on the site even though we adjust the CSS.

Thanks in advance.

#192705 Copied

8 Answers

Lily

Participant

May 10, 2018 at 16:28

I should have mentioned that on ipads the product font is smaller, but I cannot see why

https://screencast.com/t/P571hzZz1

#192707 Copied

Rose Tyler

Support staff

May 11, 2018 at 09:06

Hello,

You need to change this part of custom css code http://prntscr.com/jggg31 to http://prntscr.com/jggggf

/* make category description less wide */
@media only screen and (min-width: 1201px){ 
.tax-product_cat .read-more-wrap {
    max-width: 75%;
    margin: auto;
}
}
@media only screen and (max-width: 1200px){ 
.tax-product_cat .read-more-wrap {
    max-width: 85%;
    margin: auto;
	}
}

/* Prices on category and product page page less weighty */

.products-grid .product .product-name {
    font-size: 14px;
    font-weight: 200;
}
.products-grid .product .price {
    font-size: 20px;
    font-weight: 300;
}
.single-product h2.product-name {
    font-size: 20px;
    font-weight: 200;
}
.single-product-page .product-info .price {
    font-size: 20px;
    font-weight: 300;
}
/* Change Menu Font */

.top-bar a {
    font-family: Raleway;
    line-height: 1.5 !important;
    color: #6f6f6f !important;
	font-size: 16px;
    font-weight: 300;
}
	
.header .shopping-cart-widget .widget_shopping_cart_content .bottom-btn a {
    font-size: 12px !important;
}

Regards

#192749 Copied

Lily

Participant

May 23, 2018 at 13:24

Sorry for the delay in responding, which parts need changing the two screenshots look the same to me?

#193472 Copied

Rose Tyler

Support staff

May 23, 2018 at 14:07

Hello,

Find this code https://prnt.sc/jggg31 and change to http://prntscr.com/jllm8z

Regards

#193476 Copied

Lily

Participant

May 25, 2018 at 14:51

I get that i need to change some coding. But being that the images are images, and not text i cannot see what I need to change

Could you provide what I need to change in Text and what code I need to adjust to in text.. as I think it could take me two days to work through the images to find what is different… 🙂

#193619 Copied

Rose Tyler

Support staff

May 25, 2018 at 14:59

This code:

/* make category description less wide */
@media only screen and (min-width: 1201px){ 
.tax-product_cat .read-more-wrap {
    max-width: 75%;
    margin: auto;
}

@media only screen and (max-width: 1200px){ 
.tax-product_cat .read-more-wrap {
    max-width: 85%;
    margin: auto;
	}
	}

/* Prices on category and product page page less weighty */

.products-grid .product .product-name {
    font-size: 14px;
    font-weight: 200;
}
.products-grid .product .price {
    font-size: 20px;
    font-weight: 300;
}
.single-product h2.product-name {
    font-size: 20px;
    font-weight: 200;
}
.single-product-page .product-info .price {
    font-size: 20px;
    font-weight: 300;
}
/* Change Menu Font */

	.top-bar a {
    font-family: Raleway;
    line-height: 1.5 !important;
    color: #6f6f6f !important;
	font-size: 16px;
    font-weight: 300;
	}
	
	.header .shopping-cart-widget .widget_shopping_cart_content .bottom-btn a {
    font-size: 12px !important;
	}}

should be changed to:

/* make category description less wide */
@media only screen and (min-width: 1201px){ 
.tax-product_cat .read-more-wrap {
    max-width: 75%;
    margin: auto;
}
}
@media only screen and (max-width: 1200px){ 
.tax-product_cat .read-more-wrap {
    max-width: 85%;
    margin: auto;
	}
}

/* Prices on category and product page page less weighty */

.products-grid .product .product-name {
    font-size: 14px;
    font-weight: 200;
}
.products-grid .product .price {
    font-size: 20px;
    font-weight: 300;
}
.single-product h2.product-name {
    font-size: 20px;
    font-weight: 200;
}
.single-product-page .product-info .price {
    font-size: 20px;
    font-weight: 300;
}
/* Change Menu Font */

.top-bar a {
    font-family: Raleway;
    line-height: 1.5 !important;
    color: #6f6f6f !important;
	font-size: 16px;
    font-weight: 300;
}
	
.header .shopping-cart-widget .widget_shopping_cart_content .bottom-btn a {
    font-size: 12px !important;
}

Regards

#193620 Copied

Lily

Participant

May 30, 2018 at 08:30

Many thanks

#193839 Copied

Rose Tyler

Support staff

May 30, 2018 at 08:41

Hello,

You’re welcome!