Extra padding and huge gap on mobile

Site URL: https://jingzhang.co

Hi there,

I have uploaded image as the cover media for each of my projects, however, there is padding in between each item, making it confusing which project is being clicked when it's in between two projects. This issue is even worse on mobile where the space/padding in between is much more severe. I've tried different settings but none solved the issue. Images are below the show the padding.

Would greatly appreciate any help!
Website is www.jingzhang.co 
Password: ginkgo

2 hours ago, ginkgo_ said:

Site URL: https://jingzhang.co

Hi there,

I have uploaded image as the cover media for each of my projects, however, there is padding in between each item, making it confusing which project is being clicked when it's in between two projects. This issue is even worse on mobile where the space/padding in between is much more severe. I've tried different settings but none solved the issue. Images are below the show the padding.

Would greatly appreciate any help!
Website is www.jingzhang.co 
Password: ginkgo

 

 

You can try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  /*mobile responsive*/
	 #page .page-text-wrapper {
		 margin-bottom: 0;
	}
	 #collection-5b7750a66d2a736e3dc93acd .index-item.has-item-image {
		 height: 30vh !important;
	}
}
 @media only screen and (min-width: 768px) and (max-width: 1024px) {
   /*Tablet responsive*/
	 #page .page-text-wrapper {
		 margin-bottom: 0;
	}
	 #collection-5b7750a66d2a736e3dc93acd .index-item.has-item-image {
		 height: 41vh !important;
	}
}
 

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

8 hours ago, bangank36 said:

You can try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  /*mobile responsive*/
	 #page .page-text-wrapper {
		 margin-bottom: 0;
	}
	 #collection-5b7750a66d2a736e3dc93acd .index-item.has-item-image {
		 height: 30vh !important;
	}
}
 @media only screen and (min-width: 768px) and (max-width: 1024px) {
   /*Tablet responsive*/
	 #page .page-text-wrapper {
		 margin-bottom: 0;
	}
	 #collection-5b7750a66d2a736e3dc93acd .index-item.has-item-image {
		 height: 41vh !important;
	}
}
 

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Hi Ba,

Thank you so much for your help! It seems to have fixed the issue on mobile. Do you know if there's any way to adjust the padding so that only the uploaded image is clickable/linked, rather than the padding around it? The site design settings is a bit unclear in that regards. I greatly appreciate your time!