CODEWITHSUNDEEP
htmlcss
Aerodynamika
Aerodynamika

Reputation: 8413

Website doesn't fit in the browser window

My website needs a lot of screen space in order to be useful. The minimum width that works fine is about 1200 px. The problem is that when it's opened on screens with lower resolution (iPhone or old computers), the page doesn't fit fully into the screen and it gets cut on the left side.

Does anyone have an idea what I could do that instead it'd just be scrollable?

I use CSS layer for the whole page

#page {
position:absolute;
left:50%;
width:1200px;
margin-left:-600px; 
}

and then inside this layer I have the actual content:

#content {
width:1200px;
text-align: left;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: normal;
color: #aaaaaa;
clear:both; 
margin-top:40px;
}

I understand that probably the reason is the margin-left: -600px setting but then how do I make sure that the whole content block is centered? Or do I just have to align it to the left side instead?

Any help will be greatly appreciated!

PS - the website is on http://textexture.com and here's the CSS I use: http://textexture.com/templates/styles.css

Thank you!

Upvotes: 0

Views: 4170

Answers (4)

Bhargav v
Bhargav v

Reputation: 45

"website isn't fitting to your window size" -main reason for this problem is using of min-width or max-width attributes in your css file ,check and try to remove any unwanted min,max-width or height attributes

Upvotes: 0

Kees Sonnema
Kees Sonnema

Reputation: 5784

You can also work with % like this.

#page {
    width: 100%;
    margin: 0 auto;
}

#content {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #aaaaaa;
    clear:both; 
    margin-top:40px;
}

Upvotes: 1

diggersworld
diggersworld

Reputation: 13080

Really and truly if you want users with smaller resolutions to be able to use your website you should make it so it works at lower resolutions. There are a few techniques for doing this. The website you've linked to looks pretty simple so it shouldn't be too tricky to change some of your styling.

You might want to look at Responsive Web Design and using media queries in CSS.

Upvotes: 3

David Oliver
David Oliver

Reputation: 2502

Try this instead:

#page {
    width: 1200px;
    margin: 0 auto;
}

#content {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #aaaaaa;
    clear:both; 
    margin-top:40px;
}

Absolute positioning comes with complications, and should only generally be used if it's actually necessary.

Also, it seems like there's no reason to have separate #page and #content divs. Try deleting #page and combing them:

#content {
    width: 1200px;
    margin: 0 auto;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #aaaaaa;
    clear:both; 
    margin-top:40px;
}

Upvotes: 5

Related Questions