dcsimg
www.webdeveloper.com
Results 1 to 8 of 8

Thread: [RESOLVED] Fixed Width changing on different screens...is this possible?!

  1. #1
    Join Date
    Oct 2008
    Posts
    78

    resolved [RESOLVED] Fixed Width changing on different screens...is this possible?!

    So I'm building up a test site for a client on a folder on my website:

    http://www.mjsolutions.net/ftwc

    Once it's done, it'll be switched over to a new live server. The site has a fixed width which I'm actually specifying with PHP (the stylesheet uses PHP, but caches it, don't worry). So when I'm specifying the width of the site, I'm using this $pagewidth variable, and it's 1000px. All is well in testing. I just download chrome on my iPad, and test the site. What the hell??

    The site is compacted. The tractor is pushed slightly inwards, but still sits at the left-most edge. The little things on the right on the home page that say about consultancy and contacting us etc. spill onto a new line. Same goes for Safari on the iPad. I then test it on another, older computer in the house, and have the same result.

    I've never come across a situation like this, where a fixed width website renders differently on different screens.

    What's happening?

    Cheers guys.

  2. #2
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,219
    It will always happen as the way a web page looks depends on the browser's viewport size at any screen resolution.

    Choosing Dimensions for Your Web Page Layout:

    In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/
    Choosing Dimensions for Your Web Page Layout: http://www.elated.com/articles/choos...b-page-layout/
    How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/
    Care With Font Size: http://www.w3.org/QA/Tips/font-size
    Designing for the Web: Resolution and Size: http://sitepointcom.createsend4.com/...yd/birtthtw/h/

    Websites Shouldn’t Look The Same Across Different Browsers: http://www.noupe.com/design/websites...re-is-why.html
    Cross-Browser CSS in Seconds with Prefixr: http://net.tutsplus.com/articles/new...-with-prefixr/
    Responsive Web Design Demystified: http://www.elated.com/articles/respo...n-demystified/
    Responsive Web Design: 5 Handy Tips: http://www.elated.com/articles/respo...-5-handy-tips/
    It’s Not Responsive Web Building, It’s Responsive Web Design: http://www.getfinch.com/finch/entry/...ve-web-design/

    Beginner’s Guide to Responsive Web Design: http://thinkvitamin.com/design/begin...ve-web-design/

    Adapt.js - Adaptive CSS: http://adapt.960.gs/

  3. #3
    Join Date
    Oct 2008
    Posts
    78
    Yes, but this is a fixed width. There should be no variance in the space available to me from browser to browser. Fair enough, if the resolution of a screen is small, they will have to scroll sideways (the width is only 1000px though), but the actual area of the webpage should remain the same. It doesn't.

    EDIT: I mean it's a good 50px or so out. What gives?
    Last edited by flashcus; 07-05-2012 at 04:30 AM.

  4. #4
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,219
    Fixed width does not mean absolutely fixed as it is all relative to the browser's viewport size. If the vertical and horizontal content can not be viewed, then the default action of the browser is to generate scrollbars for the viewer unless you have CSS rules overriding this action (visibility: hidden. I have a 23-inch screen and using a high resolution, yet, if I resize my browser small enough, it will generate a horizontal scrollbar along with the vertical one which probably has already been generated.

  5. #5
    Join Date
    Oct 2008
    Posts
    78
    Exactly, the same goes for me. If I scale my browser to a small size, scrollbars are generated. This is normal and what I want. However, on my iPad and another computer, the actual size of the website is reduced. Maybe a screenshot will help..
    Attached Images Attached Images

  6. #6
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,219
    You're talking about the mobile web which is a different "animal" all together:

    Mobile Website:

    5 Stunning and Usable Mobile Website Designs: http://designfestival.com/5-stunning...&utm_term=More
    Learn the Mobile Web: http://learnthemobileweb.com/2009/07/mobile-meta-tags/
    10 Ways the Mobile Web is Different: http://www.elated.com/articles/10-wa...-is-different/
    Redesigning a Site For Mobile: What's Involved?: http://www.elated.com/articles/redes...hats-involved/
    How to Validate and Test for the Mobile Web:

    http://designfestival.com/how-to-val...&utm_term=More
    Make Your WordPress Website Mobile-Friendly in Minutes: http://designfestival.com/make-your-...dly+in+Minutes

    Web Mobile Browser Shots: https://browshot.com/

  7. #7
    Join Date
    Oct 2008
    Posts
    78
    Like I said, on another computer as well running the latest version of firefox. Not just the mobile web.

  8. #8
    Join Date
    Oct 2008
    Posts
    78
    Fixed. I knew it wasn't possible. The site was still rendering at 1000px, but it was all to do with fonts. Not to worry, all is good.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles