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

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.

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

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 🙂

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

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 🙂

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

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

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

thank you. That latest code works perfectly 🙂