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

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
michaelttkk
 
 
Posts: 1
Joined: Tue Jun 18, 2024 8:33 pm

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

Post by 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
User avatar
BaconFries
 
 
Posts: 5487
Joined: Thu Aug 16, 2007 7:32 pm

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

Post by 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.

Image

Please read the following
How do I share my project to get help?
User avatar
crispy68
 
 
Posts: 2807
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

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

Post by 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.
Post Reply