Please whitelist cPanel in your adblocker so that you’re able to see our version release promotions, thanks!

The Community Forums

Interact with an entire community of cPanel & WHM users!

Modifying Website Design for Other Devices

Discussion in 'General Discussion' started by buckibooster, Dec 19, 2018.

  1. buckibooster

    buckibooster Member

    Joined:
    Nov 22, 2018
    Messages:
    11
    Likes Received:
    2
    Trophy Points:
    3
    Location:
    Florida
    cPanel Access Level:
    Website Owner
    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?
     

    Attached Files:

  2. jonh

    jonh Well-Known Member

    Joined:
    Feb 15, 2016
    Messages:
    86
    Likes Received:
    5
    Trophy Points:
    8
    Location:
    NY
    cPanel Access Level:
    Root Administrator
    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
     
  3. cPanelLauren

    cPanelLauren Forums Analyst II Staff Member

    Joined:
    Nov 14, 2017
    Messages:
    6,502
    Likes Received:
    509
    Trophy Points:
    263
    Location:
    Houston
    cPanel Access Level:
    DataCenter Provider
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
  4. buckibooster

    buckibooster Member

    Joined:
    Nov 22, 2018
    Messages:
    11
    Likes Received:
    2
    Trophy Points:
    3
    Location:
    Florida
    cPanel Access Level:
    Website Owner
    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.
     
  5. Infopro

    Infopro cPanel Sr. Product Evangelist Staff Member

    Joined:
    May 20, 2003
    Messages:
    16,955
    Likes Received:
    485
    Trophy Points:
    583
    Location:
    Pennsylvania
    cPanel Access Level:
    Root Administrator
    Twitter:
    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!
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
  6. buckibooster

    buckibooster Member

    Joined:
    Nov 22, 2018
    Messages:
    11
    Likes Received:
    2
    Trophy Points:
    3
    Location:
    Florida
    cPanel Access Level:
    Website Owner
    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.
    You can see which one you fall into. I keep posting however, because once in a blue moon someone actually responds to me, not usually with the answer, but with a hint of an answer that leads me to solve my own problem. When I find a forum that is actually helpful, I'll be sure to let your users know. Thanks for being ever so helpful.

    Bob
     
  7. APatchworkBoy

    APatchworkBoy Active Member

    Joined:
    Feb 26, 2018
    Messages:
    25
    Likes Received:
    7
    Trophy Points:
    3
    Location:
    West Yorkshire, UK
    cPanel Access Level:
    Root Administrator
    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.
     
  8. Infopro

    Infopro cPanel Sr. Product Evangelist Staff Member

    Joined:
    May 20, 2003
    Messages:
    16,955
    Likes Received:
    485
    Trophy Points:
    583
    Location:
    Pennsylvania
    cPanel Access Level:
    Root Administrator
    Twitter:
    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! :)
     
    Stop hovering to collapse... Click to collapse... Hover to expand... Click to expand...
  9. buckibooster

    buckibooster Member

    Joined:
    Nov 22, 2018
    Messages:
    11
    Likes Received:
    2
    Trophy Points:
    3
    Location:
    Florida
    cPanel Access Level:
    Website Owner
    Thank you for your very informative and helpful response!
     
    cPanelLauren likes this.
Loading...

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice