How can I adjust the size of product titles and prices for better visibility?

[Zeshanzaidi]

The product titlt is large covering larger space in screen inturn the visitor need to scroll more. I want it to be seen directly by visiting the product page. And also the size of the price shown. I have changed the colour of the price but want to make it a bit bigger and bold so that the visitor can see it easily

[JasmeetVT14313]

Hi @Zeshanzaidi 
Please share the store URL with screenshots where you want to make the change so that I can check and guide you better.

[Zeshanzaidi]

buyhub.store

Theencircled in red.  In 2nd screenshot the product with no compared to price has not changed the price color. While products with compared to price have changed the sale price color. Moreover some products don't show sale badge even they have compared to price

[JasmeetVT14313]

Hi @Zeshanzaidi 
Please add the below code to "section-main-product.css" file or "base.css"

.product .product__info-wrapper .price__container {font-weight: bold;}
.product .product__info-wrapper .price-item--regular {color: #fa0202;}
@media screen and (max-width: 750px) {
.product .product__info-wrapper .product__title h1 {font-size: 24px;}
.product .product__info-wrapper .price-item--sale {font-size: 21px;}
.product .product__info-wrapper .price-item--regular {font-size: 21px;}
}

Please hit Like and mark it as a solution if it helps

[Zeshanzaidi]

Thank you. Its working but please tell me , if I want to change size, what change and where should I do ? And I want the strike through price the same as black. And what is the professional size ?

[JasmeetVT14313]

@Zeshanzaidi 
Glad it helped.  

Please hit Like and mark it as a solution

In the above code the values for "font-size" can be increased or decreased as per your requirement.

/***desktop and mobile styling start***/
.product .product__info-wrapper .price__container {font-weight: bold;}
.product .product__info-wrapper .price-item--regular {color: #fa0202;}
/***desktop and mobile styling start***/
/***only for mobile view styling starts here**/
@media screen and (max-width: 750px) {
.product .product__info-wrapper .product__title h1 {font-size: 24px;} /**font-size: 27px**//***this is for title**/
.product .product__info-wrapper .price-item--sale {font-size: 21px;} /**font-size: 19px**/ /**this is for sale price**/
.product .product__info-wrapper .price-item--regular {font-size: 21px;} /**this is for regular price**/
} 
/***only for mobile view styling ends here**/

For strike through, you can use the below property on your element

{
text-decoration: line-through;
}

[Made4uo-Ribe]

Hi @Zeshanzaidi 

Would you mind to share your store URL? Thanks!