LeeT Posted January 15 Share Posted January 15 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. Link to comment
LeeT Posted January 15 Author Share Posted January 15 (edited) 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 January 15 by LeeT Link to comment
tuanphan Posted January 16 Share Posted January 16 Can you share link to this page? 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
LeeT Posted April 18 Author Share Posted April 18 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 Lee Link to comment
LeeT Posted April 19 Author Share Posted April 19 will-myers.com has code that fixes it. Thanks Will https://www.will-myers.com/articles/fixing-the-tablet-spacing-problem-in-squarespace-fluid-engine 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