Jump to content

Space between Sections

Recommended Posts

I set up a page where 2 sections are stacked. The top one has an image and text blocks. The bottom on has a gallery. On a desktop browser these sections are close together without any extra space. Which is what I want.Screen114.thumb.png.6189f1243a67f4b4410c1e831c5177aa.png

But on some mobile devices (an iPad) the space between the sections gets  a lot larger. Is there a way to control this?

Screen113.thumb.png.fe606870b7a2557b2ca20ded273909f4.png

I see the area which seems to be the issue, but I don't know what code would work. I don't see any padding info when inspected.

Screen115.png.18dd9d3a96da82c30ec3f0bced1bb47c.png

Thanks for any advice.

http://tinyurl.com/yumdys6v

Edited by CooperWhite
Link to comment
  • Replies 5
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

I've done a little more experimenting.
The iPad is using the desktop version of the Squarespace site.

If I use the Squarespace design area in Desktop view, the top section with the elements is 25 rows deep.
If I shrink the whole browser/design window and make it the size of what I'm seeing on the iPad, the rows increase to 37. Also note how the grid size squares are different below the photo.
Screen125.png.5c64fa8be3677dced0193addff431911.png
The section seems to expand because of what is happening with the photo box getting larger:
Screen120.png.24dd8ed1492158b9739f86ace508d872.png

When I make that photo box smaller, I can then decrease the rows back to 25. This remedies the issue with the gap in the iPad viewing size. 
Screen121.png.1bf77daa1849a7084498d660fee02913.png
Except...in the full desktop view, the text box all of a sudden expands vertically:
Screen122.png.d6f6084f17650262fc85de8a2f7188e3.png
If I reduce the size of the text box back to where it should be, It reverses what I previously did with the photo box and the gap on the iPad is back to where I started. 
Something goofy must be going on with how the Flex areas and content are reacting to different screen sizes.

Maybe if there was a way to not have the bounding box of the photo expand so much, it might not throw the rows off so much.

Edited by CooperWhite
Link to comment

Thanks for the link. Very interesting. I thing there are a few issues with the Flex layout and mobile devices. In my situation, the iPad is actually showing the desktop version of the site due to the iPad resolution. And the iPad is being rotated to horizontal to view the site more like it looks in a desktop browser. So the issues discussed in the video are similar, but the pixel range (vertical dimension) given for the fix don't really affect the desktop version being shown in my situation (horizontal dimension).

I'll keep investigating.

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.