Jump to content

Extra padding and huge gap on mobile

Recommended Posts

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

 

image.thumb.png.d81c35937ba15f6c2c5ff75addbb3431.png

 

image.thumb.png.55c8103524e7e6257048b545aee349ee.png

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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

 

image.thumb.png.d81c35937ba15f6c2c5ff75addbb3431.png

 

image.thumb.png.55c8103524e7e6257048b545aee349ee.png

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.