Mobile Customization

[Rama Devi]

Please look at the second snapshot below (mobile version). The font Size of the Pricing is tooo Big. How should I reduce this?

Attachments:

1. 

   IMG_97322.png
   

[Bill Robbins]

This block of CSS in your Custom CSS adjusts your product catalog for screen sizes 767 pixels wide and smaller:

@media only screen and (max-width: 767px) {

	ul.products li.product {
		position: relative;
		text-align: center;
		padding-top: 50px !important;
	}
	
	ul.products li.product h3 {
		font-size: 25px !important;
		position: absolute;
		top: 0;
		width: 100%;
		padding-left: 0;
		padding-left: 0;
		padding-bottom: 5px;
		padding-top: 60px;
	}

}

You can add another style to it so you can adjust the size of the price like this:

@media only screen and (max-width: 767px) {

	ul.products li.product {
		position: relative;
		text-align: center;
		padding-top: 50px !important;
	}
	
	ul.products li.product h3 {
		font-size: 25px !important;
		position: absolute;
		top: 0;
		width: 100%;
		padding-left: 0;
		padding-left: 0;
		padding-bottom: 5px;
		padding-top: 60px;
	}
	
	.woocommerce ul.products li.product span.price {
	    font-size: 15px !important;
	}

}

Here the font-size: 15px !important; will set the price on smaller screens.

---

You might also consider using only one column on smaller screens too. If you want to go that route, add this to your Custom CSS too:

@media only screen and (max-width: 520px) {
	
	.woocommerce ul.products li.product {
		width: 100% !important;
	}
	
}

Take care,
Bill

[Rama Devi]

Awesome Bill, this works. Thanks a LOT 🙂

[Bill Robbins]

Glad that did the trick. Enjoy your Saturday 🙂

[Author]

Posts