Jump to content

Mobile Responsive Issues - Resizing on Different Phones

Recommended Posts

Hi Guys,

I was wondering if anyone has come across the following issue. I recently upgraded my Google Pixel 5 to a Google Pixel 8 Pro. I'm building a site URL above, its currently behind a password wall as its not ready to go. Ive just noticed that some of the buttons Ive been adding to the feature pages under the content text (its an online magazine) have wide gaps between them, this is only an issue on my Pixel 8 and not my 5 which Ive still got. Additionally Ive got a device simulator on my browser and most devices are fine apart from the Pro's it seems, i.e Apple Pro whatever and Pixel. Ive spent ages trying to resize to show correctly on my Pixel 8, one page I solved by toggling between GAP options, then resizing it, but its really hit and miss and havent 'coded' what the actual fix was when it landed in the right place. Ive attached some screen shots. Any ideas on how to solve easily as there's loads of features (pages) that will need a bit of correcting and as my initial fix doesnt seem to be the solution it would be good to see how I solve it easily. I wonder if its something to do with config (Squarespace and the new Pros etc?)

The correct padding / sizing is screenshot 1 which is my Pixel 5 view - This has the smaller screen.

Any suggestions would be most welcome.

Screenshot 1.png

Screenshot 2.png

Link to comment
  • Replies 4
  • Views 2.4k
  • Created
  • Last Reply

Top Posters In This Topic

Think the solution is use the first option for GAP but it still doesnt let me move it down slightly to put a gap between the button and text, it kind of sits right underneath it, aesthetically this is better than the wide gap but if I could move it down a bit to have a bit of a gap that would be great.

Edited by LeeT
Link to comment
  • 3 months later...

Hi tuanphan / all,

I've been busy with my day job! (ERP transformation PM), anyway, this is not driving me absolutely crazy. So basically I've been adding buttons under text blocks for 'feature articles', the buttons are links to the main features pages, but on some particular pages there is a huge gap between the button and text on certain devices, the gaps vary in size for each feature page I've written.  I have been on ChatGPT, watching some vids but cant seem to find the route cause or solution (ill keep searching). Is this a general coding issue with SS?

I now have to review every single page to see how big the issue is on mobile simulator but even that is not 100%.

The site is still behind a password wall and not published as I'm still building, designing and adding content.

Does anyone have the answer!

Ps Ive tried to review my Pixel Pro 8 by turning on Dev Options and tools but there's an issue with Chrome dev tools pulling up remote devices so I cant see where the code is is on my phone.

I don't want to Go Live without solving this as my site is all about visuals etc, it looks horrendous and if cant be fixed then its either delete the pages or move platforms, if i delete the pages then again how can i continue using SS? I'm hoping its me just missing something or some simple CSS code I can add but I have been trying this.

Appreciate thoughts, example screenshots of issues attached.

Regards

LeeDell-LatitudeSimulator.thumb.png.3a51cca4a3e0205aeee3a0760667fafe.pngiPhone-13-PRO-MAX-Simulator.thumb.png.0bb8e04c9af82bdcdaf48bdf2c74737b.pngiPhone-15-(iOS-17)Simulator.thumb.png.7c6724d776cc92e210f626b7a37d43ba.pngiPhone-15-PRO-MAXSimulator.thumb.png.2972fc8b6fc056413f372c5e71ab2d12.pngPixelPro8ChromeSimulator.thumb.png.87fa55048f80c1dba22b62995b7a6684.pngScreenshotPixelPro8(DifferenttoPro8simulator).thumb.png.5b399aa7542385077d92b936d598d821.pngScreenshotPixel5.thumb.png.f2333691d76aa94d98a8694dcd9f9db7.png

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.