Product Customization

[Rama Devi]

1) Look at the Snapshot below (Desktop Version). I want to Increase the Gap between the Product Image, Product Name & Pricing. You gave me the below code earlier. Should I make any changes to this?

@media only screen and (min-width: 768px) {

ul.products li.product {
position: relative;
text-align: center;
padding-top: 50px !important;
}

ul.products li.product h3 {
font-size: 35px !important;
position: absolute;
top: 0;
width: 100%;
padding: 0 5px !important;
}

}

@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;
}

}

[Rama Devi]

Please Look at the Snapshot below (Desktop Version)

Attachments:

1. 

   Capture2.jpg
   

[Bill Robbins]

This is the section that affects the desktop only:

@media only screen and (min-width: 768px) {

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

}

The (min-width: 768px) indicates that it will affect browser windows that are 768 pixels wide and larger only.

The padding-top: 50px !important; sets how far the image is from the top. You can increase that number to give more room between the title and the image.

Here’s that code block with styling added to also change the space below the image too:

@media only screen and (min-width: 768px) {

	ul.products li.product {
		position: relative;
		text-align: center;
		padding-top: 50px !important;
	}
	
	ul.products li.product h3 {
		font-size: 35px !important;
		position: absolute;
		top: 0;
		width: 100%;
		padding: 0 5px !important;
	}
	
	.woocommerce ul.products li.product img.attachment-shop_catalog {
		margin-bottom: 30px;
	}

}

The margin-bottom: 30px; sets distance between the image and the content below it. Yo can adjust it to fit your needs.

Take care,
Bill

[Author]

Posts