PrettyPhoto (Lightbox) – very small on mobile devices and tablet

If you want to increase the size of photos while opened in the prettyPhoto layer, you will need to add a few custom lines of CSS to your theme. We recommend using style.css of the child theme, but if you don’t want to use it, then add following lines to custom CSS field under theme options (General Options > Custom CSS):

@media only screen and (min-width: 480px) and (max-width: 767px) {
	 .pp_pic_holder{ left: 50% !important; width: 400px !important;  margin-left: -200px !important; }
	 div.pp_default .pp_content_container .pp_right{ padding-right: 21px !important; }
	 .pp_content, #pp_full_res img{ width: 100% !important; height: 100% !important; }
	 div.pp_default .pp_content_container .pp_details {margin-top: 20px !important; }
}

@media only screen and (max-width: 479px) {
	 .pp_pic_holder{ left: 50% !important; width: 300px !important;  margin-left: -150px !important; }
	 div.pp_default .pp_content_container .pp_right{ padding-right: 21px !important; }
	 .pp_content, #pp_full_res img{ width: 100% !important; height: 100% !important; }
	 div.pp_default .pp_content_container .pp_details {margin-top: 20px !important; }
}


					
								
				
				

0