The reason for the issue is the preview is for a phone that has a width of 414 not 320
The size of the groupfocus unfortunately is not capable of being dynamic, so there are no settings for the min width or max width or changing it from fixed width, so the groupfocus is not the right element for your situation.
Instead use a floating group, set it up so it floats just above the bottom navigation (I believe you used a floating group for that so the setup is the same)…then just use the same workflows for hiding/showing a groupfocus but change it to the floating group.
Make sure the floating group is not set to fixed width and it is dynamic in width.
Boston85719 is an expert Bubbler with a decade experience as an educator. Real name Matthew, he has been actively building SaaS apps, marketplace apps, scheduling apps and more for clients, himself and for sale as templates.
As an official Bubble Bootcamp Instructor, he leads Bubble Bootcamps on a regular basis.
Always willing to offer advice via the Bubble Forum, Matthew also offers Private Personal and Group Training Sessions.
Through his site, NoCodeTrainer, Matthew provides a range of tutorials with editor access to help you jumpstart your Bubble development.
Always accessible you can send Matthew a private message via the forum or send an email directly with your requests.
Be sure to checkout the Stripe Integration Course when you are ready to integrate Stripe payments to start monetizing your application via product sales or subscriptions.