I've completed the design for a website that works well in Firefox, Chrome, IE11 and Safari (all for the desktop). I deliberately made sure that all of the elements, when sizing was necessary, were sized as a percentage of the screen or its parent element. The only exception to this was font size, which I set in pixels for the desktop and included a media style for other devices which adjusted the font sizes to smaller fonts. When this web site is viewed in the "Responsive Design Mode" of my browser, however, it does not fully scale down to match the screen width as it should. Instead, I get about 2/3rds to 3/4trs of the page width in the screen of the "Responsive Design Mode," with the rest hanging out to the right beyond the screen' edge (see attached screenshot). If its working properly, the web site should fill the screen completely with no sections hanging out to the right beyond the screen' edge. I know it may be asking a lot, given the sketchy information I've been able to provide here but can anyone point me into a direction that might correct this issue?
There is an item in there that can't get smaller than currently set. Use the inspector and highlight each item until you find what pushing it out. You can also start with a responsive framework instead of doing this from scratch - Top 10 Front-End Frameworks of 2018 - KeyCDN
Jonh - That helped a little but more confusion ensues. My web page has a main table (whose parent is 'Body') containing a number of other elements. This 'main' table is sized to be 80% of the width of the 'Body' which is given a width of 100%. From this, I would assume that the main table would be sized to be 80% as wide as the screen, yet it is 120px larger than the reduced screen size of 812px for the iPhone X/XS in the Responsive Design Mode of Firefox. I tried manually setting the 'main' table to 650px (i.e., 80% of the reduced iPhone screen size in landscape mode). This reduced the size of the table in the desktop view but did nothing in the Responsive Design Mode. Is it possible that the width of one of the elements within the 'main' table is locking in a larger size for the 'main' table? If yes, I scanned through all of the additional elements using the inspector and found only that they were no larger than the width of the 'main' table. As you can tell, I am relatively new to adapting my code for smart phones and could use whatever additional help you might be able to offer.
Infopro
Well-Known Member
You might do better to find a forum related to this sort of thing for assistance with this. This thread, your website coding issues, has no relationship to cPanel. There are lots of forums and tutorials and videos to be had via google:
build a responsive website - Google Search
HTH!
build a responsive website - Google Search
HTH!
Dear InfoPro:
It's been my experience that people who respond to submissions on forums like cPanel fall into the following groups:
- They belittle me for being so stupid as to ask such an obviously simple question because they want to show everyone just how smart they think they are;
- They continuously ask for more information trying to get you to tell them everything about your problem before even attempting to answer it; or
- They tell me that I posted in the wrong forum.
Bob
When you resize down, margin-left: 10% + left: 10% + main table width (80%) + margin-right: 10% = 110% (for starters).
I'd echo the above. You're using tables to layout your page, whereas there is no semantically tabular content on your page. Where you've got the header and footers split with colspans applied, these will not collapse down from inline-cells to vertical blocks, and the images contained aren't resizing down with % widths (& height to auto), so the table will never collapse narrower than the size of the image in those rows plus the size of the adjacent colspan'd column.
Even with your header and footer rows removed, the smallest the table will collapse as it stands is 420px, due to the width of the content on the Chorus Members tab, whose sub-table cannot collapse down from inline-rows into vertical blocks. Your tab row limits the table from collapsing below 620px unless removed.
You should be moving towards using a CSS grid structure - see www.getbootstrap.com for one of the more popular frameworks for responsive design work. One of the (many) reasons such frameworks increased in popularity is because of the failings of trying to use table elements for responsive page layout: ie - they rarely work, and involve twice as much effort (if not more) to make work vs just using a responsive framework to begin with.
I'd echo the above. You're using tables to layout your page, whereas there is no semantically tabular content on your page. Where you've got the header and footers split with colspans applied, these will not collapse down from inline-cells to vertical blocks, and the images contained aren't resizing down with % widths (& height to auto), so the table will never collapse narrower than the size of the image in those rows plus the size of the adjacent colspan'd column.
Even with your header and footer rows removed, the smallest the table will collapse as it stands is 420px, due to the width of the content on the Chorus Members tab, whose sub-table cannot collapse down from inline-rows into vertical blocks. Your tab row limits the table from collapsing below 620px unless removed.
You should be moving towards using a CSS grid structure - see www.getbootstrap.com for one of the more popular frameworks for responsive design work. One of the (many) reasons such frameworks increased in popularity is because of the failings of trying to use table elements for responsive page layout: ie - they rarely work, and involve twice as much effort (if not more) to make work vs just using a responsive framework to begin with.
Infopro
Well-Known Member
Indeed. Still, if I wanted to know how to fix web design issues with my website, I'd be visiting a forum on that topic.
Happy Holidays to you!
Thank you for your very informative and helpful response!