Modifying Website Design for Other Devices
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 0 -
Great advice @jonh - let us know if that information helps @buckibooster 0 -
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 0 -
You can see which one you fall into.
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! :)0 -
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
0
Please sign in to leave a comment.
Comments
8 comments