1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Need help with website appearing wrong on small screens/windows

Discussion in 'HTML & Website Design' started by aab1, Jun 11, 2013.

  1. #1
    My website www.auctionautobidder.com appears wrong when the screen or window width doesn't allow it to appear completely.

    Can someone please tell me what I need to change in the code to correct this?

    Thank you
    aab1, Jun 11, 2013 IP
  2. tonicc

    tonicc Active Member

    Messages:
    197
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #2
    If you want to do your website "responsive", you should use the CSS media queries. For example you can write in your media queries that when the screen/windows of the visitor is less than 800px your styles should look different and adapted to the new width.

    More info: http://www.w3.org/TR/css3-mediaqueries/
    tonicc, Jun 11, 2013 IP
  3. aab1

    aab1 Member Affiliate Manager

    Messages:
    199
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    38
    #3
    Thanks, but for now I'd like to simply correct the bug that occurs when the width is too short.

    Thank you
    aab1, Jun 11, 2013 IP
  4. Maleabil

    Maleabil Member

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #4
    Hi! If you really have a "bug" you should install firebug for firefox and find the bug yourself. It's simple and intuitive to use firebug. I allready did it and i noticed that your "main-area" div has 1096 px so when displayed on small resolution(for example 1024px) it can't fit. Look into your css for "main-area" and play with the width. Take for example this forum. It has two stripes(left and right). This is because the main part, where it display the information, has only 960px. If you need more help please ask. GOOD LUCK!
    Maleabil, Jun 11, 2013 IP
  5. aab1

    aab1 Member Affiliate Manager

    Messages:
    199
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    38
    #5
    Can anyone give me more detailed help? I know nothing about CSS, if someone could tell me something like "Change ABC for XYZ on line X" that would be great.

    Thank you
    aab1, Jun 17, 2013 IP
  6. Thriftypreneur

    Thriftypreneur Member

    Messages:
    71
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    25
    #6
    I'm not seeing the error. On my screen it looks fine (1920x1080) and is aligned correctly.

    If your site doesn't fit on smaller resolutions, that's because your design is not responsive. So, even if you fix it to look correct on your screen, anyone using a lower resolution will have to scroll in order to see the entire width of the website.


    If you want to reduce your website's width anyway (even though I imagine most people use 1024 width or higher), change the following code:

    in auction-style.css beginning at line 130:
    Code (Text):
    1. .main-area {
    2.     margin: 0 auto;
    3.     width: 1096px;
    4. }
    Simply change 1096 to 1024 or lower.
    Then, in your index page source file find and change this (this is the text check list area):
    Code (Text):
    1. <div style="float:right;width:680px" id="sign_up_features">
    Adjust width 680 to desired width.
    Last, adjust this, also found in index page source file (this is the text area to the left of the video):
    Code (Text):
    1. <div class="site-text" style="float:left;width:695px;padding:32px 29px">
    Adjust width 695 to desired width.


    If you want your site to look correct on mobile devices and ipads, you'll have to switch to a responsive design.
    Last edited: Jun 17, 2013
    Thriftypreneur, Jun 17, 2013 IP
  7. deathshadow

    deathshadow Prominent Member

    Messages:
    5,980
    Likes Received:
    826
    Best Answers:
    144
    Trophy Points:
    395
    #7
    As others are trying to tell you, the design itself is flawed to the point there is no 'silver bullet' fix -- it's not a simple error or easy/small fix; you might not want to hear this, but the answer for the most part is to throw that ENTIRE design away, there is little if anything I would retain from it if I cared (and I do) about accessibility, large screen users, small screen users, or anything in-between.

    It is filled with design elements that simply aren't viable for a responsive/mobile design, and even with the elastic parts it would take a pretty hefty overhaul to drag it kicking and screaming into this century.

    Though it is entirely what I've come to expect when I see a HTML 5 doctype; specifically 1997 style markup with endless inlined presentation, that prettty much screams the developer never embraced HTML 4 Strict, and until a year or two ago was vomiting up HTML 3.2 and slapping 4 tranny on it. Inaccessible forms, clearing DIV like it's still 2001, nothing remotely resembling logical document structure, paragraphs doing headings job, overstuffed keywords meta, HEADER tag in HEAD (absolute gibberish), 'floating' non-semantically marked up text, presentational images in the markup, attributes on elements that don't have those attributes...

    Hence the 17 validation errors in the loosey-goosey HTML 5 BS validator... JHVH help it in the latest recommendations of 4 Strict/X1 Strict.

    It reeks of someone needing to go back and actually learn some HTML -- and that's WITHOUT talking the inaccessible "how not to build a website" fixed width.
    deathshadow, Jun 18, 2013 IP
  8. aab1

    aab1 Member Affiliate Manager

    Messages:
    199
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    38
    #8

    Hi, as I said in my OP the problem is on smaller screens, resize the window lengthwise until the website no longer fits, then scroll to the right and you'll see the problem.

    The problem is not that scroll bars appear when the width is too small, that's what I want to happen for now, the problem is a weird white section that appears out of nowhere when the window width is too short.

    How can i fix this?

    Thank you
    aab1, Jun 22, 2013 IP
  9. deathshadow

    deathshadow Prominent Member

    Messages:
    5,980
    Likes Received:
    826
    Best Answers:
    144
    Trophy Points:
    395
    #9
    That's because all your sections are different sizes and cannot auto-adjust. It's got a fixed width:

    .main-area{
    width:1096px;
    margin:0 auto;
    }

    So it's NOT going to expand to match the footer.

    It's part of why it is NOT an easy simple silver-bullet fix unless you want to set overflow and chop off the scrolling altogether... It REALLY needs to be thrown out as a non-viable design concept that was coded improperly!
    deathshadow, Jun 22, 2013 IP
  10. Thriftypreneur

    Thriftypreneur Member

    Messages:
    71
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    25
    #10
    Pretty much this.

    Every element on your site has its own dimensions. Fixing it would take all day and then you'd still run into problems later, most likely.

    As Deathshadow suggests, the coding is pretty bad and should just be discarded for a more functional, well-coded design.
    Thriftypreneur, Jun 22, 2013 IP
  11. wdstandards

    wdstandards Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #11
    Please don't take this the wrong way, but is all about the lack of planning upfront and identifying your design objectives and lack of testing throughout before launching.

    Now dare i say, a bit of a mess since u will need to make your site responsive.

    for more info on responsive design, check out this link: http://wdstandards.com/2013/your-guide-to-responsive-design-frameworks/
    wdstandards, Jun 22, 2013 IP
  12. wdstandards

    wdstandards Peon

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #12
    as a quick fix you can try using percentages or em on your widths
    wdstandards, Jun 22, 2013 IP