How to reduce webpage size


Can anyone please help me with the layout of my website The issue is page width, its blank on rightside if we scroll horizontally. If anyone can review the code and let me know whats causing this will be of great help.:mad:

The left padding on your logo is causing the issue:

#logo .container {
background: url(theme/logo-shadow.png?1408398058) no-repeat center top;
padding: 20px [COLOR="#FF0000"]430[/COLOR]px 0;

If you want the title centered, do this instead:

#logo .container {
background: url(theme/logo-shadow.png?1408398058) no-repeat center top;
padding: [COLOR="#FF0000"]20px 0 0[/COLOR];
[COLOR="#FF0000"]text-align: center;[/COLOR]

The problem is the enormous background image which is 1,360px × 600px.

Expanding the screen to the full size of your monitor ( F11 ) and then reducing the font ( CTRL - ) will prevent the screen from having to scroll. Unfortunately the text will be far too small to read.

The offending CSS

body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; 
    background: url(theme/header-bg.jpg?1408398058) repeat center top; }

Google for “CSS background-image” and let us know if you find a solution.

No, a background image doesn’t cause scroll like that. See my post above. :slight_smile:

Just to avoid confusion in the OP: the codes you gave indeed solve the matter, but it was the left and right padding.

Thank you very much Ralph, I applied your solution and it resolved my problem.:slight_smile:

Unfortunately, I did not download and try changing the background.

I thought it was similar to a recent problem I had with a background image 1600px x 1600px. The image did not resize to small screens. Scrolling was necessary to see the complete picture.

Please feel free to delete my posts to prevent any confusion.