Breakpoints for different size screens - iPhone, Android phone, Computer

[michaelttkk]

Hello,

A friend and I have been working on a simple webpage in a very early stage still but needing some suggestions or help.

Breakpoints have been created (default, 480, 768, and 1024). It seems like the pages display correctly for larger screens but when I opened the pages on a s21 android phone and viewing from iPhones, the head top portion background does not show the full size. Upon loading, it seems like it displays correctly but when I zoom out, it definitely shows the page is not setup correctly. It's better to see the screenshots.
Sorry for the trouble and thank you for the suggestion/help.

https://nadmam.org/test1.jfif
https://nadmam.org/test2.jfif


Thanks,
Michael

[BaconFries]

Screenshots/images don't really help. When asking for help it is always best to provide a "Demo" project (.wbs) this is so it can be viewed and see all settings used.



Please read the following
How do I share my project to get help?

[crispy68]

My guess is that your smallest breakpoint is too large for the phone you are viewing it on.

For example, a Samsung s21 has a viewport size of 360px. You didnt mention which model of iPhone but many of them have a viewport size of 375px to 414px.

You are trying to show 480px width page on a 360px/414px width phone which overflows the screen. You can probably grab the screen and zoom out a bit which then cuts off the image. You will need to create a 360px breakpoint and make this your smallest.