Jump to content

CSS to reduce gaps above & below images AND single stack image gallery MOBILE VIEW ONLY – Avenue 7.0

Recommended Posts

Hello Squarespace Community,

Mobile view only – I want to reduce the size of some gaps above and below the images on the Landing, About and Contact pages – without affecting the side spacing. I want these to match the spacing on the Work page. 

I would also like to single stack my images on my work gallery mobile view (without changing the 3 column setup on desktop view).

Everything looks fine on the desktop version and does not need adjustment.

My site is live and I am using Avenue 7.0 template. 

http://www.kotarecreative.com

I have no experience coding. I have tried using some code snippets suggested on the forum in other posts, but I could not get them to work.  Any code supplied or help would be appreciated, thank you.

Link to comment
  • Replies 8
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

I'm not really sure what spacing you want to change on your home and about page, there's only one photo on each. But here's the code you need for one column on mobile on the Work page:

@media only screen and (max-width: 640px) {
  #projectThumbs .project {
    width: 100%;
  }
}

Add to Custom CSS

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Hi Ziggy,

Thank you for providing the code, it worked perfectly!

Regarding the spacing issues – I have attached a screen grab of what I mean as I wasn't very clear. I am referring to the size of the gap between my logo and the start of the images /copy. The gap is smaller (and correct) at the top of the work page, but slightly bigger on the others. The gaps are all the same on the desktop version. 

On the landing page the gap is also too big between the image and the text at the bottom. The gap is good on the desktop version.

Is there some css code that can fix these? Thank you 🙂

 

mobile view.png

Link to comment

Sorry I don't really understand which gaps are too big, lots of them look identical.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

I have updated the image on the work page to one with a darker background, to make it easier to see the difference in spacing. I have done a new screen-grab to help clarify . These all line up perfectly on the desktop view, so only need to adjust the mobile view. 🙂

On the landing page the gap between the image and the text underneath that says "Brand and packaging design that is compelling and effective..." looks really large on the mobile view, but the gap is perfect on the desktop view, so I am hoping for some css code to adjust this on the mobile view.

I appreciate your patience and thank you for trying to help 🙂

Screenshot 2023-10-10 at 12.01.18 PM.png

Link to comment

With About, Contact Page, try this CSS code

/* Mobile About Contact Pages */
@media screen and (max-width:640px) {
div#block-3f21844bc1a319e4b258, div#block-yui_3_17_2_1_1602213184280_9485 {
    padding-top: 0px !important;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 10/13/2023 at 10:53 AM, RebeccaBurt said:

thank you. that code fixed the about and contact pages 🙂

Is there any way to reduce the padding above and below the image on the landing (home) page too?

thank you

Use this code for 3 pages

/* Mobile About Contact Pages */
@media screen and (max-width:640px) {
div#block-3f21844bc1a319e4b258, div#block-yui_3_17_2_1_1602213184280_9485, div#block-yui_3_17_2_1_1602110066707_8697 {
    padding-top: 0px !important;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.