SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: CSS Problem

  1. #1
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Problem

    I am having problems formatting my site for mobile and other devices

    With the font set at 100% in the body styling tag like so:
    Code:
    body { font-size: 100%;}
    Which means the base font is 16px

    I have tried to use inside the #wrapper styling
    Code:
    #wrapper {width: 62.5em;}
    Only to find that the width of the page is smaller than the 1000px equivalent that I want i.e. approximately 875px

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi, Welcome to Sitepoint

    I think we may need a little more information here to see what's going on. Do you have a link to the site or a small demo we can see?

    You mentioned mobile and other devices so where specifically does this problem occur. Are you seeing it on desktops? Desktops show the wrapper as 1000px wide. Remember though that not all browsers set the base font to 16px (although most do) but this can also be changed via the user. I'm not sure what the defaults on mobiles are either.

    If the problem is just on mobile then what mobile strategy are you using? Do you have the viewport meta tag in place and are you delivering special styles to mobile via media queries? If you are doing neither of those things then your layout will just scaled to fit on a mobile device
    (it will assume your site is 980px wide and scale it to fit in the 320px viewport).

    For mobiles you should be delivering a different experience and a width of 1000px is not going to fit on to a mobile unless its scaled microscopically small.

    If you have a link to the site or a small demo then it may be easier to spot what is going on
    Last edited by Paul O'B; Jan 19, 2014 at 06:00.

  3. #3
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know that all browsers are not based at 16px, I've even tried with the font-size set at 16px to see if that fixed the problem, but it didn't

    No, I wasn't using 980px for the mobile as I have media queries set for min width = 320 and max width = 480 and other media queries set for other devices

    I will reset my beta set soon to show you what is happening, then give the link out, I don't know how to do a demo of the site

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by cssbonding View Post
    I don't know how to do a demo of the site
    You can easily make up a demo page that demonstrates the problem. Here's an explanation of how to do that: http://www.sitepoint.com/forums/show...Posting-Basics

  5. #5
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta charset="utf-8">
    <style type="text/css">
    body{
    	background:#000;
    	color:#FFF;
    	font: 100% Arial, Helvetica, sans-serif;
    }
    
    #wrapper {
    	margin-top:10px;
    	width: 62.5em;
    	background:#333;
    	margin-left:auto;
    	margin-right:auto;
    	text-align:center;
    	padding-top:5px;
    }
    </style>
    	
    </head>
    <body>
    
    <div id="wrapper">
    
    </div>
    
    
    </body>
    </html>
    I didn't quite get what was meant by a demo, I am used to the word script

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

    No, I wasn't using 980px for the mobile as I have media queries set for min width = 320 and max width = 480 and other media queries set for other devices
    If you don't have the viewport meta tag in place then mobiles will not take any notice of your smaller width media queries because they will assume the page is 980px width (no matter what you have set it) and then scale it to fit the small device.

    You need to add the viewport meta tag for proper responsive web design:

    Code:
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    Now mobiles will not scale the page but obey the rules that you have set for width in your media queries. For these devices you would remove any physical widths as such (like your 62.5em wrapper) and usually let the elements be auto width so that they fill the smaller screen and then you adjust your elements to fit in the smaller screen (e.g. reducing 3 columns into one column and so on..)

    Only to find that the width of the page is smaller than the 1000px equivalent that I want i.e. approximately 875px
    How do you know the element is 875px wide? It's not possible to tell that on a mobile with any accuracy or are you talking about on desktop.

    You also need to remove margins and padding from html and body or your element will be smaller still on mobiles.
    Code:
    html,body{margin:0;padding:0}
    If you haven't got a live version for us to see yet then perhaps a few screenshots would clarify the situation as I feel we may be talking at cross purposes here

  7. #7
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ooops, I thought I had the viewport tag in my design knowing that the media query was in?

    I will report to you back soon, thanks, but keep this thread open, if it's poss

  8. #8
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think this was a combination of poor css and html scripting on my behalf, plus my lack of understanding of the em/pt/% and thinking that the viewport tag was inside the html header

    I guess we all learn, thanks for the help everyone

  9. #9
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    How do you know the element is 875px wide? It's not possible to tell that on a mobile with any accuracy or are you talking about on desktop.

    How I knew it was only 875 px is because I took a screenshot of the width of the wrapper (because it is a different colour to the main body) with the snipping tool (Windows)


Tags for this Thread

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
  •