Need help with website appearing wrong on small screens/windows

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

 

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/

 

Thanks, but for now I'd like to simply correct the bug that occurs when the width is too short.

Thank you

 

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!

 

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

 

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:

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

Code (markup):

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):

<div style="float:right;width:680px" id="sign_up_features">

Code (markup):

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):

<div class="site-text" style="float:left;width:695px;padding:32px 29px">

Code (markup):

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.

 

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.

 

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

 

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!

 

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.

 

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/

 

as a quick fix you can try using percentages or em on your widths