SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Website content cut off on mobile and other browsers

    Hi,

    my website http://ridwan.me appears fine on chrome, ie and firefox on my laptop and desktop, but the right hand side along with a fair chunk of the content is cut off when viewing the site from most mobiles.

    I've seen other threads here with a similar issue and tried adding a meta viewpoint tag in the html header, which only made things worse. Even adjusting the css container size to 1100px didn't help much.

    If anyone could check through the code and lend a hand in solving the issue I'd be very grateful.

    Cheers

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,619
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Hi theotherside. Welcome to the forums.

    Quote Originally Posted by theotherside View Post
    adding a meta viewpoint tag in the html header, which only made things worse.
    All the same, you need to do that to make the site 'responsive' in the usual meaning of the term. Add that code in, and then we can guide you on the next part of the job.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,873
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You get the same effect on desktop if you narrow your screen to 1000px and then try to scroll right.

    You have set the container to 1200px width but your wrappers are percentage width and have overflow:hidden so anything smaller than the viewport is hidden.

    Try adding min-width to the body element.

    Code:
    body{min-width:1200px}
    But as Ralph said if you want to support mobile properly you need to use the viewport meta tag and media queries to reduce the width of that display into a single column.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •