SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Site not scaling correctly

    I was all excited to launch this new site but its not scaling scaling correctly. I have used this theme many times, but this time I had to go beyond the normal 960px width with the psd I got back from designer. But now its totally jacked up when I look at it on phone or tablet. Do I have to redo everything for a 960 width?
    http://amerikickfranchise.com/

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,329
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    The layout also has problems on desktop. It only works on really wide viewports, because the main content is not aligned with the header section. You need to wrap the content in a div that is centered, just as you do with the inner header content. That's where I'd start.

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    The layout also has problems on desktop. It only works on really wide viewports, because the main content is not aligned with the header section. You need to wrap the content in a div that is centered, just as you do with the inner header content. That's where I'd start.
    The inside header content is wrapped with a centered "inner" class, and the page has the same class. So the larger background images shouldnt be the problem then right?

  4. #4
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    think i found a better way to slice it....i'll try that first

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Ralph.m
    I got it closer changing some of the backgrounds. It stays lined up, but now Im left with some white space on the right side on smaller viewports. What causes that?
    I am also wondering if I didnt take the right approach with the large image background because then all the other text divs jump all over on smaller devices. I originally started slicing each content section, which I think would help with the text positioning. But I did away with that thought because of all the extra http requests.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,329
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    You've improved it now, though even on the desktop it has that problem of whitespace on the right. that's usually caused by some element sticking out to the right that hasn't been placed properly. In this case, if you go through all the elements, you find this is the case with the .gform_body div (and possibly others, too).

  7. #7
    SitePoint Zealot
    Join Date
    Feb 2012
    Location
    US
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph! That form was the biggest offender. I rescaled some of the other images too... looks decent now. What you think?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,329
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Looks much better, although you still have tha problem that when the browser window gets narrower, the body background image at the top keeps moving, and as you scroll right the background that was hidden doesn't reappear. Usually thats easy to fix, but has me stumped. Something is collapsing, even though you have min-widths set.


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
  •