CooperWhite Posted January 9 Share Posted January 9 (edited) 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. But on some mobile devices (an iPad) the space between the sections gets a lot larger. Is there a way to control this? 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. Thanks for any advice. http://tinyurl.com/yumdys6v Edited January 9 by CooperWhite Link to comment
tuanphan Posted January 10 Share Posted January 10 It looks fine to me 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
CooperWhite Posted January 10 Author Share Posted January 10 On a phone, yes. The example screenshots with the weird space above are from an iPad. There the space changes. Unfortunately Squarespace shows us the option of what sites look like on a small mobile device, but not an iPad. Link to comment
CooperWhite Posted January 10 Author Share Posted January 10 (edited) 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. The section seems to expand because of what is happening with the photo box getting larger: 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. Except...in the full desktop view, the text box all of a sudden expands vertically: 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 January 10 by CooperWhite Link to comment
tuanphan Posted January 13 Share Posted January 13 You try this video 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
CooperWhite Posted January 14 Author Share Posted January 14 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment