Jump to content

Adding blank space on mobile version of site

By Porkue, in Code Blocks

Go to solution Solved by CassAggett,

Recommended Posts

Porkue Level 4

Porkue

Posted
Posted (edited)

Hello Community! New user to Squarespace, first forum post. Huzzah!

I'm using the flatiron 7.0 template and see that on mobile, the space between images within a gallery is much smaller, almost non-existent.

I'm hoping I can insert some custom CSS to address this.

I'm attaching a few screenshots.
Note the desktop version has some nice space between the images, but not on the mobile view.

Any help or suggestions are greatly appreciated!

desktop.png

mobile.png

Edited by Porkue
clarity
Link to comment
  • Porkue changed the title to Adding blank space on mobile version of site
  • Replies 4
  • Views 726
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

CassAggett
CassAggett

Ah ok, so the reason it didn't work is because the space there isn't a spacer block but the margin at the bottom of the gallery item. Try this instead: @media only screen and (max-width: 640px) {

CassAggett
CassAggett

Unfortunately spacer blocks aren't rendered on mobile. Not sure if it's a different process for 7.0, but @tuanphan shared a code for 7.1 here:   If you share your URL we can check thou

Porkue
Porkue

Perfect thank you!!!

Posted Images

CassAggett Level 7

CassAggett

Posted
Posted

Unfortunately spacer blocks aren't rendered on mobile.

Not sure if it's a different process for 7.0, but @tuanphan shared a code for 7.1 here:

 

If you share your URL we can check though

If this helped you, please like or mark my solution as answer so others can scroll to it quickly 👆

Cass Aggett is a Squarespace website designer for go-getting women – no matter what stage of business.

WEBSITE • INSTAGRAM

 

Link to comment
Porkue Level 4

Porkue

Posted
  • Author
Posted

Thank you for sharing that post.
Unfortunately it did not have an effect, but it was worth a shot 🙂

 

Here's the site, in case it helps. And thanks again!

http://theRealSamKirk.com

 

 

 

1 hour ago, CassAggett said:

Unfortunately spacer blocks aren't rendered on mobile.

Not sure if it's a different process for 7.0, but @tuanphan shared a code for 7.1 here:

 

If you share your URL we can check though

 

Link to comment
  • Solution
CassAggett Level 7

CassAggett

Posted
  • Solution
Posted

Ah ok, so the reason it didn't work is because the space there isn't a spacer block but the margin at the bottom of the gallery item. Try this instead: 

@media only screen and (max-width: 640px) {
  #project .gallery .gallery-item {
    margin-bottom: 25px;
  }
}

This will apply to the mobile view of all gallery items on your site. You can adjust the margin size by taking that number up or down - on desktop it's set to 50px.

If this helped you, please like or mark my solution as answer so others can scroll to it quickly 👆

Cass Aggett is a Squarespace website designer for go-getting women – no matter what stage of business.

WEBSITE • INSTAGRAM

 

Link to comment

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing
×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources